# 여러 폼 요소들

## 목차&#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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://shhn0509.gitbook.io/html-and-css/html/form-element/undefined.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
