HTML <fieldset> 요소는 양식 내의 여러 컨트롤과 레이블을 그룹으로 묶기 위한 요소입니다.

불러오는 중...

<form action="">
  <fieldset>
    <legend>좋아하는 맹수를 골라주세요</legend>

    <input type="radio" id="tiger" name="beast" />
    <label for="tiger">호랑이</label><br />

    <input type="radio" id="lion" name="beast" />
    <label for="lion">사자</label><br />

    <input type="radio" id="cat" name="beast" />
    <label for="cat">고양이</label>

    <button>제출하기</button>
  </fieldset>
</form>

위의 예제에서 볼 수 있듯, <fieldset> 요소는 HTML 양식의 일부를 묶을 수 있으며 안쪽의 <legend> 요소로 그룹에 이름을 붙일 수 있습니다.

특성

전역 특성을 포함합니다.

disabled

지정하면 그룹 내의 모든 컨트롤을 비활성화하는 불리언 특성입니다. 즉, <fieldset>에 속하는 모든 자손 컨트롤의 클릭과 포커스 획득을 막습니다.

<legend> 안에 배치한 컨트롤은 비활성화하지 않습니다.

form

<fieldset>양식 소유자(<form> 요소)와 연결합니다. 같은 문서 상에 존재하는 <form>id 값을 지정하세요. 이 특성이 존재하지 않으면 <fieldset>의 양식 소유자는 가장 가까운 조상 <form>이 됩니다.

헷갈릴 수 있으나, <fieldset>을 양식과 연결해도 그 안의 컨트롤은 양식과 연결되지 않습니다. 컨트롤과 양식을 연결하려면 컨트롤 각각에 form 특성을 지정하세요. 양식에 연결된 컨트롤의 목록은 JavaScript의 HTMLFormElement.elements로 가져올 수 있습니다.

name

그룹의 이름을 지정합니다.

사용자에게 보이는 그룹 이름은 이 특성이 아니라 <legend> 요소로 추가합니다.

명세

HTML Living Standard

브라우저 호환성

IEEdgeChromeSafariFirefox
지원12*지원*지원지원
iOS SafariAndroid WebViewAndroid ChromeAndroid FirefoxSamsung Internet
지원지원*지원*지원지원*
disabled
IEEdgeChromeSafariFirefox
지원*12*지원6지원
iOS SafariAndroid WebViewAndroid ChromeAndroid FirefoxSamsung Internet
64.4지원지원지원
form
IEEdgeChromeSafariFirefox
지원12지원지원지원
iOS SafariAndroid WebViewAndroid ChromeAndroid FirefoxSamsung Internet
지원지원지원지원지원
name
IEEdgeChromeSafariFirefox
지원12지원지원지원
iOS SafariAndroid WebViewAndroid ChromeAndroid FirefoxSamsung Internet
지원지원지원지원지원
MDN BCD에서 가져오는 데이터입니다.

마지막 업데이트:
이 페이지를 오프라인에서 볼 수 있습니다.

sorto.me

CC BY-SA 4.0

based on MDN (contributors)