path: root/files/ko/learn/html/forms/index.html

---
title: HTML 폼 가이드
slug: Learn/HTML/Forms
translation_of: Learn/Forms
---
<p><span class="seoSummary">이 가이드는 HTML 폼을 숙달 시키는데 도움이 되는 문서입니다.</span> HTML 폼은 사용자와 상호작용할 수 있는 매우 강력한 도구입니다. 그러나 역사적으로 나 기술적인 이유로 사용자에게 항상 명확하게 기능을 제공할 수 있는 것은 아닙니다. 이 가이드에서 HTML 폼 관점에서 스타일 구조, 사용자 위젯으로 데이터 다루기 등 모든 것을 다룰 것입니다. 이러한 강력한 기술들을 즐기길 바랍니다!</p>

<h2 id="항목" style="line-height: 30px; font-size: 2.14285714285714rem;">항목</h2>

<ol>
 <li><a href="https://developer.mozilla.org/ko/docs/Web/Guide/HTML/%ED%8F%BC/My_first_HTML_form">나의 첫 HTML 폼</a></li>
 <li><a href="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form" title="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form">HTML HTML 폼 구성 방법</a></li>
 <li><a href="/en-US/docs/HTML/Forms/The_native_form_widgets" title="/en-US/docs/HTML/Forms/The_native_form_widgets">기본 폼 위젯</a></li>
 <li>CSS와 HTML 폼
  <ol>
   <li><a href="/en-US/docs/HTML/Forms/Styling_HTML_forms" title="/en-US/docs/HTML/Forms/Styling_HTML_forms">HTML 폼 스타일</a></li>
   <li><a href="/en-US/docs/Web/Guide/HTML/Forms/Advanced_styling_for_HTML_forms" title="/en-US/docs/Advanced_styling_for_HTML_forms">HTML 폼을 위한 고급 스타일</a></li>
   <li><a href="/en-US/docs/Property_compatibility_table_for_form_widgets" title="/en-US/docs/Property_compatibility_table_for_form_widgets">폼 위젯을 위한 호환성 테이블 속성</a></li>
  </ol>
 </li>
 <li><a href="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data">데이터 주고 받기</a></li>
 <li><a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">데이터 유효성 검사</a></li>
 <li><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">사용자 폼 위젯 만드는 방법</a></li>
 <li><a href="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript" title="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript">자바스크립트를 통해서 폼 전달 하기</a>
  <ol>
   <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects">FormData 객체 사용</a></li>
  </ol>
 </li>
 <li><a href="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers" title="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers">기존 브라우저에서 HTML 폼</a></li>
</ol>

<h2 id="HTML_문서" style="line-height: 30px; font-size: 2.14285714285714rem;">HTML 문서</h2>

<h3 id="HTML_요소" style="line-height: 24px; font-size: 1.71428571428571rem;">HTML 요소</h3>

