FORM 요소
form 요소는 폼(FORM)의 범위를 표시한다. 폼은 사용자 입력을 위한 다양한 형식의 컨트롤(W3C는 입력필드, 버튼 등 폼을 구성하는 입력 요소를 컨트롤이라고 부름)로 구성되는 영역이며, 이 영역의 시작과 종료 지점은 form 요소에 의해 정의된다.
상호작용이 양방향으로 이루어지면서 사용자로부터 데이터를 수집해야 하는 상황이 자주 발생하였고, 이를 위해 고안된 것이 바로 컨트롤이다. 그리고 이 컨트롤들이 모여 있는 곳이 바로 폼이다.
- 폼 요소는 블록 레벨 요소이므로 문서 전체를 폼으로 지정하거나 한 문서 내에 여러 개의 폼을 지정할 수도 있다.
<form action="" method="post">
<fieldset>
<legend class="blind">검색</legend>
<input type="text" name="search" id="input" placeholder="apple.com 검색">
</fieldset>
</form>form 속성
form 속성은 해당 fieldset 요소가 속해 있는 폼을 지정한다. 이 속성을 지정하면 특정 form과 fieldset 요소의 관계를 명시적으로 연결할 수 있다. 이렇게 연결하면 브라우저는 두 요소 사이의 상호작용이 좀 더 쉽게 이루어질 수 있도록 도울 수 있으며 fieldset 요소가 form 요소 밖에 있더라도 둘 사이의 관계를 유지할 수 있다. 특히 하나의 fieldset 요소가 복수의 form 요소와 관계를 맺어야 할 때 효과적인 속성이다.
method 속성
method 속성은 HTTP 메소드(HTTP method)를 지정한다. HTTP 메소드는 클라이언트와 서버 간 데이터를 주고받기 위한 방식을 의미하는데 주로 사용되는 방식은 GET과 POST 방식이다.
- GET 방식 : 입력된 데이터가 URL에 의해 전송되므로 암호화하지 않으면 URL만으로도 어떤 데이터를 입력했는지 알 수 있다. POST 방식보다 상대적으로 보안이 취약하고 전송할 수 있는 데이터도 제한적이다.
- POST 방식 : 입력된 데이터를 HTTP Body에 담아 전송하면서 서버측에서 데이터를 처리하는 방식이다. HTTP Body는 URL에 비해 더 많은 정보를 담을 수 있기 때문에 POST 방식은 GET 방식보다 더 많은 양의 데이터를 전송할 수 있으며 상대적으로 보안이 높은 편이다.
FIELDSET 요소
fieldset 요소는 관련 있는 폼 필드 세트(form FIELD SET)를 표시한다. 폼 필드 세트는 폼 내에서 관련 컨트롤을 하나의 그룹으로 묶은 것을 말한다.
- 폼을 효과적으로 계층화시킬 수 있다.
- legend 요소를 함께 사용해야 한다.
LEGEND 요소
legend 요소는 fieldset 요소의 제목(LEGEND)을 표시한다. fieldset 요소를 이용하여 여러 개의 컨트롤들을 묶었으면 이 묶음이 어떤 성격 또는 용도인지 알려줄 필요가 있으며, 이때 legend 요소를 사용한다.
- 이 요소를 사용하면 fieldset 요소로 묶인 영역 주변에 테두리 선이 나타난다.
- 이 요소는 부모 요소인 fieldset 요소와 함께 사용해야 하므로 fieldset 요소의 첫 번째 자식 요소는 legend 요소가 되어야 한다.
