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

# 여러 폼 요소들

## 목차&#x20;

* button
* select
* option
* optgroup
* textarea
* output
* datalist
* progress
* meter

## \<button>

버튼 폼 컨트롤로 사용자의 인터랙션을 받아 액션을 트리깅(방아쇠) 처리함.

### 타입

* submit (초기 값) : 클릭 시 실행되는 브라우저가 열리며 폼에 입력한 정보 전송
* button : submit과 다르게 클릭해도 아무런 변화가 없음
* reset : 초기화 버튼
  * 별 다른 것을 설정하지 않아도 form 요소 안의 inqut 등에 설정되어 있던 것이 초기화 된다.&#x20;

### 예시

```markup
<button type="submit">전송</button>
<button type="button">버튼</button>
<button type="reset">초기화</button>
```

## \<select>

드롭 다운 메뉴(옵션을 선택 할 수 있는) 컨트롤을 말함. 내부에 `<option>` 요소를 포함하여 사용자에게 선택할 수 있도록 한다. `<option>`을 묶어 그룹으로 만들고자 한다면 `<optgroup>` 요소를 사용하고, `label` 속성을 사용해 그룹 이름을 설정한다.

{% hint style="info" %}
`<optgroup>` 요소 사용은 table의 `col` 또는 `colgroup` 속성 사용과 비슷하다.&#x20;
{% endhint %}

### 속성

* name : 서버에 전송 할 때 필요한 속성&#x20;
* multiple : 선택지를 여러개 선택할 수 있음(값이 없음)
* disabled : 비활성화&#x20;
* required : 필수 입력
* size : 선택지가 보여지는 개수&#x20;

### 예시

```markup
<label for="user_hobby">취미</label>
<select name="user_hobby" id="user_hobby">
  ...
</select>
```

## \<option>

* `<select>`, `<datalist>`, `<optgroup>` 내부에 포함 가능한 컨트롤로 항목을 만드는데 사용됨.

### 속성

* value
* selected : 기본적으로 선택되어 있다.&#x20;
* label : 선택지에 다른 이름을 주고 싶다면 해당 속성을 사용해서 이름을 입력해 줄 수 있다.&#x20;
* disabled : 비활성화

{% hint style="info" %}
value 속성&#x20;

value 속성은 단순히 선택의 구분을 주기 위함이 아니라, 폼 전송 이벤트가 발생할 때 서버에 option 요소의 값을 전송해야 한다. 이 때 value 값을 전달하게 된다.
{% endhint %}

### 예시

```markup
<label for="user_hobby">취미</label>
<select name="user_hobby" id="user_hobby" required>
  <option value="0">없음</option>
  <option value="1" selected>축구</option>
  <option value="2" label="basketball" disabled>농구</option>
  <option value="3">독서</option>
  <option value="3">영화관람</option>
</select>
```

## \<optgroup>

* `<option>` 컨트롤을 그룹지을 때 사용됨.
* 선택지 내에서 그룹 생성

### 속성

* disabled : 해당 그룹을 비활성화
* label : 해당 옵션만 따로 이름을 설정할 수 있음

