> For the complete documentation index, see [llms.txt](https://dahye-jeong.gitbook.io/til/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dahye-jeong.gitbook.io/til/html-and-css/2017-03-20-html-form.md).

# HTML 폼 관련 태그들

### 폼만들기

* 폼 동작 방식

  ![](https://simfatic.com/forms/help/v40/form-working.jpg)
* `form`태그 : 폼만들기(form 태그는 자식요소로 form태그가 올 수 없다.)

  ```
  <form [속성="속성 값"]>여러 폼 요소 </form>
  ```

| 속성           | 설명                                                 | 속성값                                                                                                                                          |
| ------------ | -------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| method       | 사용자가 입력한 내용들을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정              | <p><code>get</code> : 주소 표시줄에 사용자가 입력한 내용이 그대로 드러남 <br> <code>post</code>: 사용자의 입력을 표준입력으로 넘겨줘 입력내용의 길이에 제한을 받지않고 사용자가 입력한 내용이 드러나지 않는다.</p> |
| name         | 폼의 이름을 지정 (한 문서 안에 여러 개의 `<form>`있을 경우 구분하기 위해 사용) |                                                                                                                                              |
| action       | 전송한 정보를 처리할 웹페이지 URL                               |                                                                                                                                              |
| target       | `<action>`태그에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열리도록 함 | `_self`, `_blank`                                                                                                                            |
| autocomplete | 자동 완성 기능                                           | `on`, `off`                                                                                                                                  |
| novalidate   | 서버로 전송시 양식 데이터의 유효성을 검사하지 않도록 지정                   |                                                                                                                                              |

* `label` : 폼 요소에 레이블 붙이기

  ```
  <label [속성="속성 값"]>레이블<input ....></label>
  <label for="id이름">레이블</label>
  <input id="id이름" [속성="속성 값"]>
  ```

라디오 버튼과 체크박스에서 `label`태그를 사용하면 텍스트만 클릭해도 선택이된다. 즉, 텍스트 영역까지 클릭 범위가 확장된다.

* `<fieldset>`, `<legend>` : 폼 요소 그룹으로 묶기

`<fieldset>`은 폼들을 하나의 영역으로 묶어 외곽선을 그려주고, `<legend>`는 `<fieldset>` 태그로 묶은 그룹에 제목을 붙인다.

```
<fieldset>
    <legend>로그인 정보</legend>
    <ul>
        <li>
            <label for="id">아이디</label>
            <input type="text" id="id">
        </li>
        <li>
            <label for="pwd">비밀번호</label>
            <input type="text" id="pwd">
        </li>
    </ul>
<fieldset>
```

### 사용자 입력을 위한 `<input>` 태그

`<input>`태그 안의 `type`속성을 이용해 로그인 버튼, 텍스트, 비밀번호 등등 을 구분한다.

* type 속성

|        속성        | 설명                         |
| :--------------: | -------------------------- |
|     `hidden`     | 사용자에게는 보이지 않는, 서버로 넘겨지는 값  |
|      `text`      | 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자 |
|     `search`     | 검색 상자                      |
|       `tel`      | 전화번호 입력 필드                 |
|       `url`      | url 주소를 입력할 수 있는 필드        |
|      `email`     | 메일 주소 입력할 수 있는 필드          |
|    `password`    | 비밀번호 입력할 수 있는 필드           |
|    `datetime`    | 국제표준시(UTC)로 설정된 날짜,시간      |
| `datetime-local` | 사용자가 있는 지역을 기준인 날짜,시간      |
|      `date`      | 사용자 지역을 기준인 날짜(연,월,일)      |
|      `month`     | 사용자 지역 기준인 날짜(연,월)         |
|      `week`      | 사용자 지역 기준인 날짜(연,주)         |
|      `time`      | 사용자 지역 기준인 시간              |
|     `number`     | 숫자 조절 할 수 있는 화살표           |
|      `range`     | 숫자 조절할 수 있는 슬라이드 막대        |
|      `color`     | 색상 표(16진수)                 |
|    `checkbox`    | 2개이상 선택 가능한 체크박스           |
|      `radio`     | 1개만 선택 할 수 있는 라디오 버튼       |
|      `file`      | 파일을 첨부할 수 있는 버튼            |
|     `submit`     | 서버 전송 버튼                   |
|      `image`     | `submit`버튼 대신 사용할 이미지      |
|      `reset`     | 리셋 버튼                      |
|     `button`     | 버튼                         |

[버전별 지원 상황](http://caniuse.com)

* `hidden` : 폼에서는 보이지 않지만 사용자가 입력을 마치고 서버로 전송할 때 함께 전송되는 요소( 사용자에게 보여 줄 필요가 없지만 관리자가 알아야 하는 것)

  ```
  <input type="hidden" name="이름" value="서버로 넘길 값">
  ```
* `text` : 텍스트 필드

|      속성     | 설명                |
| :---------: | ----------------- |
|    `name`   | 구별하기 위한 이름        |
|    `size`   | 텍스트 필드의 길이 지정     |
|   `value`   | 텍스트 필드 부분에 표시될 내용 |
| `maxlength` | 최대 문자 개수          |

* `password` : 비밀번호 입력란(`*` or `∙`표시)
  * value속성이 없다는 것을 제외하면 text필드와 같음.
* `search`, `url`, `email`, `tel` : 분화된 텍스트 필드
  * `url`은 반드시 `http://`로 시작하는 사이트 주소를 입력해야한다.
* `number`,`range` : 숫자 지정(직접입력, 슬라이드막대)

|    속성   | 설명                                            |
| :-----: | --------------------------------------------- |
|  `min`  | 필드에 입력할 수 있는 최소값(default=0)                   |
|  `max`  | 필드에 입력할 수 있는 최댓값(default=100)                 |
|  `step` | 짝수나 홀수 등 특정 숫자로 제한하려고 할 때 숫자 간격 지정(default=1) |
| `value` | 필드에 표시할 초기값                                   |

* `radio`, `checkbox`

|     속성    | 설명                                 |
| :-------: | ---------------------------------- |
|   `name`  | 구별하기 위한 이름                         |
| `checked` | 기본으로 선택해 놓을 항목이 있다면!               |
|  `value`  | 선택한 라디오버튼 or 체크박스를 서버에 알려 줄 때 넘길 값 |

* 날짜 or 시간 \[`date`,`month`,`week`,`time`,`datetime`,`datetime-local`]

|    속성   | 설명                                   |
| :-----: | ------------------------------------ |
|  `min`  | 날짜나 시간의 최소값                          |
|  `max`  | 날짜나 시간의 최댓값                          |
|  `step` | 스핀 박스의 화살표 누를 때마다 날짜나 시간 얼마나 조절할지 지정 |
| `value` | 필드에 표시할 초기값                          |

[시간, 날짜에 대한 자세한 표기방법](https://www.w3.org/TR/html51/infrastructure.html#global-date-and-time)

* `button` : 버튼만 넣기 때문에 스크립트 함수 등을 연결해서 사용한다.

  ```
  <input type="button" value="새탭열기" onclick="window.open()">
  ```

### `<input>` 태그의 다양한 속성

* `autofocus` : 입력 커서 표시하기
* `placeholder` : 힌트 표시하기
* `required` : 필수 필드 지정하기

  ```
  <label class="reg" for="uname">이름</label>
  <input type="text" id="uname" autofocus required>
  <input type="text" id="uname" placeholder="이름">
  ```
* `readonly` : 읽기 전용 필드 (true(default) or false)

  ```
  <input type="text" id="uname" value="정다혜" readonly>
  ```
* `size`, `minlength`, `maxlength` : 길이, 최소길이, 최대길이
* 그 외의 값

|        속성        | 설명                                                                            |        type       |   |
| :--------------: | ----------------------------------------------------------------------------- | :---------------: | - |
|   `formaction`   | 실행할 프로그램을 연결.                                                                 | `submit`, `image` |   |
|   `formenctype`  | 서버로 폼을 전송했을 때 폼 데이터를 어떤방식으로 해설할 것인지 지정                                        | `submit`, `image` |   |
|    `formethod`   | 서버로 폼을 전송하는 방식(get, post) 지정, 이미 form 태그 안에서 지정한 방식은 무시                       |                   |   |
| `formnovalidate` | `form`태그 안 `novalidate`속성이 있어 서버로 전송할때 폼 데이터가 유효한지 여부를 표시 할 수 있는데 `input`도 가능 |                   |   |
|   `formtarget`   | 폼 데이터를 서버로 전송한 후 서버의 응답을 어디에 표시할 것인지 다깃을 지정                                   |                   |   |
| `height`,`width` | 이미지의 너비와 높이를 지정                                                               |      `image`      |   |
|      `list`      | 에 미리 정의해 놓은 옵션 값을 안에 나열해 보여준다.                                                |                   |   |
|    `multiple`    | 두 개 이상의 값을 입력합니다.                                                             |      `email`      |   |

### 여러 데이터 나열해 보여 주기

`<select>`,`<optgroup>`, `<option>`태그 : 드롭다운 목록 만들기

* `<select>` 속성

|     속성     | 설명                                                        |
| :--------: | --------------------------------------------------------- |
| `multiple` | 여러 개의 옵션이 함께 표시되면서 `Ctrl`키를 누른 상태로 드롭다운 메뉴에 있는 여러항목 선택 가능 |
|   `size`   | 화면에 표시될 드롭다운 메뉴의 항목 개수를 지정(크롬의 경우 +1개)                    |

* `<option>` 속성

|     속성     | 설명                           |
| :--------: | ---------------------------- |
|   `value`  | 옵션을 선택했을 때 서버로 넘겨질 값 지정      |
| `selected` | 화면에 표시될 때 기본으로 선택되어 있는 옵션 지정 |

* `<optgroup>` : 옵션끼리 묶기

```
<label for="class" class="reg"> 학과 </label>
<select id="class">
    <optgroup label="상경대학">
        <option value="stat" selected> 응용통계학과 </option>
        <option value="econ" > 경제학과 </option>
        <option value="trade" > 국제무역학과 </option>
    </optgroup>
    <optgroup label="그외대학">
        <option value="computer"> 컴퓨터공학과 </option>
        <option value="phy"> 철학과 </option>
        <option value="manage"> 경영학과 </option>
    </optgroup>
</select>
```

* `<datalist>`  : 데이터 목록 중에서 값 선택하기
* `<option>` 속성

|    속성   | 설명                      |
| :-----: | ----------------------- |
| `value` | 옵션을 선택했을 때 서버로 넘겨질 값 지정 |
| `label` | 사용자를 위해 브라우저에 표시할 레이블   |

```
<input type="text" id="interest" list="choices">
<datalist id="choices">
    <option value="grammar" label="문법"></option>
    <option value="voca" label="어휘"></option>
    <option value="speaking" label="회화"></option>
    <option value="listening" label="리스닝"></option>
    <option value="news" label="뉴스청취"></option>
</datalist>
```

* `<textarea>` : 여러 줄 입력하는 텍스트 영역

|   속성   | 설명                              |
| :----: | ------------------------------- |
| `name` | 다른 폼 요소와 구분하기 위해 텍스트 영역의 이름을 지정 |
| `cols` | 텍스트 영역의 가로 너비를 문자 단위로 지정        |
| `rows` | 텍스트 영역의 세로 길이를 줄 단위로 지정         |

```
<textarea name="intro" cols="60" rows="5">
이부분에 글을 쓰면 됩니다.
</textarea>
```

### 기타 다양한 폼 요소들

* `<button>` : 버튼 넣기

```
<button [type="submit | reset | button"]>내용</button>
```

|   속성 값   | 설명                     |
| :------: | ---------------------- |
| `submit` | 폼을 서버로 전송              |
|  `reset` | 폼에 입력한 모든 내용 초기화       |
| `button` | 버튼 형태만 만들 뿐 자체 기능은 없다. |

> `input`태그 에서의 기능과 비슷함. 하지만 `button`태그 에서는 콘텐츠, 아이콘을 포함 할 수 있고, CSS적용이 가능하다.

* `<output>` : 계산 결과

```
<form oninput="result.value=parseInt(num1.value)+parseInt(num2.value)">
    <input type="number" name="num1" value="0">
    +<input type="number" name="num2" value="0">
    =<output name="result" for="num"></output>
</form>
```

> `oninput="result.value=parseInt(num1.value)+parseInt(num2.value)"`은 자바 스크립트 함수가 두 수의 합을 구해주는 것이다. 1. **parseInt(num1.value)** : num1.value는 name이 num1인 필드에 입력된 값이며 parseInt는 그 값을 정수로 바꾸어 주는 함수이다. 2. **result.value** 는 result필드의 값이다. 즉, 폼에 값을 입력하면(oninput) 첫 번째, 두 번째 필드에 입력된 값을 정수로 바꾸어 더해 세반째 필드의 값에 넣는다.

* `<progress>` : 진행 상태 보여주기(작업시작을 0으로 하고, 최종 완료를 최댓값으로 해 얼마나 진척되었는지 숫자로 표현)

|    속성   | 설명                                             |
| :-----: | ---------------------------------------------- |
| `value` | 작업 진행 상태를 나타내며 부동 소수점으로 표현.0이상 max이하           |
|  `max`  | 작업이 완료되려면 얼마나 많은 작업을 해야되는지 부동소수점 표현. 0보다 커야한다. |

* `<meter>` : 값이 차지하는 크기 표시(전체 크기 중 얼마나 차지하는지)

|      속성     | 설명                                                                                     |
| :---------: | -------------------------------------------------------------------------------------- |
|   `value`   | 범위 내에서 차지하는 값                                                                          |
| `max`,`min` | 최대 ,최소 값 ( defult 0과 1 )                                                               |
|    `low`    | 이정도면 낮다고 할 정도의 값 지정                                                                    |
|    `high`   | 이정도면 높다고 할 정도의 값 지정                                                                    |
|  `optimum`  | 이정도면 적당하다고 할 정도의 범위 지정(optimum이 high보다 크면 value가 클 수 록 좋고, low보다 작으면 value가 작을 수록 좋다.) |

## 참고

* [Do it! HTML5+CSS3 웹 표준의 정석](https://book.naver.com/bookdb/book_detail.nhn?bid=15975063)