HTML 폼

개념 이해하기

form은 사용자가 입력한 컨트롤의 name과 value를 한 번에 전송합니다. action은 받을 주소를 정하고 method=get은 주소의 query string, method=post는 요청 본문으로 전송합니다. method=dialog는 dialog 안의 폼을 네트워크 요청 없이 닫는 용도입니다. label을 입력 요소와 연결해야 이름을 클릭해도 포커스가 이동합니다.

예제에서는 <form action="/search" method="get">...</form> 부분부터 찾으세요. 태그 이름만 외우기보다 부모·자식 관계와 속성이 어느 요소에 붙는지를 한 덩어리로 읽으면 구조를 고치기 쉬워집니다.

먼저 현재 결과를 확인한 뒤 검색어 input을 비운 상태와 값을 넣은 상태로 각각 제출해보세요. 수정 전에는 예상한 변화를 한 문장으로 적고, 실행 뒤에는 정보 순서와 키보드 접근까지 그대로인지 살펴보세요.