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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
|
---
title: <form>
slug: Web/HTML/Element/form
tags:
- Element
- HTML
- HTML forms
- Reference
- Web
- 양식
translation_of: Web/HTML/Element/form
---
<div>{{HTMLRef}}</div>
<p><strong>HTML <code><form></code> 요소</strong>는 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타냅니다.</p>
<div>{{EmbedInteractiveExample("pages/tabbed/form.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><form></code> 요소를 꾸밀 땐, 모든 {{domxref("HTMLFormElement.elements", "elements")}}의 유효성을 나타내는 CSS {{cssxref(":valid")}}와 {{cssxref(":invalid")}} <a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a>를 사용할 수 있습니다.</p>
<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>, 뚜렷한 콘텐츠.</td>
</tr>
<tr>
<th scope="row">가능한 콘텐츠</th>
<td>다른 <code><form></code> 요소를 제외한 <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("HTMLFormElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Attributes" name="Attributes">특성</h2>
<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>을 포함합니다.</p>
<dl>
<dt class="hidden">{{htmlattrdef("accept")}} {{obsolete_inline}}</dt>
<dd class="hidden">A comma-separated list of content types that the server accepts.
<div class="note"><strong>사용시 주의:</strong> 이 속성은 HTML5에서 제거되고 더 이상 사용되서는 안됩니다. 대신에, {{HTMLElement("input")}} 요소의 <span class="st">{{htmlattrxref("accept", "input")}} 속성을 사용하세요.</span></div>
</dd>
<dt>{{htmlattrdef("accept-charset")}}</dt>
<dd>스페이스로 구분한, 서버가 허용하는 문자 인코딩의 목록. 브라우저는 목록을 순서대로 사용합니다. 기본값은 <a href="/ko/docs/Web/HTTP/Headers/Content-Encoding">페이지 인코딩</a>과 같습니다.</dd>
<dt>{{htmlattrdef("action")}}</dt>
<dd>양식 데이터를 처리할 프로그램의 {{glossary("URI")}}. {{HTMLElement("button")}}, <code><a href="/ko/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code>, <code><a href="/ko/docs/Web/HTML/Element/input/image"><input type="image"></a></code> 요소의 {{htmlattrxref("formaction", "button")}} 특성으로 재정의할 수 있습니다.</dd>
<dt>{{htmlattrdef("autocapitalize")}} {{non-standard_inline}}</dt>
<dd>양식 요소 내에서 영문을 입력할 때 자동으로 대문자 변환하는 방식. iOS Safari에서만 사용하는 비표준 특성입니다. 각 요소의 <code>autocapitalize</code> 특성이 <code><form></code>에 정의된 값을 재정의합니다.
<ul>
<li><code>none</code>: 자동 대문자 입력을 비활성화합니다.</li>
<li><code>sentences</code>: 문장의 첫 글자를 대문자로 변환합니다. 기본값.</li>
<li><code>words</code>: 각 단어의 첫 글자를 대문자로 변환합니다.</li>
<li><code>characters</code>: 모든 글자를 대문자로 변환합니다.</li>
</ul>
</dd>
<dt>{{htmlattrdef("autocomplete")}}</dt>
<dd>입력 요소가 자동완성된 값을 기본값으로 가질 수 있는지 나타냅니다. 각 요소의 <code>autocomplete</code> 특성이 <code><form></code>에 정의된 값을 재정의합니다.
<ul>
<li><code>off</code>: 브라우저가 각 항목에 자동으로 값을 채워 넣지 않습니다. (로그인 양식으로 의심되는 경우 보통 무시합니다)</li>
<li><code>on</code>: 사용자의 과거 입력값에 기반하여 브라우저가 자동으로 값을 채워 넣습니다.</li>
</ul>
</dd>
<dt>{{htmlattrdef("enctype")}}</dt>
<dd><code>method</code> 특성이 <code>post</code>인 경우, <code>enctype</code>은 양식 제출 시 데이터의 <a href="https://ko.wikipedia.org/wiki/%EB%AF%B8%EB%94%94%EC%96%B4_%ED%83%80%EC%9E%85">MIME 유형</a>을 나타냅니다.
<ul>
<li><code>application/x-www-form-urlencoded</code>: 기본값.</li>
<li><code>multipart/form-data</code>: <code><input type="file"></code>이 존재하는 경우 사용하세요.</li>
<li><code>text/plain</code>: HTML 5에서 디버깅 용으로 추가된 값.</li>
</ul>
<p>{{HTMLElement("button")}}, <code><a href="/ko/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code>, <code><a href="/ko/docs/Web/HTML/Element/input/image"><input type="image"></a></code> 요소의 {{htmlattrxref("formenctype", "button")}} 특성으로 재정의할 수 있습니다.</p>
</dd>
<dt>{{htmlattrdef("method")}}</dt>
<dd>양식을 제출할 때 사용할 <a href="/ko/docs/Web/HTTP" title="http://www.w3.org/Protocols/rfc2616/rfc2616.html">HTTP</a> 메서드.
<ul>
<li><code>post</code>: <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5">POST 메서드</a>. 양식 데이터를 <a href="/ko/docs/Web/API/Body">요청 본문</a>으로 전송합니다.</li>
<li><code>get</code>: <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3">GET 메서드</a>. 양식 데이터를 <code>action</code> URL과 <code>?</code> 구분자 뒤에 이어 붙여서 전송합니다.</li>
<li>dialog: 양식이 {{htmlelement("dialog")}} 안에 위치한 경우, 제출과 함께 대화 상자를 닫습니다.</li>
</ul>
<p>{{HTMLElement("button")}}, <code><a href="/ko/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code>, <code><a href="/ko/docs/Web/HTML/Element/input/image"><input type="image"></a></code> 요소의 {{htmlattrxref("formmethod", "button")}} 특성으로 재정의할 수 있습니다.</p>
</dd>
<dt>{{htmlattrdef("name")}} {{deprecated_inline}}</dt>
<dd>양식의 이름. HTML 4부터 사용 중단됐습니다. {{htmlattrxref("id")}}를 사용하세요.</dd>
<dt>{{htmlattrdef("novalidate")}}</dt>
<dd>지정한 경우 양식의 유효성 검증을 건너뜁니다. <code>novalidate</code> 특성을 지정하지 않은(양식의 검증을 수행하는) 경우에도 {{HTMLElement("button")}}, <code><a href="/ko/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code>, <code><a href="/ko/docs/Web/HTML/Element/input/image"><input type="image"></a></code> 요소의 {{htmlattrxref("formnovalidate", "button")}} 특성으로 재정의할 수 있습니다.</dd>
<dt>{{htmlattrdef("target")}}</dt>
<dd>양식 제출의 결과를 표시할 위치를 나타내는 표준 키워드 혹은 사용자 지정 이름. 가능한 값은 {{glossary("browsing context", "브라우징 맥락")}}(탭, 창, {{htmlelement("iframe")}})의 이름 또는 키워드입니다. 지정한 경우, 버튼의 양식 소유자가 가진 {{htmlattrxref("target","form")}} 특성보다 우선합니다. 다음 키워드는 특별한 뜻을 가지고 있습니다.
<ul>
<li><code>_self</code>: 응답을 현재 브라우징 맥락에 표시합니다. 기본값.</li>
<li><code>_blank</code>: 응답을 새로운 브라우징 맥락에 표시합니다. 보통 새 탭이지만, 사용자가 브라우저 설정을 통해 새 창으로 바꿀 수 있습니다.</li>
<li><code>_parent</code>: 응답을 현재 브라우징 맥락의 부모에 표시합니다. 부모가 존재하지 않으면 <code>_self</code>와 동일하게 행동합니다.</li>
<li><code>_top</code>: 응답을 최상단 브라우징 맥락(현재 맥락의 부모면서 자신의 부모가 존재하지 않는, 제일 높은 맥락)에 표시합니다. 부모가 존재하지 않으면 <code>_self</code>와 동일하게 행동합니다.</li>
</ul>
<p>{{HTMLElement("button")}}, <code><a href="/ko/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code>, <code><a href="/ko/docs/Web/HTML/Element/input/image"><input type="image"></a></code> 요소의 {{htmlattrxref("formtarget", "button")}} 특성으로 재정의할 수 있습니다.</p>
</dd>
</dl>
<h2 id="예제">예제</h2>
<pre class="brush: html"><!-- Form which will send a GET request to the current URL -->
<form>
<label>Name:
<input name="submitted-name" autocomplete="name">
</label>
<button>Save</button>
</form>
<!-- Form which will send a POST request to the current URL -->
<form method="post">
<label>Name:
<input name="submitted-name" autocomplete="name">
</label>
<button>Save</button>
</form>
<!-- Form with fieldset, legend, and label -->
<form method="post">
<fieldset>
<legend>Title</legend>
<label><input type="radio" name="radio"> Select me</label>
</fieldset>
</form>
</pre>
<p>{{ EmbedLiveSample('예제', '100%', 110) }}</p>
<h2 id="명세">명세</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-form-element', '<form>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-form-element', '<form>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.3', '<form>')}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("html.elements.form")}}</p>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li><label><a href="/ko/docs/Web/Guide/HTML/Forms" title="/en-US/docs/Web/Guide/HTML/Forms">HTML 양식 안내서</a></label></li>
</ul>
|