form으로 입력값을 묶고 서버에 제출하는 흐름을 이해합니다.
form은 사용자가 입력한 컨트롤의 name과 value를 한 번에 전송합니다. action은 받을 주소를 정하고 method=get은 주소의 query string, method=post는 요청 본문으로 전송합니다. method=dialog는 dialog 안의 폼을 네트워크 요청 없이 닫는 용도입니다. label을 입력 요소와 연결해야 이름을 클릭해도 포커스가 이동합니다.
input의 id는 keyword이고 name은 q라서, label은 id로 입력칸과 이어지고 제출 데이터에는 name인 q가 키로 들어갑니다. 스크립트가 submit 이벤트에서 preventDefault로 실제 전송을 막고 FormData로 모은 값을 꺼내므로 결과 문단에 전송 값: q=입력한 글자가 표시됩니다. required 때문에 칸이 비어 있으면 submit 이벤트 자체가 일어나지 않습니다.
action이 없으면 폼은 현재 문서 주소로 제출되고, method를 적지 않으면 GET이 기본값입니다. GET 제출에서는 값이 q=값 형태로 주소 뒤에 붙으며 공백은 +로, 한글은 퍼센트 인코딩으로 바뀝니다. 입력칸 안에서 Enter를 누르면 첫 번째 제출 버튼을 누른 것과 같은 암묵적 제출이 일어납니다.
input에 name이 없으면 화면에서 입력해도 제출 데이터에 포함되지 않습니다. GET과 POST 모두 HTTPS가 없으면 전송 중 보호되지 않으며, POST 자체가 보안 기능인 것은 아닙니다.
직접 바꿔보세요검색어 input을 비운 상태와 값을 넣은 상태로 각각 제출해보세요.