HTML 강좌 / form의 구조와 GET·POST 제출 방식

form은 사용자가 입력한 값을 제출하는 영역입니다. 양식을 만들 때는 입력 필드의 name, 보낼 주소인 action, 전송 방식인 method를 함께 이해해야 합니다. HTML만으로 입력 화면은 만들 수 있지만, 데이터를 저장하거나 검색하는 기능은 서버 쪽 처리가 필요합니다.

가장 작은 양식 만들기

다음 예제는 검색어를 입력하고 제출하는 양식입니다. 실제 사이트에서 사용하려면 /search를 검색 요청을 처리하는 주소로 바꾸어야 합니다.

<form action="/search" method="get">
  <label for="keyword">검색어</label>
  <input id="keyword" name="q" type="search">
  <button type="submit">검색</button>
</form>

label의 for와 input의 id가 같아 입력칸의 이름을 연결합니다. name="q"는 전송될 값의 이름입니다. 사용자가 ‘HTML’을 입력해 제출하면 GET 요청의 주소에는 일반적으로 ?q=HTML처럼 검색어가 붙습니다. id만 있고 name이 없으면 그 필드의 값은 보통 제출 데이터에 포함되지 않습니다.

action은 요청을 받을 주소이고, method는 그 주소에 값을 전달할 방법입니다. 두 속성을 생략하면 현재 문서 주소로 GET 방식 제출이 기본입니다. 처음 연습할 때는 입력값에 한글과 공백도 넣어 보세요. 주소창에서는 특수문자가 인코딩되어 보일 수 있지만, 그것은 전송을 위한 표기이며 입력 자체가 사라진 것은 아닙니다.

GET과 POST의 차이

method="get"은 양식 데이터를 URL의 쿼리 문자열에 넣습니다. 검색이나 필터처럼 주소를 공유하거나 다시 열기 좋은 요청에 적합합니다. URL에 노출되므로 비밀번호 같은 민감한 값을 보내는 데 사용하지 마세요.

method="post"는 데이터를 요청 본문에 담습니다. 회원가입이나 글 작성처럼 서버의 상태를 바꾸는 작업에 주로 사용합니다. POST라고 해서 데이터가 자동으로 암호화되는 것은 아닙니다. 민감한 값을 다루는 사이트는 HTTPS와 서버 측 처리가 필요합니다.

<form action="/contact" method="post">
  <label for="message">메시지</label>
  <textarea id="message" name="message"></textarea>
  <button type="submit">보내기</button>
</form>

/contact는 설명을 위한 주소이며, 대응하는 서버가 없다면 제출 후 오류 페이지가 나타날 수 있습니다. HTML 파일만으로 동작을 확인하려면 앞의 GET 예제에서 action=""으로 바꾸고 제출한 다음 주소에 q 값이 붙는지 확인해 보세요. 파일을 직접 열었을 때의 주소 표시는 브라우저마다 다를 수 있습니다.

특히 action="/search"처럼 슬래시로 시작하는 경로는 사이트의 루트를 기준으로 합니다. 로컬 파일에서 그대로 사용하면 기대한 검색 페이지가 열리지 않습니다. 제출 화면과 실제 처리 기능을 구별하고, 서버가 준비되기 전에는 더미 주소에 개인정보를 보내지 마세요. 파일 업로드 양식은 POST와 별도의 전송 인코딩이 필요하므로 이 예제에 파일 필드만 추가해서는 완성되지 않습니다.

전송되지 않는 필드 확인하기

disabled가 붙은 입력 필드는 사용자가 수정할 수 없고 제출 데이터에도 들어가지 않습니다. 단순히 수정을 막으면서 값이 필요한 경우에는 필드 유형에 맞는 readonly 지원 여부를 확인해야 합니다. 체크박스나 라디오 버튼은 선택된 항목만 전송됩니다.

개발자 도구의 Network 패널에서 제출 요청의 주소와 전송 데이터를 확인할 수 있습니다. 서버의 응답이 실패하더라도 HTML 필드 이름과 요청 방식이 맞는지 먼저 검사하면 문제 범위를 좁힐 수 있습니다. 정확한 동작은 MDN form 요소 문서를 참고하세요.

제출 결과가 예상과 다르면 다음 순서로 확인하세요. 첫째, 필드마다 name이 있는지 봅니다. 둘째, 선택형 필드가 실제로 선택되었는지 확인합니다. 셋째, 요청 주소와 방식이 서버가 받는 규칙과 맞는지 살펴봅니다. HTML에서 올바른 요청이 나가더라도 서버가 그 값을 저장하거나 응답하는지는 별개의 문제입니다.