![](https://161134766-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPKJK-Pogdi-NHl4GxU%2F-MRPIgwQx5tceSURXJx8%2F-MRPJJlbKjsHk6UMs30l%2Fimage.png?alt=media\&token=91020193-a4f8-40d7-8c16-5066a2f93499)

![disabled 속성을 주었을 때 해당 그룹만 비활성화 될 수 있다. ](https://161134766-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPKJK-Pogdi-NHl4GxU%2F-MRPIgwQx5tceSURXJx8%2F-MRPJSbmGwbyfaOA5BxO%2Fimage.png?alt=media\&token=de1b7199-19cb-4f34-93dd-ec9756a32ffd)

### 예시

```markup
<p>
  <label for="user_hobby">취미</label>
  <select name="user_hobby" id="user_hobby" required>
    <option value="0">없음</option>
    <optgroup label="구기종목">
      <option value="1" selected>축구</option>
      <option value="2" label="basketball" disabled>농구</option>
    </optgroup>
    <optgroup label="문화생활" disabled>
      <option value="3">독서</option>
      <option value="3">영화관람</option>
    </optgroup>
  </select>
</p>
```

## \<textarea>

* 멀티라인 일반 텍스트 편집 컨트롤을 말한다.
* 텍스트 박스의 크기 설정 가능. 텍스트를 길게 입력할 때 사용
* 기본적으로 사용자가 `<textarea>`의 사이즈를 변경 할 수 있지만 고정하고 싶다면 `resize: none`을 적용한다.&#x20;

### 속성

* name
* placeholder
* rows : 입력할 수 있는 글의 줄 수
* cols : 가로로 입력할 수 있는 글자 수
* readonly
* required
* disabled
* minlength
* maxlength

![](https://161134766-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPKJK-Pogdi-NHl4GxU%2F-MRPJuWBkF2prnCA0E30%2F-MRPKREcbL1N7zUEwG8y%2Fimage.png?alt=media\&token=a1b26710-9753-4ceb-851a-e1768405121f)

### 예시

```markup
<div>
  <label for="user_comments">코멘트</label>
  <p>
    <textarea name="user_comments" id="user_comments" cols="24" rows="5">
    남기고 싶은 말을 작성해주세요.</textarea
    >
  </p>
</div>
```

* `<fieldset>`
  * 하나 이상의 폼 컨트롤을 그룹화 하는데 사용됨. -주로 폼요소 내부에 사용한다

### 속성

* name
* disabled

### 예시

```markup
<body>
  <form action="https://formspree.io/your@email.com" method="POST">
    <fieldset name="user_account">...</fieldset>
  </form>
</body>
```

## \<output>

* 계산된 결과를 출력하는 컨트롤.

### 속성

* name
* for

![](https://161134766-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPKJK-Pogdi-NHl4GxU%2F-MRPL4KvHvlo5kmq9saz%2F-MRPLh1O-HgmsOvmwDjU%2Fimage.png?alt=media\&token=8f5335d3-aae0-4f4f-a0b5-759dc34626de)

### 예시

```markup
<form oninput="result_sum.value = parseInt(n1.value + n2.value, 10)">
  <p>
    <input type="number" name="n1" value="4" /> +
    <input type="number" name="n2" value="10" /> =
    <output name="result_sum">14</output>
  </p>
</form>
```

## \<datalist>

데이터 목록 요소 컨테이너 컨트롤. 내부에 `<option>` 요소를 사용해 항목을 만든다.

![](https://161134766-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPKJK-Pogdi-NHl4GxU%2F-MRPE6kKGNmi9kR3SZyy%2F-MRPECM10YFTcfX87z2y%2Fimage.png?alt=media\&token=6dc599f1-1dc5-4131-8175-e7a600d1697d)

### 예시

```markup
<label
  >이동할 웹주소
  <input list="url_ex" type="url" name="user_url" id="user_url"
/></label>
<datalist id="url_ex">
  <option value="http://naver.com"></option>
  <option value="http://nate.com"></option>
  <option value="http://google.com">google</option>
  <option value="http://goo.gl">google</option>
</datalist>
```

## \<progress>

* 작업의 완료 진행 상황을 표시하는데 사용 되는 컨트롤.
* 퍼센트의 수치 값을 넣어줘야 한다고 공식문서에 명시 되어 있다.&#x20;

### 속성

* value
* max

![](https://161134766-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPKJK-Pogdi-NHl4GxU%2F-MRPL4KvHvlo5kmq9saz%2F-MRPLwB3NYcFhDFU05Bw%2Fimage.png?alt=media\&token=8dff0938-07f4-4deb-87f2-471fdde5f8a2)

### 예시

```markup
<progress value="10" max="100">10%</progress>
```

## \<meter>

* 알려진 범위 내에서의 스칼라 측정 또는 분포 비율을 나타내는 컨트롤. (게이지(gauge)라고도 불림)

  디스크 사용 현황, 쿼리 결과의 관련성, 특정 후보에 대한 투표율 등이 해당됨.
* 공식문서에서는 게이지의 값을 넣어줘야 한다고 말한다.&#x20;

### 속성

* value
* min
* max
* low
* high
* optimum

![](https://161134766-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPKJK-Pogdi-NHl4GxU%2F-MRPL4KvHvlo5kmq9saz%2F-MRPM536XoJeQe9CoCQA%2Fimage.png?alt=media\&token=345204c6-9ad8-44a1-a782-9759feff5157)

### 예시

```markup
<meter value="20" min="5" max="40">20</meter>
```

## 참고&#x20;

* \<button> [버튼 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/button) → MDN
* \<select> [셀렉트 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/select) → MDN
* \<option> [옵션 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/option) → MDN
* \<optgroup> [옵션 그룹 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/optgroup) → MDN
* \<textarea> [텍스트 에어리어 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/textarea) → MDN
* \<fieldset> [필드셋 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/fieldset) → MDN
* \<legend> [레전드 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/legend) → MDN
* \<datalist> [데이터 리스트 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/datalist) → MDN
* \<progress> [프로그래스 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/progress) → MDN
* \<output> [아웃풋 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/output) → MDN
* \<meter> [미터 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/meter) → MDN
