# 웹 폼


* button : 클릭할 수 있는 버튼입니다. 버튼은 양식 내부는 물론 간단한 표준 버튼 기능이 필요한 곳이라면 문서 어디에나 배치할 수 있습니다.
  * autofocus
  * disabled
  * form : 요소가 속한 form을 나타냅니다.
  * name, value
  * type : submit | reset | button
* input : 사용자 입력 폼입니다.
  * accept : 파일 형식을 지정합니다. file 형식에만 적용할 수 있습니다.
  * autocomplete : 웹 브라우저의 자동 완성 기능을 사용하는지 여부를 나타냅니다.
  * autofocus
  * checked : radio, chcekbox에만 적용할 수 있습니다.
  * dirname
  * disabled
  * form
  * list : 사전 정의된 옵션 목록입니다. ```<datalist>```와 연결합니다.
  * min, max, step : number 타입에만 적용할 수 있습니다. 실수의 경우 ```step="0.1"``` 또는 ```step="any"``` 등으로 지정할 수 있습니다.
  * maxlength, minlength
  * multiple : email, file에만 적용할 수 있습니다. 여러 항목을 입력받을 때 사용합니다.
  * name, value
  * pattern
  * placeholder
  * readonly
  * required
  * size
  * src
  * type
    * button | reset | submit | image
    * checkbox | radio
    * text | password | search | url | email | tel
    * number | range
    * datetime-local | month | date | time | week 
    * color | file
    * hidden
  * usemap
* textarea : 여러 줄 텍스트 편집기입니다.
  * autofocus
  * cols, rows
  * dirname
  * disabled
  * form
  * maxlength
  * name, value
  * placeholder
  * readonly
  * required
  * wrap : soft | hard | wrap
* select : 사용자가 선택할 수 있는 옵션 메뉴입니다.
  * autofocus
  * disabled
  * form
  * multiple
  * name
  * required
  * size
* option : select, optgroup, datalist 요소와 함께 사용됩니다.
  * disabled
  * selected
  * value
* optgroup : select 요소 내의 option 요소들을 그룹화합니다.
  * disabled
  * datalist

```html
<select name="pets" id="pet-select">
    <option value="">--Please choose an option--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
</select>

<select id="dino-select">
    <optgroup label="Theropods">
        <option>Tyrannosaurus</option>
        <option>Velociraptor</option>
        <option>Deinonychus</option>
    </optgroup>
    <optgroup label="Sauropods">
        <option>Diplodocus</option>
        <option>Saltasaurus</option>
        <option>Apatosaurus</option>
    </optgroup>
</select>
```

* label : 입력 폼에 대한 라벨입니다.
  * for
  * form

```html
<label for="name">Name:</label> <input type="text" id="name" name="user_name">

<label for="name">
  Name: <input type="text" id="name" name="user_name">
</label>
```

* datalist : option과 함께 사용됩니다.
* form : 사용자의 데이터를 서버로 전송하는 상호작용 부분을 나타냅니다.
  * accept
  * accept-charset
  * action
  * autocomplete : on | off
  * enctype : POST 전송 데이터의 타입을 지정합니다. application/x-www-form-urlencoded | multipart/form-data | text/plain
  * method : post | get
  * name
  * novalidate
  * target
* fieldset : 폼 안에서 여러 폼 요소들을 그룹화할 때 사용됩니다.
  * disabled
  * form
  * name
* legend : fieldset 요소를 위한 라벨입니다.


```html
<form action="/my-handling-form-page" method="post">
 <ul>
  <li>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name">
  </li>
  <li>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_email">
  </li>
  <li>
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </li>
 </ul>
</form>
```

```html
<form>
  <fieldset>
    <legend>Fruit juice size</legend>
    <p>
      <input type="radio" name="size" id="size_1" value="small">
      <label for="size_1">Small</label>
    </p>
    <p>
      <input type="radio" name="size" id="size_2" value="medium">
      <label for="size_2">Medium</label>
    </p>
    <p>
      <input type="radio" name="size" id="size_3" value="large">
      <label for="size_3">Large</label>
    </p>
  </fieldset>
</form>
```


* meter : 알려진 범위 내의 값을 나타냅니다.
  * form
  * high, low
  * min, max
  * optimum
  * value
* output : 계산 결과를 나타냅니다.
  * for
  * form
  * name, value

```html
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="range" id="b" name="b" value="50" /> +
  <input type="number" id="a" name="a" value="10" /> =
  <output name="result" for="a b">60</output>
</form>
```

* progress : 작업 진행 상태를 나타냅니다.
  * form
  * max
  * value