<fieldset>: 필드셋 요소
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
HTML <fieldset>
요소는 웹 양식의 여러 컨트롤과 레이블(<label>
)을 묶을 때 사용합니다.
시도해보기
특성
이 요소는 전역 특성을 포함합니다.
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: inline
도 block
처럼 동작합니다.
<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> 요소와 그 이후의
플로우 콘텐츠.
|
태그 생략 | 불가능, 시작과 끝에 태그를 추가하는 것은 필수입니다. |
가능한 부모 요소 | 플로우 콘텐츠를 허용하는 모든 요소. |
가능한 ARIA 역할 |
group , presentation
|
DOM 인터페이스 | HTMLFieldSetElement |
명세
Specification |
---|
HTML Standard # the-fieldset-element |
브라우저 호환성
BCD tables only load in the browser