<table>
 <thead>
  <tr>
   <th scope="col">요소</th>
   <th scope="col">관련 DOM 인터페이스</th>
   <th scope="col">설명</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td style="vertical-align: top;">{{HTMLElement("button")}}</td>
   <td style="vertical-align: top;">{{domxref("HTMLButtonElement")}}</td>
   <td style="vertical-align: top;"><code>button 요소는 클릭할 수 있는 버튼을 나타낸다.</code></td>
  </tr>
  <tr>
   <td style="vertical-align: top;">{{HTMLElement("datalist")}}</td>
   <td style="vertical-align: top;">{{domxref("HTMLDataListElement")}}</td>
   <td style="vertical-align: top;"><span style="font-family: 'Courier New';">datalist</span> 요소는 다른 폼 요소의 값에 대한 가능한 옵션들을 나타내는 {{ HTMLElement("option") }} 요소의 집합을 포함합니다. </td>
  </tr>
  <tr>
   <td style="vertical-align: top;">{{HTMLElement("fieldset")}}</td>
   <td style="vertical-align: top;">{{domxref("HTMLFieldSetElement")}}</td>
   <td style="vertical-align: top;"><span style="font-family: 'Courier New';">fieldset 요소는</span> 폼 안에 여러 폼 요소들을 그룹화 하는데 사용됩니다.</td>
  </tr>
  <tr>
   <td style="vertical-align: top;">{{HTMLElement("form")}}</td>
   <td style="vertical-align: top;">{{domxref("HTMLFormElement")}}</td>
   <td style="vertical-align: top;"><code>form</code>  요소는 사용자가 정보를 웹서버로 전송하도록 상호작용하는 요소를 포함하는 문서의 부분으로 나타냅니다.</td>
  </tr>
  <tr>
   <td style="vertical-align: top;">{{HTMLElement("input")}}</td>
   <td style="vertical-align: top;">{{domxref("HTMLInputElement")}}</td>
   <td style="vertical-align: top;"><code>input 요소는</code> 대화형 컨트롤 폼들을 생성하는데 사용됩니다.</td>
  </tr>
  <tr>
   <td style="vertical-align: top;">{{HTMLElement("keygen")}}</td>
   <td style="vertical-align: top;">{{domxref("HTMLKeygenElement")}}</td>
   <td style="vertical-align: top;"><code>keygen</code> 요소는 HTML 폼 요소의 일부로서 쉽게 키 데이터를 발생시키고 공개키를 전송을 위해서 존재 합니다.</td>
  </tr>
  <tr>
   <td style="vertical-align: top;">{{HTMLElement("label")}}</td>
   <td style="vertical-align: top;">{{domxref("HTMLLabelElement")}}</td>
   <td style="vertical-align: top;"><code>label</code> 요소는 사용자 인터페이스 항목에 대한 캡션을 나타냅니다.</td>
  </tr>
  <tr>
   <td style="vertical-align: top;">{{HTMLElement("legend")}}</td>
   <td style="vertical-align: top;">{{domxref("HTMLLegendElement")}}</td>
   <td style="vertical-align: top;"><code>legend</code> 요소는 상위 요소인 {{ HTMLElement("fieldset") }} 컨텐츠를 위한 캡션을 나타냅니다.</td>
  </tr>
  <tr>
   <td style="vertical-align: top;">{{HTMLElement("meter")}}</td>
   <td style="vertical-align: top;">{{domxref("HTMLMeterElement")}}</td>
   <td style="vertical-align: top;"><code>meter </code>요소는 알려진 범위 안에 정해 저 있는 스칼라 값이나 소수 값 주 하나를 나타냅니다.</td>
  </tr>
  <tr>
   <td style="vertical-align: top;">{{HTMLElement("optgroup")}}</td>
   <td style="vertical-align: top;">{{domxref("HTMLOptGroupElement")}}</td>
   <td style="vertical-align: top;"><code>optgroup</code> 요소는 {{ HTMLElement("select") }} 요소 안에 있는 옵션 그룹을 생성합니다.</td>
  </tr>
  <tr>
   <td style="vertical-align: top;">{{HTMLElement("option")}}</td>
   <td style="vertical-align: top;">{{domxref("HTMLOptionElement")}}</td>
   <td style="vertical-align: top;">HTML<em> </em><code>option<em> </em></code>요소는 {{ HTMLElement("select") }}, {{ HTMLElement("optgroup") }} 또는 {{ HTMLElement("datalist") }}요소 안에 항목을 나타내는 컨트롤을 생성하는데 사용됩니다.</td>
  </tr>
  <tr>
   <td style="vertical-align: top;">{{HTMLElement("output")}}</td>
   <td style="vertical-align: top;">{{domxref("HTMLOutputElement")}}</td>
   <td style="vertical-align: top;"><code>output </code>요소는 계산 결과를 나타냅니다.</td>
  </tr>
  <tr>
   <td style="vertical-align: top;">{{HTMLElement("progress")}}</td>
   <td style="vertical-align: top;">{{domxref("HTMLProgressElement")}}</td>
   <td style="vertical-align: top;"><code>progress</code> 요소는 작업 완료 진행 상태를 나타내는데 사용됩니다.</td>
  </tr>
  <tr>
   <td style="vertical-align: top;">{{HTMLElement("select")}}</td>
   <td style="vertical-align: top;">{{domxref("HTMLSelectElement")}}</td>
   <td style="vertical-align: top;"><code>select</code> 요소는 옵션 메뉴를 제공하는 컨트롤을 나타냅니다.</td>
  </tr>
  <tr>
   <td style="vertical-align: top;">{{HTMLElement("textarea")}}</td>
   <td style="vertical-align: top;">{{domxref("HTMLTextAreaElement")}}</td>
   <td style="vertical-align: top;"><code>textarea</code> 요소는 다중 라인 일반 텍스트 편집 컨트롤을 나타냅니다.</td>
  </tr>
 </tbody>
