> For the complete documentation index, see [llms.txt](https://docs.sysout.co.kr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sysout.co.kr/web/develop-page/html/form/select.md).

# \<SELECT>

## Select tag

`<select>`는 여러 개의 `<option>` 중에서 원하는 항목을 선택할 수 있는 도구이다.&#x20;

{% embed url="<https://codepen.io/hiphop5782/pen/PoKGeyM>" %}

### label

`label` 속성을 이용하여 `<option>`의 표시할 글자 속성을 정할 수 있다. `<option>` 내부의 글자보다 우선 적용된다.

{% embed url="<https://codepen.io/hiphop5782/pen/NWvRMex>" %}

### name

`name` 속성을 `<select>`에 작성하여 `<form>` 제출 시 전송될 파라미터의 이름을 지정할 수 있다.

### value

`value` 속성을 이용하여 실제 선택된 값을 처리할 수 있다. `<form>` 이 제출될 경우 선택된 `<option>`의 `value` 값이 전송된다.

{% embed url="<https://codepen.io/hiphop5782/pen/OJjRZqJ>" %}

{% hint style="info" %}
value 속성은 select에는 부여할 수 없고 option에만 부여할 수 있다.
{% endhint %}

### size

`size` 속성을 이용하여 표시될 `<option>` 개수를 정할 수 있다. size보다 많은 개수의 `<option>`이 존재할 경우 스크롤이 생긴다.

{% embed url="<https://codepen.io/hiphop5782/pen/LYjRmvg>" %}

### multiple

`multiple` 속성을 지정할 경우 특수키를 이용하여 다중 선택이 가능하다. `multiple` 속성은 값도 <mark style="color:blue;">multiple</mark>이기 때문에 속성 이름만 작성하여 설정할 수 있다.

{% embed url="<https://codepen.io/hiphop5782/pen/jOLMxoV>" %}

### required

`required` 속성을 지정할 경우 `<form>` 제출 시 반드시 비어있지 않은 값이 선택되어야 한다. 속성 이름과 값이 일치하기 때문에 속성 이름만 작성하여 설정할 수 있다.

### disabled

`disabled` 속성을 지정할 경우 특정 `<option>` 또는 `<select>` 전체를 비활성화 시킬 수 있다. 특별한 사유에 의해 선택되면 안되는 경우 사용할 수 있다.

{% embed url="<https://codepen.io/hiphop5782/pen/YzxGLmM>" %}

### \<optgroup>

`<optgroup>` 태그를 사용하여 복잡한 `<select>` 구조를 구현할 수 있다.

{% embed url="<https://codepen.io/hiphop5782/pen/bGrwKNe>" %}