내일배움캠프 6기 React TIL

2023.06.02

오늘의 회고

자바스크립트 개인과제가 마무리 되고 개인과제를 바탕으로 팀프로젝트가 시작되었다.

form 태그

오늘 진행한 개인과제 해설에서 form태그에 대해 알게된 점이다.

• semantic tag : 폼 내부에 사용자로부터 입력을 받고 제출하는 UI가 있을 것이라 예측 가능
• submit 이벤트 발생 시 새로고침 처리하는 기본 동작을 가지고 있음

formElement.addEventListner('submit', function (event) {
	// 발생한 이벤트에 대한 브라우저의 기본 동작(새로고침)을 막습니다.
	event.preventDefault();
})

• form 내부에서 input 과 button 의 동작
  • form 태그에 submit 이벤트 핸들러가 있는 경우, input에 내용 입력 후 button 클릭 또는 Enter 입력 시 submit 이벤트 핸들러가 실행된다.
  • form 안에 있는 button 태그에 type을 명시하지 않은 경우 기본 type은 submit 이며, submit이 아닌 다른 타입을 명시하면 버튼 클릭 시 submit 이벤트가 발생하지 않는다.

<form id="search-form">
    <label>영화 검색 : </label>
    <input type="text" id="search-input" placeholder="영화 제목을 검색해 보세요" />
    <button type="submit" id="search-btn">검색</button>
</form>

form 태그에서 새로고침을 막는 다른 방법도 있었다.