</table>

<div class="note">
<p><strong>Note:</strong> 모든 폼 요소들이나 모든 HTML요소들은 {{domxref("HTMLElement")}} 돔 인터페이스를 지원합니다.</p>
</div>

<h3 id="HTML_속성" style="line-height: 24px; font-size: 1.71428571428571rem;">HTML 속성</h3>

<table class="standard-table">
 <thead>
  <tr>
   <th>속성 이름</th>
   <th>요소</th>
   <th>설명</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>accept</td>
   <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td>
   <td>서버가 받는 형식 목록, 일반적으로 file 형식을 사용합니다.</td>
  </tr>
  <tr>
   <td style="white-space: nowrap;">accept-charset</td>
   <td>{{ HTMLElement("form") }}</td>
   <td>지원하는 문자 집합 목록</td>
  </tr>
  <tr>
   <td>action</td>
   <td>{{ HTMLElement("form") }}</td>
   <td>폼을 통해서 전송 정보를 처리하는 프로그램의 URL </td>
  </tr>
  <tr>
   <td>autocomplete</td>
   <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td>
   <td>폼 안에서 브라우저로 부터 자동으로 완성되는 기본 값을 가진 컨트롤 인지 아닌지 나타냅니다.</td>
  </tr>
  <tr>
   <td>autofocus</td>
   <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
   <td>페이지가 로드된 후 요소가 자동으로 포커스 해야 되는지 설정합니다.</td>
  </tr>
 </tbody>
 <tbody>
  <tr>
   <td>challenge</td>
   <td>{{ HTMLElement("keygen") }}</td>
   <td>공개 키(public key)와 함께 전송되는 문자열입니다.</td>
  </tr>
  <tr>
   <td>checked</td>
   <td>{{ HTMLElement("input") }}</td>
   <td>
    <p>해당 요소가 페이지가 로드될 때 체크된 상태로 나타나도록 설정합니다. </p>
   </td>
  </tr>
  <tr>
   <td>cols</td>
   <td>{{ HTMLElement("textarea") }}</td>
   <td>
    <p>textarea의 세로줄 수를 설정합니다.</p>
   </td>
  </tr>
  <tr>
   <td>data</td>
   <td>{{ HTMLElement("object") }}</td>
   <td>자원의 URL을 명시합니다.</td>
  </tr>
  <tr>
   <td>dirname</td>
   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
   <td></td>
  </tr>
  <tr>
   <td>disabled</td>
   <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
   <td>사용자가 요소와 상호 작용할 수 있는 지 나타냅니다.</td>
  </tr>
  <tr>
   <td>enctype</td>
   <td>{{ HTMLElement("form") }}</td>
   <td>POST방식으로 전송되는 데이터의 타입을 설정합니다.</td>
  </tr>
  <tr>
   <td>for</td>
   <td>{{ HTMLElement("label") }}, {{ HTMLElement("output") }}</td>
   <td>Describes elements which belongs to this one.</td>
  </tr>
  <tr>
   <td>form</td>
   <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
   <td>
    <p>요소의 소유자인 폼을 나타냅니다.</p>
   </td>
  </tr>
 </tbody>
 <tbody>
  <tr>
   <td>high</td>
   <td>{{ HTMLElement("meter") }}</td>
   <td>Indicates the lower bound of the upper range.</td>
  </tr>
  <tr>
   <td>keytype</td>
   <td>{{ HTMLElement("keygen") }}</td>
   <td>Specifies the type of key generated.</td>
  </tr>
  <tr>
   <td>list</td>
   <td>{{ HTMLElement("input") }}</td>
   <td>Identifies a list of pre-defined options to suggest to the user.</td>
  </tr>
  <tr>
   <td>low</td>
   <td>{{ HTMLElement("meter") }}</td>
   <td>Indicates the upper bound of the lower range.</td>
  </tr>
  <tr>
   <td>max</td>
   <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td>
   <td>허용되는 최댓값을 나타냅니다.</td>
  </tr>
  <tr>
   <td>maxlength</td>
   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
   <td>요소에서 허용되는 특징의 최대 수를 명시합니다.</td>
  </tr>
  <tr>
   <td>method</td>
   <td>{{ HTMLElement("form") }}</td>
   <td>Defines which HTTP method to use when submitting the form. Can be GET (default) or POST.</td>
  </tr>
  <tr>
   <td>min</td>
   <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}</td>
   <td>허용되는 최솟값을 나타냅니다.</td>
  </tr>
  <tr>
   <td>multiple</td>
   <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td>
   <td>Indicates whether multiple values can be entered in an input of the type <code>email</code> or <code>file</code>.</td>
  </tr>
  <tr>
   <td>name</td>
   <td>{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
   <td>
    <p>요소의 이름. For example used by the server to identify the fields in form submits.</p>
   </td>
  </tr>
  <tr>
   <td>novalidate</td>
   <td>{{ HTMLElement("form") }}</td>
   <td>This attribute indicates that the form shouldn't be validated when submitted.</td>
  </tr>
  <tr>
   <td>optimum</td>
   <td>{{ HTMLElement("meter") }}</td>
   <td>Indicates the optimal numeric value.</td>
  </tr>
  <tr>
   <td>pattern</td>
   <td>{{ HTMLElement("input") }}</td>
   <td>Defines a regular expression which the element's value will be validated against.</td>
  </tr>
  <tr>
   <td>placeholder</td>
   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
   <td>Provides a hint to the user of what can be entered in the field.</td>
  </tr>
  <tr>
   <td>readonly</td>
   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
   <td>Indicates whether the element can be edited.</td>
  </tr>
  <tr>
   <td>required</td>
   <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
   <td>Indicates whether this element is required to fill out or not.</td>
  </tr>
  <tr>
   <td>rows</td>
   <td>{{ HTMLElement("textarea") }}</td>
   <td>Defines the number of rows in a textarea.</td>
  </tr>
  <tr>
   <td>selected</td>
   <td>{{ HTMLElement("option") }}</td>
   <td>Defines a value which will be selected on page load.</td>
  </tr>
  <tr>
   <td>size</td>
   <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td>
   <td>Defines the width of the element (in pixels). If the element's <code>type</code> attribute is <code>text</code> or <code>password</code> then it's the number of characters.</td>
  </tr>
  <tr>
   <td>src</td>
   <td>{{ HTMLElement("input") }}</td>
   <td>The URL of the embeddable content.</td>
  </tr>
  <tr>
   <td>step</td>
   <td>{{ HTMLElement("input") }}</td>
   <td></td>
  </tr>
  <tr>
   <td>target</td>
   <td>{{ HTMLElement("form") }}</td>
   <td></td>
  </tr>
  <tr>
   <td>type</td>
   <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}</td>
   <td>Defines the type of the element.</td>
  </tr>
  <tr>
   <td>usemap</td>
   <td>{{ HTMLElement("input") }}</td>
   <td></td>
  </tr>
  <tr>
   <td>value</td>
   <td>{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td>
   <td>Defines a default value which will be displayed in the element on page load.</td>
  </tr>
  <tr>
   <td>wrap</td>
   <td>{{ HTMLElement("textarea") }}</td>
   <td>Indicates whether the text should be wrapped.</td>
  </tr>
 </tbody>
</table>

<h3 id="Normative_reference" style="line-height: 24px; font-size: 1.71428571428571rem;">Normative reference</h3>

<ul>
 <li><a href="http://www.w3.org/TR/html5/forms.html" lang="en" rel="external" title="http://www.w3.org/TR/html5/forms.html">W3C HTML5 Specification (Forms)</a></li>
 <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#forms" rel="external" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#forms">WHATWG HTML Living Standard (Forms)</a></li>
</ul>