HTML <fieldset>

HTML 태그 fieldset

HTML의 <fieldset> 태그는 form 요소를 그룹화할 때 사용됩니다. 이 태그를 통해 논리적으로 관련된 폼 필드를 함께 묶어 시각적으로 구분할 수 있게 됩니다. <fieldset> 태그 안에는 보통 <legend> 태그를 사용해 그룹의 제목을 설정합니다. 

 

주요 특징을 다음과 같이 정리해보았습니다.

 

• 폼 그룹화:
  • <fieldset>은 여러 폼 요소를 그룹으로 묶어줄 수 있습니다. 시각적으로 구분이 가능하게 해주며, 한 페이지 내에 폼이 길게 
• <legend> 태그와의 조합:
  • <legend> 태그는 <fieldset>의 첫 번째 자식 요소로 사용되어 그룹의 제목을 표시할 수 있습니다.
    <legend>에 정의된 텍스트는 <fieldset> 경계선 위에 표시됩니다.
• 접근성(Accessibility):
  • <fieldset>과 <legend> 태그는 스크린 리더가 폼 구조를 이해하는 데 도움을 주어 접근성을 향상시킵니다.
• 스타일링:
  • 기본적으로 브라우저는 <fieldset>에 대해 테두리(border)를 표시합니다.
    CSS를 통해 커스터마이징할 수도 있습니다.

 

태그 사용 예시

<form>
  <h2>폼 데이터</h2>
  <fieldset><h3>필드셋1</h3>
    <legend>first field set legend</legend>
    <input placeholder="필드셋1 input1"/>
    <input placeholder="필드셋1 input2"/>
  </fieldset>
  <fieldset><h3>필드셋2</h3>
    <legend>second field set legend</legend>
    <input placeholder="필드셋2 input1"/>
    <input placeholder="필드셋2 input2"/>
    <input placeholder="필드셋2 input3"/>
    <input placeholder="필드셋2 input4"/>
  </fieldset>
  <fieldset><h3>필드셋1</h3>
    <legend>third field set legend</legend>
    <input placeholder="필드셋3 input1"/>
    <input placeholder="필드셋3 input2"/>
    <input placeholder="필드셋3 input3"/>
  </fieldset>
</form>

태그 사용 결과 화면

 

fieldset에 속성 적용해보기

<style>
  fieldset {
      border: 2px solid #ccc;
      padding: 10px;
      margin-bottom: 20px;
  }

  legend {
      font-weight: bold;
      padding: 0 10px;
  }
</style>

 

동일한 태그에 css가 적용되면 다음과 같이 변경 됩니다.

 

한가지 더 추가해보자면 fieldset에는 Disabled 속성을 추가하여 그룹에 포함된 모든 폼 요소를 비활성화 할 수 있습니다.
2번째 필드셋에 disabled속성을 추가한 결과입니다. 
<fieldset disabled>