> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/html-and-css/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/html-and-css/html/form-element/fieldset-and-legend.md).

# \<fieldset>, \<legend>

> fieldset, legend 요소&#x20;

## \<fieldset>

하나 이상의 폼 컨트롤을 **그룹화** 하는데 사용된다. &#x20;

### 속성

* name
* disabled

## \<legend>

`<fieldset>` 컨트롤의 레이블(이름)을 설정하는 컨트롤.

```markup
<fieldset name="user_account">
  <legend>사용자 계정</legend>
</fieldset>
```

## 사용 목적 &#x20;

HTML `<fieldset>`요소는 웹 양식의 여러 컨트롤과 레이블(label)을 감싸고 `<legend>`요소를 사용해서 해당 컨텐츠 **그룹**에 대한 **설명**을 작성합니다. &#x20;

{% hint style="warning" %}
\<fieldset>요소는 **"묶음"**&#xB9CC;의 목적이 아닌 **"묶고 그 그룹에 대한 설명을 제공한다."**&#xC5D0; 목적이 있다. 그렇기 때문에 반드시 \<legend>요소를 사용해야 합니.&#x20;

\<legend>요소 없이 단순히 컨트롤 요소를 감싸기 위한 목적으로 사용하는 것은 \<fieldset>을 올바르게 사용하는 방법이 아니다.&#x20;
{% endhint %}

![](https://161134766-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPKJK-Pogdi-NHl4GxU%2F-MPdLamOxznuDxKMnVTd%2F-MPdQ80wPwKWNOnReDJ3%2Fimage.png?alt=media\&token=8cd6adf2-0c3f-4038-94cb-6265427b98ac)

## 예제&#x20;

![\[MDN\] \<fieldset> 예제](https://161134766-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPKJK-Pogdi-NHl4GxU%2F-MPdA7lN4MkK0cBY0IBJ%2F-MPdBAZJkmYC8jjKa7Ar%2Fimage.png?alt=media\&token=09b358f2-9a2d-45a3-8751-d6d90dd98cd5)

## 참고&#x20;

* [\[MDN\] \<fieldset> Element](https://developer.mozilla.org/ko/docs/Web/HTML/Element/fieldset)
* [\[MDN\] \<legend> Element](https://developer.mozilla.org/ko/docs/Web/HTML/Element/fieldset)