폼과 관련된 요소와 속성은 사용자들과 상호작용을하는 주요 수단입니다. 첫번째로 폼을 구성하는 기본 구조에 대하여 배워봅니다.
FORM 요소
form 요소는 폼(FORM)의 범위를 표시한다. 폼은 사용자 입력을 위한 다양한 형식의 컨트롤(W3C는 입력필드, 버튼 등 폼을 구성하는 입력 요소를 컨트롤이라고 부름)로 구성되는 영역이며, 이 영역의 시작과 종료 지점은 form 요소에 의해 정의된다.
상호작용이 양방향으로 이루어지면서 사용자로부터 데이터를 수집해야 하는 상황이 자주 발생하였고, 이를 위해 고안된 것이 바로 컨트롤이다. 그리고 이 컨트롤들이 모여 있는 곳이 바로 폼이다.
<form>
...
</form>
- 폼 요소는 블록 레벨 요소이므로 문서 전체를 폼으로 지정하거나 한 문서 내에 여러 개의 폼을 지정할 수도 있다.
action 속성
action 속성은 실행 애플리케이션을 지정한다. 실행 애플리케이션은 입력된 데이터를 처리하는 서버 또는 프로그램이다. 이곳으로 데이터를 보내려면 브라우저가 전송 위치(URL)를 알아야 하며, 이를 위해 action 속성을 사용한다.
<form action="http://www.example.com/addresscheck.html/">
</form>
accept-charset 속성
accept-charset 속성은 승인된 문자 세트(accepted character set encoding)을 지정한다. 일반적으로 HTML 문서에 적용된 문자 세트가 적용된다. 그런데 폼에 입력된 문자를 문서 전체에 적용된 문자 세트로 표현할 수 없는 경우도 있을 수 있다. 이럴 때 accept-charset 속성을 사용하여 적절한 문자 세트를 적용시킬 수 있다.
<form accept-charset="utf-8">
</form>
enctype 속성
enctype 속성은 인코딩 타입(encoding type)을 지정한다. 이 속성에 의해 브라우저는 입력된 데이터를 서버로 보낼 때 어떤 타입으로 인코딩해야 하는지 알 수 있는데 인코딩 타입은 다음과 같이 세 가지 중 하나를 지정한다.
<form enctype="application/x-www-form-urlencoded">
</form>
enctype="application/x-www-form-urlencoded": 서버에 보내기전에 모든 문자를 인코딩하는 방식이며 폼에 텍스트 데이터를 포함했을 때 지정한다(기본값).enctype="multipart/form-data": 파일 업로드 컨트롤처럼 문자가 아닌 파일을 전송할 때 사용된다.enctype="text/plain": 일반 텍스트로 인코딩된다.
method 속성
method 속성은 HTTP 메소드(HTTP method)를 지정한다. HTTP 메소드는 클라이언트와 서버 간 데이터를 주고받기 위한 방식을 의미하는데 주로 사용되는 방식은 GET과 POST 방식이다.
<form action="http://www.example.com/form.html/" method="post">
</form>
- GET 방식 : 입력된 데이터가 URL에 의해 전송되므로 암호화하지 않으면 URL만으로도 어떤 데이터를 입력했는지 알 수 있다. POST 방식보다 상대적으로 보안이 취약하고 전송할 수 있는 데이터도 제한적이다.
- POST 방식 : 입력된 데이터를 HTTP Body에 담아 전송하면서 서버측에서 데이터를 처리하는 방식이다. HTTP Body는 URL에 비해 더 많은 정보를 담을 수 있기 때문에 POST 방식은 GET 방식보다 더 많은 양의 데이터를 전송할 수 있으며 상대적으로 보안이 높은 편이다.
name 속성
name 속성은 폼 이름을 지정한다. 이 속성은 스크립트에서 폼을 참조할 때 필요하다.
<form action="http://www.example.com/form.html/" method="post" name="profile_new">
</form>
novalidate 속성
novalidate 속성은 HTML5에 새롭게 추가된 속성으로서, 유효성 미확인을 지정한다. 이 속성을 지정하면 폼에 입력된 데이터를 서버로 보낼 때 데이터를 체크하지 않는다.
<form action="http://www.example.com/form.html/" method="post" name="profile_new" novalidate="novalidate">
</form>
FIELDSET 요소
fieldset 요소는 관련 있는 폼 필드 세트(form FIELD SET)를 표시한다. 폼 필드 세트는 폼 내에서 관련 컨트롤을 하나의 그룹으로 묶은 것을 말한다.
<form>
<fieldset>
...
</fieldset>
</form>
- 폼을 효과적으로 계층화시킬 수 있다.
- legend 요소를 함께 사용해야 한다.
form 속성
form 속성은 해당 fieldset 요소가 속해 있는 폼을 지정한다. 이 속성을 지정하면 특정 form과 fieldset 요소의 관계를 명시적으로 연결할 수 있다. 이렇게 연결하면 브라우저는 두 요소 사이의 상호작용이 좀 더 쉽게 이루어질 수 있도록 도울 수 있으며 fieldset 요소가 form 요소 밖에 있더라도 둘 사이의 관계를 유지할 수 있다. 특히 하나의 fieldset 요소가 복수의 form 요소와 관계를 맺어야 할 때 효과적인 속성이다.
<form id="user">
...
</form>
<p>The fieldset below is outside the form element, but still part of the form</p>
<fieldset form="user">
<legend>법인등록</legend>
...
</fieldset>
LEGEND 요소
legend 요소는 fieldset 요소의 제목(LEGEND)을 표시한다. fieldset 요소를 이용하여 여러 개의 컨트롤들을 묶었으면 이 묶음이 어떤 성격 또는 용도인지 알려줄 필요가 있으며, 이때 legend 요소를 사용한다.
<form>
<fieldset>
<legend>개인정보:</legend>
<label>이름: <input type="text"></label><br>
<label>주소: <input type="text"></label><br>
<input type="submit">
</fieldset>
</form>
- 이 요소를 사용하면 fieldset 요소로 묶인 영역 주변에 테두리 선이 나타난다.
- 이 요소는 부모 요소인 fieldset 요소와 함께 사용해야 하므로 fieldset 요소의 첫 번째 자식 요소는 legend 요소가 되어야 한다.
아래의 폼 요소들도 참고하세요.
- 본문 : 폼(Form) 요소 #2 - LABEL, INPUT
- 본문 : 폼(Form) 요소 #3 - TEXTAREA, SELECT, OPTION, OPTGROUP, DATALIST, BUTTON, KEYGEN, METER, PROGRESS, OUTPUT
