<fieldset>: 필드셋 요소

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

위의 예제에서 보듯, <fieldset> 요소는 HTML 양식 속에서 그룹을 만들 수 있으며 <legend> 요소가 그룹의 설명을 제공합니다.

특성

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

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를 지정하면 익명 상자가 플렉스 서식 맥락을 갖습니다. 그 외의 경우 블록 서식 맥락입니다.

예제

간단한 필드셋

다음 예제는 <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

명세

Specification Status Comment
HTML Living Standard
The definition of '<fieldset>' in that specification.
Living Standard Definition of the fieldset element
HTML5
The definition of '<fieldset>' in that specification.
Recommendation
HTML 4.01 Specification
The definition of '<fieldset>' in that specification.
Recommendation Initial definition

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
fieldsetChrome Full support Yes
Notes
Full support Yes
Notes
Notes Does not support flexbox and grid layouts within this element. See bug 262679.
Edge Full support 12
Notes
Full support 12
Notes
Notes Does not support flexbox and grid layouts within this element. See bug 4511145.
Firefox Full support YesIE Full support YesOpera Full support Yes
Notes
Full support Yes
Notes
Notes Does not support flexbox and grid layouts within this element. See bug 262679.
Safari Full support YesWebView Android Full support Yes
Notes
Full support Yes
Notes
Notes Does not support flexbox and grid layouts within this element. See bug 262679.
Chrome Android Full support Yes
Notes
Full support Yes
Notes
Notes Does not support flexbox and grid layouts within this element. See bug 262679.
Firefox Android Full support YesOpera Android Full support Yes
Notes
Full support Yes
Notes
Notes Does not support flexbox and grid layouts within this element. See bug 262679.
Safari iOS Full support YesSamsung Internet Android Full support Yes
Notes
Full support Yes
Notes
Notes Does not support flexbox and grid layouts within this element. See bug 262679.
disabledChrome Full support YesEdge Partial support 12
Notes
Partial support 12
Notes
Notes Does not work with nested fieldsets. For example: <fieldset disabled><fieldset><!--Still enabled--></fieldset></fieldset>
Firefox Full support YesIE Full support Yes
Notes
Full support Yes
Notes
Notes Not all form control descendants of a disabled fieldset are properly disabled in IE11; see IE bug 817488: input[type='file'] not disabled inside disabled fieldset and IE bug 962368: Can still edit input[type='text'] within fieldset[disabled].
Opera Full support 12Safari Full support 6WebView Android Full support 4.4Chrome Android Full support YesFirefox Android Full support YesOpera Android ? Safari iOS Full support 6Samsung Internet Android Full support Yes
formChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
nameChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
Partial support  
Partial support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.