HTML 폼이란 무엇인가?
HTML 폼(양식)은 웹사이트 방문자로부터 데이터를 수집하기 위해 반드시 필요한 요소입니다. 예를 들어, 학생이 대학 웹사이트에 등록할 때 이름, 나이, 주소, 성적 등의 정보를 입력받는 경우를 생각해 볼 수 있습니다.
폼은 사이트 방문자로부터 입력값을 받아 CGI, ASP 스크립트, PHP 스크립트와 같은 백엔드 애플리케이션으로 전송합니다. 백엔드 애플리케이션은 전달받은 데이터를 애플리케이션 내부에 정의된 비즈니스 로직에 따라 필요한 처리를 수행합니다.
HTML에서는 <form> 태그를 사용하여 폼을 생성합니다.
위 그림에서처럼 폼에는 여러 가지 속성(attribute)이 사용됩니다. 지금부터 HTML 폼의 주요 속성들을 하나씩 살펴보겠습니다.
HTML 폼의 주요 속성
| 번호 | 속성 및 설명 |
| 1 | action — 전달된 데이터를 처리할 백엔드 스크립트의 경로를 지정합니다. |
| 2 | method — 데이터를 전송하는 방식을 지정합니다. 가장 많이 사용되는 방식은 GET과 POST입니다. |
| 3 | target — 스크립트 실행 결과가 표시될 대상 창이나 프레임을 지정합니다. _blank, _self, _parent 등의 값을 사용할 수 있습니다. |
| 4 | enctype — 브라우저가 서버로 데이터를 전송하기 전에 데이터를 인코딩하는 방식을 지정합니다. 가능한 값은 다음과 같습니다. application/x-www-form-urlencoded — 대부분의 폼이 일반적인 상황에서 사용하는 표준 인코딩 방식입니다. multipart/form-data — 이미지, 워드 문서 등 파일 형태의 바이너리 데이터를 업로드할 때 사용합니다. |
HTML 폼 컨트롤
데이터를 수집하기 위해 다양한 종류의 폼 컨트롤을 사용할 수 있습니다. 대표적인 컨트롤로는 텍스트 입력창(text input), 체크박스(checkbox), 라디오 버튼(radio button), 파일 선택 상자(file select box), 제출 버튼(submit button) 등이 있습니다.
그럼 <input> 태그를 사용해 사용자 입력을 받는 간단한 HTML 폼 예제를 살펴보겠습니다.
예제 코드
<!DOCTYPE html> <html> <head> <title>HTML Forms</title> </head> <body> <form> Student Name: <input type = "text" name = "sname" /><br> Student Subject: <input type = "text" name = "ssubject" /> </form> </body> </html>
위 코드를 실행하면 학생의 이름과 과목을 입력받을 수 있는 폼이 화면에 나타납니다.
여기서는 type과 name이라는 두 가지 속성을 사용했습니다. 이어서 <input> 태그에서 사용할 수 있는 모든 속성을 자세히 알아보겠습니다.
<input> 태그의 주요 속성
| 번호 | 속성 및 설명 |
| 1 | type — 입력 컨트롤의 유형을 나타냅니다. 텍스트 입력 컨트롤의 경우 'text'로 설정합니다. |
| 2 | name — 컨트롤에 이름을 부여합니다. 서버가 해당 컨트롤을 식별하고 값을 가져올 때 이 이름을 사용합니다. |
| 3 | value — 컨트롤 안에 초기값을 미리 지정할 때 사용합니다. |
| 4 | size — 텍스트 입력 컨트롤의 너비를 문자 수 기준으로 지정할 수 있습니다. |
| 5 | maxlength — 사용자가 텍스트 상자에 입력할 수 있는 최대 문자 수를 지정합니다. |