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

<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>을 보입니다.

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

비활성 필드셋

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

<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> 요소와 그 이후의 플로우 콘텐츠.
태그 생략 None, both the starting and ending tag are mandatory.
가능한 부모 요소 플로우 콘텐츠를 허용하는 모든 요소.
가능한 ARIA 역할 group, presentation
DOM 인터페이스 HTMLFieldSetElement

명세

브라우저 호환성

BCD tables only load in the browser