form, fieldset, legend 태그

김종민·2023년 8월 11일
0

html / css

목록 보기
19/28
post-thumbnail
post-custom-banner

1. form 요소

<form> 요소는 폼(FORM)의 범위를 표시한다. 폼은 사용자 입력을 위한 다양한 형식의 컨트롤(W3C는 입력필드, 버튼 등 폼을 구성하는 입력 요소를 컨트롤이라고 부름)로 구성되는 영역이며, 이 영역의 시작과 종료 지점은 <form> 요소에 의해 정의된다.

상호작용이 양방향으로 이루어지면서 사용자로부터 데이터를 수집해야 하는 상황이 자주 발생하였고, 이를 위해 고안된 것이 바로 컨트롤이다. 그리고 이 컨트롤들이 모여 있는 곳이 바로 폼이다.

폼 요소는 블록 레벨 요소이므로 문서 전체를 폼으로 지정하거나 한 문서 내에 여러 개의 폼을 지정할 수도 있다.


action 속성

action 속성은 실행 애플리케이션을 지정한다. 실행 애플리케이션은 입력된 데이터를 처리하는 서버 또는 프로그램이다. 이곳으로 데이터를 보내려면 브라우저가 전송 위치(URL)를 알아야 하며, 이를 위해 action 속성을 사용한다.

<form action="http://www.example.com/addresscheck.html/">
</form>


2. FIELDSET 요소

fieldset 요소는 관련 있는 폼 필드 세트(form FIELD SET)를 표시한다. 폼 필드 세트는 폼 내에서 관련 컨트롤을 하나의 그룹으로 묶은 것을 말한다.

<form>
  <fieldset>
...
  </fieldset>
</form>
  • 폼을 효과적으로 계층화시킬 수 있다.
  • legend 요소를 함께 사용해야 한다.

form 속성

form 속성은 해당 fieldset 요소가 속해 있는 폼을 지정한다. 이 속성을 지정하면 특정 formfieldset 요소의 관계를 명시적으로 연결할 수 있다. 이렇게 연결하면 브라우저는 두 요소 사이의 상호작용이 좀 더 쉽게 이루어질 수 있도록 도울 수 있으며 fieldset 요소가 form 요소 밖에 있더라도 둘 사이의 관계를 유지할 수 있다. 특히 하나의 fieldset 요소가 복수의 form 요소와 관계를 맺어야 할 때 효과적인 속성이다.



3. 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 요소가 되어야 한다.

profile
웹 퍼블리셔의 코딩 일기
post-custom-banner

1개의 댓글

comment-user-thumbnail
2023년 8월 11일

감사합니다. 이런 정보를 나눠주셔서 좋아요.

답글 달기