웹 폼 구조화를 위한 HTML fieldset 태그 활용 방법

FIELDSET 태그란?

<fieldset> 태그 역시 <section>이나 <article>과 같이 구역을 나누는 역할을 합니다. HTML 폼 요소를 그룹화하고 가독성있게 만듭니다. 관련있는 폼끼리 그룹으로 묶을 때 fieldset 태그를 활용하게 됩니다.

 

사용법

<form method="post" action="/submit">
  <fieldset>
    <legend> 개인정보 </legend>
    <label> .... </label>
    <input> ... </input>
  <fieldset>
  <fieldset>
    <legend> 배송정보 </legend>
    <label> .... </label>
    <input> ... </input>
  <fieldset>
</form>

• <fieldset>태그는 열고 닫아야 하는 태그입니다
• class나 id 외에 별다른 속성은 없습니다
• 폼 내에서 성격상 그룹으로 묶어야 하는 곳에 사용합니다.
• 위치는 <form> 바로 밑입니다

 

같이 사용되는 태그

<fieldset> 태그는 <form>, <label>, <input>, <button>과 같이 폼을 구성하는 태그들과 함께 어울립니다.

 

• <form>: 웹 폼을 정의하는 태그 관련포스트
• <input>: 사용자로부터 데이터를 입력받는 폼 요소를 생성하는 태그 관련포스트
• <label>: 폼 요소의 설명을 제공하고 연결하는 태그 관련포스트
• <button>: 버튼을 생성하는 태그 관련포스트