HTML <fieldset>: 필드 집합 요소

HTML <fieldset> 요소는 양식 내의 여러 컨트롤과 레이블을 그룹으로 묶기 위한 요소입니다.

<form action="">
  <fieldset>
    <legend>좋아하는 맹수를 골라주세요</legend>

    <input type="radio" id="tiger" name="beast" />
    <label for="tiger">호랑이</label><br />

    <input type="radio" id="lion" name="beast" />
    <label for="lion">사자</label><br />

    <input type="radio" id="cat" name="beast" />
    <label for="cat">고양이</label>

    <button>제출하기</button>
  </fieldset>
</form>

legend {
  background: #dddd;
  color: #000;
  padding: 3px 6px;
}

위의 예제에서 볼 수 있듯, <fieldset> 요소는 HTML 양식의 일부를 묶을 수 있으며 안쪽의 <legend> 요소로 그룹에 이름을 붙일 수 있습니다.

특성

전역 특성을 포함합니다.

disabled

지정하면 그룹 내의 모든 컨트롤을 비활성화하는 불리언 특성입니다. 즉, <fieldset>에 속하는 모든 자손 컨트롤의 클릭과 포커스 획득을 막습니다.

<legend> 안에 배치한 컨트롤은 비활성화하지 않습니다.

form

이 <fieldset>을 양식 소유자(<form> 요소)와 연결합니다. 같은 문서 상에 존재하는 <form>의 id 값을 지정하세요. 이 특성이 존재하지 않으면 <fieldset>의 양식 소유자는 가장 가까운 조상 <form>이 됩니다.

헷갈릴 수 있으나, <fieldset>을 양식과 연결해도 그 안의 컨트롤은 양식과 연결되지 않습니다. 컨트롤과 양식을 연결하려면 컨트롤 각각에 form 특성을 지정하세요. 양식에 연결된 컨트롤의 목록은 JavaScript의 HTMLFormElement.elements로 가져올 수 있습니다.

name

그룹의 이름을 지정합니다.

사용자에게 보이는 그룹 이름은 이 특성이 아니라 <legend> 요소로 추가합니다.

명세

HTML Living Standard

브라우저 호환성