HTML 폼 가이드
==========

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

항목
--

1. 나의 첫 HTML 폼
2. HTML 폼 구성 방법 (en-US)
3. 기본 폼 위젯 (en-US)
4. CSS와 HTML 폼
    1. HTML 폼 스타일 (en-US)
    2. HTML 폼을 위한 고급 스타일 (en-US)
    3. 폼 위젯을 위한 호환성 테이블 속성 (en-US)
5. 데이터 주고 받기 (en-US)
6. 데이터 유효성 검사 (en-US)
7. 사용자 폼 위젯 만드는 방법 (en-US)
8. JavaScript를 통해서 폼 전달 하기 (en-US)
    1. FormData 객체 사용 (en-US)
9. 기존 브라우저에서 HTML 폼 (en-US)
HTML 문서
-------

### HTML 요소

| 요소 | 관련 DOM 인터페이스 | 설명 |
| --- | --- | --- |
| `<button>` | `HTMLButtonElement` (en-US) | `button 요소는 클릭할 수 있는 버튼을 나타낸다.` |
| `<datalist>` | `HTMLDataListElement` (en-US) | datalist 요소는 다른 폼 요소의 값에 대한 가능한 옵션들을 나타내는 `<option>` 요소의 집합을 포함합니다. |
| `<fieldset>` | `HTMLFieldSetElement` (en-US) | fieldset 요소는 폼 안에 여러 폼 요소들을 그룹화 하는데 사용됩니다. |
| `<form>` | `HTMLFormElement` (en-US) | `form` 요소는 사용자가 정보를 웹서버로 전송하도록 상호작용하는 요소를 포함하는 문서의 부분으로 나타냅니다. |
| `<input>` (en-US) | `HTMLInputElement` (en-US) | `input 요소는` 대화형 컨트롤 폼들을 생성하는데 사용됩니다. |
| `<label>` | `HTMLLabelElement` (en-US) | `label` 요소는 사용자 인터페이스 항목에 대한 캡션을 나타냅니다. |
| `<legend>` | `HTMLLegendElement` (en-US) | `legend` 요소는 상위 요소인 `<fieldset>` 컨텐츠를 위한 캡션을 나타냅니다. |
| `<meter>` | `HTMLMeterElement` (en-US) | `meter` 요소는 알려진 범위 안에 정해 저 있는 스칼라 값이나 소수 값 주 하나를 나타냅니다. |
| `<optgroup>` | `HTMLOptGroupElement` (en-US) | `optgroup` 요소는 `<select>` (en-US) 요소 안에 있는 옵션 그룹을 생성합니다. |
| `<option>` | `HTMLOptionElement` (en-US) | HTML `option` 요소는 `<select>` (en-US), `<optgroup>` 또는 `<datalist>`요소 안에 항목을 나타내는 컨트롤을 생성하는데 사용됩니다. |
| `<output>` | `HTMLOutputElement` (en-US) | `output` 요소는 계산 결과를 나타냅니다. |
| `<progress>` | `HTMLProgressElement` (en-US) | `progress` 요소는 작업 완료 진행 상태를 나타내는데 사용됩니다. |
| `<select>` (en-US) | `HTMLSelectElement` (en-US) | `select` 요소는 옵션 메뉴를 제공하는 컨트롤을 나타냅니다. |
| `<textarea>` (en-US) | `HTMLTextAreaElement` (en-US) | `textarea` 요소는 다중 라인 일반 텍스트 편집 컨트롤을 나타냅니다. |

**참고:** 모든 폼 요소들이나 모든 HTML요소들은 `HTMLElement` 돔 인터페이스를 지원합니다.

### HTML 속성

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

### Normative reference

* W3C HTML5 Specification (Forms)
* WHATWG HTML Living Standard (Forms)