<form>
요소는 폼(FORM)의 범위를 표시한다. 폼은 사용자 입력을 위한 다양한 형식의 컨트롤(W3C는 입력필드, 버튼 등 폼을 구성하는 입력 요소를 컨트롤이라고 부름)로 구성되는 영역이며, 이 영역의 시작과 종료 지점은 <form>
요소에 의해 정의된다.
상호작용이 양방향으로 이루어지면서 사용자로부터 데이터를 수집해야 하는 상황이 자주 발생하였고, 이를 위해 고안된 것이 바로 컨트롤이다. 그리고 이 컨트롤들이 모여 있는 곳이 바로 폼이다.
폼 요소는 블록 레벨 요소이므로 문서 전체를 폼으로 지정하거나 한 문서 내에 여러 개의 폼을 지정할 수도 있다.
action
속성은 실행 애플리케이션을 지정한다. 실행 애플리케이션은 입력된 데이터를 처리하는 서버 또는 프로그램이다. 이곳으로 데이터를 보내려면 브라우저가 전송 위치(URL)를 알아야 하며, 이를 위해 action
속성을 사용한다.
<form action="http://www.example.com/addresscheck.html/">
</form>
fieldset
요소는 관련 있는 폼 필드 세트(form FIELD SET)를 표시한다. 폼 필드 세트는 폼 내에서 관련 컨트롤을 하나의 그룹으로 묶은 것을 말한다.
<form>
<fieldset>
...
</fieldset>
</form>
- 폼을 효과적으로 계층화시킬 수 있다.
legend
요소를 함께 사용해야 한다.
form
속성은 해당 fieldset
요소가 속해 있는 폼을 지정한다. 이 속성을 지정하면 특정 form
과 fieldset
요소의 관계를 명시적으로 연결할 수 있다. 이렇게 연결하면 브라우저는 두 요소 사이의 상호작용이 좀 더 쉽게 이루어질 수 있도록 도울 수 있으며 fieldset
요소가 form
요소 밖에 있더라도 둘 사이의 관계를 유지할 수 있다. 특히 하나의 fieldset
요소가 복수의 form
요소와 관계를 맺어야 할 때 효과적인 속성이다.
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 요소가 되어야 한다.
감사합니다. 이런 정보를 나눠주셔서 좋아요.