path: root/files/ko/web/html/element/form/index.html

---
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>&lt;form&gt;</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>&lt;form&gt;</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>&lt;form&gt;</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">&lt;input type="submit"&gt;</a></code>, <code><a href="/ko/docs/Web/HTML/Element/input/image">&lt;input type="image"&gt;</a></code> 요소의 {{htmlattrxref("formaction", "button")}} 특성으로 재정의할 수 있습니다.</dd>
 <dt>{{htmlattrdef("autocapitalize")}} {{non-standard_inline}}</dt>
 <dd>양식 요소 내에서 영문을 입력할 때 자동으로 대문자 변환하는 방식. iOS Safari에서만 사용하는 비표준 특성입니다. 각 요소의 <code>autocapitalize</code> 특성이 <code>&lt;form&gt;</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>&lt;form&gt;</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>&lt;input type="file"&gt;</code>이 존재하는 경우 사용하세요.</li>
  <li><code>text/plain</code>: HTML 5에서 디버깅 용으로 추가된 값.</li>
 </ul>

 <p>{{HTMLElement("button")}}, <code><a href="/ko/docs/Web/HTML/Element/input/submit">&lt;input type="submit"&gt;</a></code>, <code><a href="/ko/docs/Web/HTML/Element/input/image">&lt;input type="image"&gt;</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">&lt;input type="submit"&gt;</a></code>, <code><a href="/ko/docs/Web/HTML/Element/input/image">&lt;input type="image"&gt;</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">&lt;input type="submit"&gt;</a></code>, <code><a href="/ko/docs/Web/HTML/Element/input/image">&lt;input type="image"&gt;</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">&lt;input type="submit"&gt;</a></code>, <code><a href="/ko/docs/Web/HTML/Element/input/image">&lt;input type="image"&gt;</a></code> 요소의 {{htmlattrxref("formtarget", "button")}} 특성으로 재정의할 수 있습니다.</p>
 </dd>
</dl>

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

<pre class="brush: html">&lt;!-- Form which will send a GET request to the current URL --&gt;
&lt;form&gt;
  &lt;label&gt;Name:
    &lt;input name="submitted-name" autocomplete="name"&gt;
  &lt;/label&gt;
  &lt;button&gt;Save&lt;/button&gt;
&lt;/form&gt;

&lt;!-- Form which will send a POST request to the current URL --&gt;
&lt;form method="post"&gt;
  &lt;label&gt;Name:
    &lt;input name="submitted-name" autocomplete="name"&gt;
  &lt;/label&gt;
  &lt;button&gt;Save&lt;/button&gt;
&lt;/form&gt;

&lt;!-- Form with fieldset, legend, and label --&gt;
&lt;form method="post"&gt;
  &lt;fieldset&gt;
    &lt;legend&gt;Title&lt;/legend&gt;
    &lt;label&gt;&lt;input type="radio" name="radio"&gt; Select me&lt;/label&gt;
  &lt;/fieldset&gt;
&lt;/form&gt;
</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', '&lt;form&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-form-element', '&lt;form&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.3', '&lt;form&gt;')}}</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>