files/ko/web/html/element/fieldset/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151

---
title: '<fieldset>: 필드셋 요소'
slug: Web/HTML/Element/fieldset
tags:
  - Element
  - HTML
  - HTML forms
  - Reference
  - Web
translation_of: Web/HTML/Element/fieldset
---
<div>{{HTMLRef}}</div>

<p><strong>HTML <code>&lt;fieldset&gt;</code> 요소</strong>는 웹 양식의 여러 컨트롤과 레이블({{htmlelement("label")}})을 묶을 때 사용합니다.</p>

<div>{{EmbedInteractiveExample("pages/tabbed/fieldset.html", "tabbed-standard")}}</div>

<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>

<p>위의 예제에서 보듯, <code>&lt;fieldset&gt;</code> 요소는 HTML 양식 속에서 그룹을 만들 수 있으며 {{htmlelement("legend")}} 요소로 그룹의 설명을 제공할 수 있습니다. 여러 특성을 지정할 수 있는데, 그 중 중요한 것 하나는 페이지 내 {{htmlelement("form")}} 요소의 <code>id</code>를 받을 수 있는 <code>form</code> 특성으로, <code>&lt;form&gt;</code> 바깥의 <code>&lt;fieldset&gt;</code> 요소를 해당 양식에 포함해야 할 때 사용합니다. 다른 하나는 <code>disabled</code>로, <code>&lt;fieldset&gt;</code>의 모든 콘텐츠를 한 번에 비활성화할 수 있습니다.</p>

<h2 id="특성">특성</h2>

<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p>

<dl>
 <dt>{{htmlattrdef("disabled")}}</dt>
 <dd>지정한 경우, 모든 자손 컨트롤을 비활성화합니다. 비활성 컨트롤은 편집할 수 없고, {{htmlelement("form")}}을 제출할 때 데이터에 포함되지 않습니다. 마우스 클릭, 포커스 등 브라우저 이벤트도 모두 받지 않습니다. 브라우저는 비활성 컨트롤을 주로 회색으로 표시합니다. 단, {{htmlelement("legend")}} 안의 양식 요소는 비활성 상태로 전환되지 않습니다.</dd>
 <dt>{{htmlattrdef("form")}}</dt>
 <dd><code>&lt;fieldset&gt;</code> 요소와 연결할 {{htmlelement("form")}} 요소("양식 소유자")의 {{htmlattrxref("id")}}. <code>&lt;fieldset&gt;</code>이 해당 <code>&lt;form&gt;</code> 안에 위치하지 않아도 연결할 수 있습니다.</dd>
 <dt>{{htmlattrdef("name")}}</dt>
 <dd>그룹과 연관지을 이름.
 <div class="note"><strong>참고:</strong> <code>&lt;fieldset&gt;</code>에 대한 설명은 자신이 포함한 첫 번째 {{htmlelement("legend")}} 요소가 담당합니다.</div>
 </dd>
</dl>

<h2 id="CSS_스타일링">CSS 스타일링</h2>

<p><code>&lt;fieldset&gt;</code>에 스타일을 적용하기 전에 고려해야 하는 부분이 있습니다.</p>

<p><code>&lt;fieldset&gt;</code>의 {{cssxref("display")}} 속성의 값은 기본적으로 <code>block</code>이며, 새로운 <a href="/ko/docs/Web/Guide/CSS/Block_formatting_context">블록 서식 맥락</a>을 형성합니다. 인라인형 <code>display</code> 값을 지정하면 <code>inline-block</code>, 그렇지 않으면 <code>block</code>처럼 행동합니다. <code>&lt;fieldset&gt;</code>은 기본 스타일로 콘텐츠를 감싸는 <code>2px</code> 너비의 <code>groove</code> 테두리, 작은 양의 내부 여백, 그리고 {{cssxref("min-inline-size", "min-inline-size: min-content")}}를 갖습니다.</p>

<p>{{htmlelement("legend")}} 요소는 <code>&lt;fieldset&gt;</code>의 블록 시작 방향(대개 위쪽) 테두리 위를 가로지르는 위치에 놓입니다. <code>&lt;legend&gt;</code> 또한 자신의 블록 서식 맥락을 만들며, 너비는 자신의 콘텐츠에 맞춰져 늘어나거나 줄어듭니다. <code>display</code>는 항상 블록형이 됩니다. 즉, <code>display: inline</code>도 <code>block</code>처럼 동작합니다.</p>

