<fieldset>: 필드셋 요소

시도해 보기

<form>
  <fieldset>
    <legend>Choose your favorite monster</legend>

    <input type="radio" id="kraken" name="monster" value="K" />
    <label for="kraken">Kraken</label><br />

    <input type="radio" id="sasquatch" name="monster" value="S" />
    <label for="sasquatch">Sasquatch</label><br />

    <input type="radio" id="mothman" name="monster" value="M" />
    <label for="mothman">Mothman</label>
  </fieldset>
</form>

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

input {
  margin: 0.4rem;
}

위의 예제에서 보듯, <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: inline도 block처럼 동작합니다.

<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>

기술 요약

명세

브라우저 호환성