이번 편의 결과물: contact.html 폼을 제출했을 때 URL 또는 요청 본문에 어떤 문자열이 담기는지 직접 확인한 기록이 남습니다. · 다루는 개념: method(GET/POST) 차이, action과 기본 제출 동작, name/value 짝짓기, 제출 데이터 인코딩
이 편에서 만드는 파일
web-practice/portfolio/
└ contact.html ~ (form 태그에 method·action 추가)개념 정리
<form>의 method와 action이 제출 방식을 결정합니다.
| 속성 | 역할 | 값 |
|---|---|---|
method | 데이터를 어디에 담아 보낼지 | get(기본값) | post |
action | 데이터를 보낼 주소 | URL. 생략하면 현재 페이지 주소 |
GET은 입력 데이터를 URL 뒤에 붙여서 보냅니다. 주소창에 그대로 노출되고, 브라우저 기록·즐겨찾기에 남습니다. 검색 폼처럼 결과를 URL로 공유하고 싶을 때 씁니다.
POST는 입력 데이터를 URL이 아니라 요청 본문(body)에 담아 보냅니다. 주소창에 노출되지 않습니다. 개인정보가 포함되거나 서버 상태를 변경하는 폼(회원가입·글쓰기·이 연락 폼처럼)은 POST를 씁니다.
제출되는 각 필드는 name=value 쌍으로 인코딩됩니다. name이 없는 입력은 제출되지 않습니다. 이 과목에서 지금까지 만든 입력마다 name을 반드시 넣은 이유가 여기 있습니다.
name=이름 → name=%EC%9D%B4%EB%A6%84한글·공백·특수문자는 URL에 그대로 쓸 수 없어 퍼센트 인코딩(percent-encoding)됩니다. 공백은 + 또는 %20으로, 한글 한 글자는 UTF-8 바이트를 퍼센트 기호와 16진수로 표현한 여러 문자로 바뀝니다. 여러 필드는 &로 연결됩니다.
name=Zeno&email=zeno%40example.com&inquiryType=collabGET으로 제출하면 이 문자열이 그대로 주소창 URL 뒤에 ?와 함께 붙습니다. POST로 제출하면 같은 문자열이 요청 본문에 담겨 주소창에는 보이지 않습니다.
자주 하는 오해: POST가 GET보다 “안전”하다고 오해하지만, 암호화 여부와는 무관합니다. POST는 데이터를 URL에 노출하지 않을 뿐이고, 실제 전송 구간 보안은 HTTPS 여부가 결정합니다. 이 폼처럼 개인정보를 다루는 경우 URL 노출을 막기 위해 POST를 쓰는 것이지, POST 자체가 암호화를 뜻하지는 않습니다.
실습
1. form 태그에 method와 action 추가하기
이 연락 폼은 이름·이메일·메시지 같은 개인정보를 담으므로 method="post"를 씁니다. action은 아직 실제 서버가 없으므로 자기 자신(contact.html)을 가리키게 둡니다.
<!-- contact.html (form 여는 태그) -->
<form method="post" action="contact.html">
<fieldset>
<legend>연락 정보 입력</legend>
<!-- 10·11편에서 만든 필드 그대로 -->
</fieldset>
</form>2. GET 방식으로 바꿔 URL 인코딩 직접 관찰하기
인코딩을 눈으로 확인하기 위해 임시로만 method="get"으로 바꿉니다.
<!-- 실습 전용: 확인 후 다시 post로 되돌립니다 -->
<form method="get" action="contact.html">3. 실행
contact.html을 저장하고 브라우저에서 새로고침합니다. 이름에 “Zeno”, 이메일에 zeno@example.com을 입력하고 문의 유형은 기본값, 메시지에 “포트폴리오 잘 봤습니다”를 입력한 뒤 동의 체크박스를 켜고 “보내기”를 누릅니다.
4. 확인
- 제출 후 주소창이
contact.html?name=Zeno&email=zeno%40example.com&inquiryType=etc&message=...&agree=on형태로 바뀝니다. @가%40으로, 한글 메시지가 퍼센트 기호로 시작하는 여러 문자로 바뀐 것을 확인합니다.- 체크박스는 켜져 있을 때만
agree=on으로 제출되고,value를 따로 지정하지 않았다면 기본값이on입니다. - 확인이 끝나면
method를 다시post로 되돌립니다. 되돌린 뒤 같은 내용을 제출하면 주소창이contact.html에서 바뀌지 않습니다(데이터가 URL이 아니라 본문에 담겼기 때문).
직접 해보기
- 이메일 칸에 공백이 포함된 텍스트를 넣어 GET으로 제출해 보고, 공백이 URL에서 어떤 문자로 바뀌는지 확인합니다.
action을 지운(속성 자체를 제거) 채 제출해 보고, 어느 주소로 제출되는지 확인합니다.
답 보기
공백은 + 또는 %20으로 인코딩됩니다. 브라우저마다 표시가 다를 수 있으니 실제 주소창을 확인합니다.
action을 생략하면 폼은 현재 페이지 자기 자신으로 제출됩니다. contact.html에서 제출하면 다시 contact.html로 이동합니다.
자주 하는 실수
| 증상 | 원인 | 고치는 법 |
|---|---|---|
| 입력한 값이 제출 데이터에 안 보인다 | 입력에 name을 안 붙임 | name 없는 입력은 제출되지 않는다는 것을 기억하고 모든 입력에 name 부여 |
| 개인정보 폼인데 GET을 그대로 씀 | GET이 기본값이라 무심코 방치 | 개인정보·서버 상태 변경 폼은 method="post"로 명시 |
| POST가 데이터를 암호화한다고 착각 | GET/POST와 HTTPS를 혼동 | POST는 URL 노출만 막을 뿐, 암호화는 HTTPS가 담당한다고 정정 |