<p><code>&lt;fieldset&gt;</code>의 콘텐츠는 별도의 익명 상자가 담게 됩니다. 익명 상자는 <code>&lt;fieldset&gt;</code>으로부터 특정 속성을 상속합니다. <code>&lt;fielset&gt;</code>에 <code>display: grid</code> 또는 <code>display: inline-grid</code>를 지정하면 익명 상자는 그리드 서식 맥락을 가지며, <code>display: flex</code> 또는 <code>display: inline-flex</code>를 지정하면 익명 상자가 플렉스 서식 맥락을 갖습니다. 그 외의 경우 블록 서식 맥락입니다.</p>

<div class="blockIndicator note">
<p><strong>참고</strong>: 글 작성 시점에서, Microsoft Edge와 Google Chrome에는 {{htmlelement("fieldset")}} 내부에서 플렉스박스와 그리드 레이아웃을 사용할 수 없는 버그가 존재합니다. <a href="https://github.com/w3c/csswg-drafts/issues/321">GitHub 이슈</a>에서 버그 추적 링크를 확인할 수 있습니다.</p>
</div>

<h2 id="예제">예제</h2>

<h3 id="간단한_필드셋">간단한 필드셋</h3>

<p>다음 예제는 {{htmlelement("legend")}}와 하나의 컨트롤을 가진 단순한 <code>&lt;fieldset&gt;</code>을 보입니다.</p>

<pre class="brush: html">&lt;form action="#"&gt;
  &lt;fieldset&gt;
    &lt;legend&gt;Simple fieldset&lt;/legend&gt;
    &lt;input type="radio" id="radio"&gt;
    &lt;label for="radio"&gt;Spirit of radio&lt;/label&gt;
  &lt;/fieldset&gt;
&lt;/form&gt;</pre>

<p>{{ EmbedLiveSample('간단한_필드셋', '100%', '80') }}</p>

<h3 id="비활성_필드셋">비활성 필드셋</h3>

<p>다음 예제는 두 개의 컨트롤을 가진 비활성 <code>&lt;fieldset&gt;</code>을 보입니다. 각각의 컨트롤은 <code>disabled</code> 특성이 없으나, 필드셋으로 인해 함께 비활성 상태가 된 점을 확인할 수 있습니다.</p>

<pre class="brush: html">&lt;form action="#"&gt;
  &lt;fieldset disabled&gt;
    &lt;legend&gt;Disabled fieldset&lt;/legend&gt;
    &lt;div&gt;
      &lt;label for="name"&gt;Name: &lt;/label&gt;
      &lt;input type="name" id="text" value="Chris"&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;label for="pwd"&gt;Archetype: &lt;/label&gt;
      &lt;input type="password" id="text" value="Wookie"&gt;
    &lt;/div&gt;
  &lt;/fieldset&gt;
&lt;/form&gt;</pre>

<p>{{ EmbedLiveSample('비활성_필드셋', '100%', '110') }}</p>

<h2 id="Specifications" name="Specifications">기술 요약</h2>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, 구획 루트, <a href="/ko/docs/Web/Guide/HTML/Content_categories#양식_관련_콘텐츠">양식 관련 콘텐츠</a>(<a href="/ko/docs/Web/Guide/HTML/Content_categories#나열됨">나열됨</a>), 뚜렷한 콘텐츠.</td>
  </tr>
  <tr>
   <th scope="row">가능한 콘텐츠</th>
   <td>선택적인 {{HTMLElement("legend")}} 요소와 그 이후의 <a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>.</td>
  </tr>
  <tr>
   <th scope="row">태그 생략</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">가능한 부모 요소</th>
   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소.</td>
  </tr>
  <tr>
   <th scope="row">가능한 ARIA 역할</th>
   <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td>
  </tr>
  <tr>
   <th scope="row">DOM 인터페이스</th>
   <td>{{domxref("HTMLFieldSetElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Specifications" name="Specifications">명세</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'forms.html#the-fieldset-element', '&lt;fieldset&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>Definition of the <code>fieldset</code> element</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-fieldset-element', '&lt;fieldset&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.10', '&lt;fieldset&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="브라우저_호환성">브라우저 호환성</h2>


<p>{{Compat("html.elements.fieldset")}}</p>