<fieldset>: 필드셋 요소

HTML <fieldset> 요소는 웹 양식의 여러 컨트롤과 레이블(<label>)을 묶을 때 사용합니다.

시도해보기

위의 예제에서 보듯, <fieldset> 요소는 HTML 양식 속에서 그룹을 만들 수 있으며 <legend> 요소로 그룹의 설명을 제공할 수 있습니다. 여러 특성을 지정할 수 있는데, 그 중 중요한 것 하나는 페이지 내 <form> 요소의 id를 받을 수 있는 form 특성으로, <form> 바깥의 <fieldset> 요소를 해당 양식에 포함해야 할 때 사용합니다. 다른 하나는 disabled로, <fieldset>의 모든 콘텐츠를 한 번에 비활성화할 수 있습니다.

특성

이 요소는 전역 특성을 포함합니다.

disabled

지정한 경우, 모든 자손 컨트롤을 비활성화합니다. 비활성 컨트롤은 편집할 수 없고, <form>을 제출할 때 데이터에 포함되지 않습니다. 마우스 클릭, 포커스 등 브라우저 이벤트도 모두 받지 않습니다. 브라우저는 비활성 컨트롤을 주로 회색으로 표시합니다. 단, <legend> 안의 양식 요소는 비활성 상태로 전환되지 않습니다.

form

<fieldset> 요소와 연결할 <form> 요소("양식 소유자")의 id. <fieldset>이 해당 <form> 안에 위치하지 않아도 연결할 수 있습니다.

name

그룹과 연관지을 이름.

참고: <fieldset>에 대한 설명은 자신이 포함한 첫 번째 <legend> 요소가 담당합니다.

CSS 스타일링

<fieldset>에 스타일을 적용하기 전에 고려해야 하는 부분이 있습니다.

<fieldset>display (en-US) 속성의 값은 기본적으로 block이며, 새로운 블록 서식 맥락 (en-US)을 형성합니다. 인라인형 display 값을 지정하면 inline-block, 그렇지 않으면 block처럼 행동합니다. <fieldset>은 기본 스타일로 콘텐츠를 감싸는 2px 너비의 groove 테두리, 작은 양의 내부 여백, 그리고 min-inline-size: min-content (en-US)를 갖습니다.

<legend> 요소는 <fieldset>의 블록 시작 방향(대개 위쪽) 테두리 위를 가로지르는 위치에 놓입니다. <legend> 또한 자신의 블록 서식 맥락을 만들며, 너비는 자신의 콘텐츠에 맞춰져 늘어나거나 줄어듭니다. display는 항상 블록형이 됩니다. 즉, display: inlineblock처럼 동작합니다.

<fieldset>의 콘텐츠는 별도의 익명 상자가 담게 됩니다. 익명 상자는 <fieldset>으로부터 특정 속성을 상속합니다. <fielset>display: grid 또는 display: inline-grid를 지정하면 익명 상자는 그리드 서식 맥락을 가지며, display: flex 또는 display: inline-flex를 지정하면 익명 상자가 플렉스 서식 맥락을 갖습니다. 그 외의 경우 블록 서식 맥락입니다.

참고: 글 작성 시점에서, Microsoft Edge와 Google Chrome에는 <fieldset> 내부에서 플렉스박스와 그리드 레이아웃을 사용할 수 없는 버그가 존재합니다. GitHub 이슈에서 버그 추적 링크를 확인할 수 있습니다.

예제

간단한 필드셋

다음 예제는 <legend>와 하나의 컨트롤을 가진 단순한 <fieldset>을 보입니다.

html
<form action="#">
  <fieldset>
    <legend>Simple fieldset</legend>
    <input type="radio" id="radio" />
    <label for="radio">Spirit of radio</label>
  </fieldset>
</form>

비활성 필드셋

다음 예제는 두 개의 컨트롤을 가진 비활성 <fieldset>을 보입니다. 각각의 컨트롤은 disabled 특성이 없으나, 필드셋으로 인해 함께 비활성 상태가 된 점을 확인할 수 있습니다.

html
<form action="#">
  <fieldset disabled>
    <legend>Disabled fieldset</legend>
    <div>
      <label for="name">Name: </label>
      <input type="name" id="text" value="Chris" />
    </div>
    <div>
      <label for="pwd">Archetype: </label>
      <input type="password" id="text" value="Wookie" />
    </div>
  </fieldset>
</form>

기술 요약

콘텐츠 카테고리 플로우 콘텐츠, 구획 루트, 양식 관련 콘텐츠(나열됨), 뚜렷한 콘텐츠.
가능한 콘텐츠 선택적인 <legend> 요소와 그 이후의 플로우 콘텐츠.
태그 생략 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다.
가능한 부모 요소 플로우 콘텐츠를 허용하는 모든 요소.
가능한 ARIA 역할 group (en-US), presentation (en-US)
DOM 인터페이스 HTMLFieldSetElement (en-US)

명세

Specification
HTML Standard
# the-fieldset-element

브라우저 호환성

BCD tables only load in the browser