HTML <select> 태그 – 올바른 이해와 사용 방법

`<select>` 태그의 정의 및 사용법

<select> 태그는
옵션 메뉴를 제공하는 컨트롤을 나타냅니다.

흔히 '드롭다운 목록' 또는 '셀렉트 박스'라고 부르는 이 컨트롤은 사용자가 원하는 옵션을 선택할 수 있는 방법입니다.
사용자는 이 컨트롤로 원하는 옵션을 선택할 수 있습니다.

아래의 예제는 <select> 태그의 일반적인 사용법 중 하나입니다.

HTML

<form>
    <label for="user-color" style="display: block;">색상 선택</label>
    <select id="user-color" required>
        <option value="" disabled selected>좋아하는 색상 선택</option>
        <option value="red">빨강</option>
        <option value="blue">파랑</option>
        <option value="yellow">노랑</option>
        <option value="green">초록</option>
    </select>
    <button type="submit">제출</button>
</form>

`<option>`과 `<optgroup>` 태그

<select> 태그의 각 옵션은 <option> 태그로 나타냅니다.
<option> 태그들은 <optgroup> 태그로 그룹화할 수 있습니다.
<select> 태그의 구성 콘텐츠인 <option>과 <optgroup> 태그와 관련 속성들에 대해 알아보겠습니다.

`<option>` 태그

<select> 태그 내의 <option> 태그들은 각각의 옵션을 나타냅니다.
<select> 태그로 나타내는 이 컨트롤은 사용자가 원하는 옵션을 선택할 수 있는 방법입니다. 사용자는 이 컨트롤로 원하는 옵션을 선택할 수 있습니다.

<option> 태그 내에는 텍스트나 이스케이프 문자(HTML 특수 문자를 의미함)만 유효합니다.
만약, HTML 태그가 포함된다면(예를 들어 <a>, <span> 등) 브라우저는 해당 태그가 가지는 고유한 기능과 스타일을 무시하고 태그 내의 텍스트나 이스케이프 문자을 유효한 콘텐츠로 사용합니다.

`value` 속성

각 <option>에는 해당 옵션이 선택될 때 서버에 제출할 데이터 값이 포함된 value 속성이 있어야 합니다. 이 속성이 생략되면 값은 옵션 요소의 텍스트 내용에서 가져옵니다.

HTML

<form>
    <label for="user-color">색상 선택</label>
    <select id="user-color">
        <option value="red">빨강</option>
        <option value="blue">파랑</option>
        <option value="yellow">노랑</option>
        <option value="green">초록</option>
    </select>
</form>

`selected` 속성

페이지가 처음 로드될 때 기본적으로 선택되도록 <option>에 selected 속성을 포함할 수 있습니다.
이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

HTML

<label for="user-color">색상 선택</label>
<select id="user-color">
    <option value="red">빨강</option>
    <option value="blue" selected>파랑</option>
    <option value="yellow">노랑</option>
    <option value="green">초록</option>
</select>

`disabled` 속성

disabled 속성은 컨트롤 비활성 속성이라고도 부르며, 포커스도 가능하지 않으며, 양식 제출 시 해당 값은 제출되지 않습니다. <select>가 활성화 되어 컨트롤에 드롭다운 목록이 표시되는 경우 대부분의 브라우저는 이 속성을 포함한 옵션을 회색처리합니다. 그리고, 사용자도 이 옵션을 선택할 수 없습니다.
이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

HTML

<label for="user-color">색상 선택</label>
<select id="user-color">
    <option value="red">빨강</option>
    <option value="blue" disabled>파랑</option>
    <option value="yellow">노랑</option>
    <option value="green">초록</option>
</select>

위 예제에서 "파랑" 옵션에는 disabled 속성이 포함되어 있으므로 전혀 선택할 수 없습니다.

`<optgroup>` 태그

<optgroup> 태그는 <select> 태그 내에서 공통 레이블(이름)이 있는 <option> 태그의 그룹을 나타냅니다.
이 태그로 관련된 <option> 태그들을 묶어 그룹화하면, 사용자에게 더욱 체계적인 옵션 목록을 제공할 수 있습니다.

`label` 속성

<optgroup>에 label 속성으로 옵션 그룹의 레이블(이름)를 지정합니다. 필수로 지정해야 합니다.

HTML <optgroup> 사용 예제

<form>
    <label for="fruits" style="display: block;">과일을 선택하세요.</label>
    <select id="fruits">
        <optgroup label="감귤류">
            <option value="orange">오렌지</option>
            <option value="lemon">레몬</option>
            <option value="lime">라임</option>
        </optgroup>
        <optgroup label="베리류">
            <option value="strawberry">딸기</option>
            <option value="blueberry">블루베리</option>
            <option value="raspberry">라즈베리</option>
        </optgroup>
        <optgroup label="열대과일">
            <option value="mango">망고</option>
            <option value="pineapple">파인애플</option>
            <option value="banana">바나나</option>
        </optgroup>
    </select>
    <button type="submit">제출</button>
</form>

관련 속성 사용하기

<select> 태그의 관련된 속성에 대해 알아보겠습니다.

`required` 속성

양식을 제출하기 전에 사용자가 컨트롤의 입력 값을 지정해야 함을 나타냅니다.
이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

HTML

<form>
    <label for="user-color" style="display: block;">색상 선택</label>
    <select id="user-color" required>
        <option value="" disabled selected>--좋아하는 색상 선택--</option>
        <option value="red">빨강</option>
        <option value="blue">파랑</option>
        <option value="yellow">노랑</option>
        <option value="green">초록</option>
    </select>
    <button type="submit">제출</button>
</form>

`autofocus` 속성

페이지가 로드될 때 해당 컨트롤에 입력 포커스가 있어야 함을 지정할 수 있습니다. HTML 문서에는 하나의 컨트롤 요소에만 사용되어야 하며, 중복으로으로 사용할 경우에는 처음에 사용한 autofocus 속성만 적용됩니다. 이 속성은 컨트롤 요소에 자동으로 포커스를 맞추기 위해 사용됩니다.

이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

HTML

<label for="user-color">색상 선택</label>
<select id="user-color" autofocus>
    <option value="red">빨강</option>
    <option value="blue">파랑</option>
    <option value="yellow">노랑</option>
    <option value="green">초록</option>
</select>

autofocus 속성이 지정되어 있더라도, autofocus 속성을 지정한 요소 이외의 요소를 사용자가 포커스하면 autofocus 속성을 지정한 요소의 포커스는 포커스를 잃게(blur) 됩니다.

브라우저 호환성 주의!
iOS에서는 제작사인 Apple의 정책으로 인해 모든 브라우저의 autofocus 속성을 지원하지 않습니다.
caniuse.com에서 더 자세한 정보를 확인해 보세요.

`multiple` 속성

multiple 속성은 <select> 태그에서 사용하여 여러 개의 옵션을 동시에 선택할 수 있게 합니다. 이 속성을 사용하면 사용하는 드롭다운 목록이 여러 선택할 수 있습니다.

사용자는 여러 옵션을 선택하려면 Ctrl (Windows) 또는 Command (Mac) 키를 누른 상태에서 선택해야 합니다.

이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

HTML

<label for="user-color">색상 선택</label>
<select id="user-color" multiple>
    <option value="red">빨강</option>
    <option value="blue">파랑</option>
    <option value="yellow">노랑</option>
    <option value="green">초록</option>
</select>

`size` 속성

size 속성은 <select>가 활성화 되어 컨트롤에 드롭다운 목록이 표시되는 경우 한 번에 표시되어야 하는 목록의 행 수를 나타냅니다. 값은 0보다 큰 양의 정수로 지정합니다.

브라우저 호환성 주의!
size 속성은 모바일에서 지원하지 않는 브라우저가 있습니다. 브라우저 호환성을 고려해서 사용해야 합니다.

HTML

<label for="user-color">색상 선택</label>
<select id="user-color" size="3">
    <option value="red">빨강</option>
    <option value="blue">파랑</option>
    <option value="yellow">노랑</option>
    <option value="green">초록</option>
    <option value="violet">보라</option>
    <option value="orange">주황</option>
</select>

`disabled` 속성

disabled 속성은 컨트롤 비활성 속성이라고도 부르며, 포커스도 가능하지 않으며, 양식 제출 시 해당 값은 제출되지 않습니다.
이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

HTML

<label for="user-color">색상 선택</label>
<select id="user-color" disabled>
    <option value="red">빨강</option>
    <option value="blue">파랑</option>
    <option value="yellow">노랑</option>
    <option value="green">초록</option>
</select>

`<select>`에 플레이스홀더(placeholder) 구현하기

<select> 태그는 <input> 등에서 사용하는 placeholder 속성을 지원하지 않습니다.

하지만, 비슷한 효과를 낼 수 있습니다.
selected 속성으로 옵션이 선택되어 있는 경우와 그렇지 않은 경우로 나누어서 플레이스홀더를 구현해 보겠습니다. 그리고 접근성에 대한 고려사항도 살펴보겠습니다.

`selected` 속성으로 옵션이 선택되어 있는 경우

HTML

<form>
    <label for="user-color" style="display: block;">색상 선택</label>
    <select id="user-color" required>
        <option value="" disabled>좋아하는 색상 선택</option> <!-- 플레이스홀더 구현하기 -->
        <option value="red">빨강</option>
        <option value="blue" selected>파랑</option>
        <option value="yellow">노랑</option>
        <option value="green">초록</option>
    </select>
    <button type="submit">제출</button>
</form>

옵션이 선택되어 있지 않은 경우

HTML

<form>
    <label for="user-color" style="display: block;">색상 선택</label>
    <select id="user-color" required>
        <option value="" disabled selected>좋아하는 색상 선택</option> <!-- 플레이스홀더 구현하기 -->
        <option value="red">빨강</option>
        <option value="blue">파랑</option>
        <option value="yellow">노랑</option>
        <option value="green">초록</option>
    </select>
    <button type="submit">제출</button>
</form>

접근성에 대한 고려사항

플레이스홀더(placeholder)를 구현했다고 해서 해당 컨트롤의 레이블(이름표)을 대신할 수 없습니다.
컨트롤의 레이블(이름표)은 <label>을 사용해야 합니다. 콘텐츠에 예기치 않은 기술적 문제를 일으킬 수 있습니다.

HTML 컨트롤의 레이블(이름표)는 플레이스홀더가 <label>를 대신할 수 없습니다.

<form>
    <select id="user-color" required>
        <option value="" disabled selected>좋아하는 색상 선택</option>
        <option value="red">빨강</option>
        <option value="blue">파랑</option>
        <option value="yellow">노랑</option>
        <option value="green">초록</option>
    </select>
    <button type="submit">제출</button>
</form>

자세한 사항은 <input> 태그의 접근성 고려사항을 참조하세요.

기술적인 문법 요약

select 태그의 기술적인 구문 요약
허용되는 콘텐츠	0개 이상의 `<option>`, `<optgroup>` 요소, 또는 스크립트를 지원하는 요소(`<script>`, `<template>`)
가능한 부모 요소	구문적 내용을 허용하는 모든 요소
암시적인 `role` 속성 값	`combobox` - `multiple` 속성이 없고 `size` 속성의 값이 `1` 이하인 경우 `listbox` - `multiple` 속성이 있거나 `size` 속성의 값이 `2` 이상인 경우
허용된 `role` 속성 값	`menu` - `multiple` 속성이 없고 `size` 속성의 값이 `1` 이하인 경우 없음 - `multiple` 속성이 있거나 `size` 속성의 값이 `2` 이상인 경우

명세서에는 허용되는 콘텐츠로 <hr>을 포함하고 있지만, 대부분의 브라우저에서 일부 기능만 지원하거나 지원하지 않는 브라우저가 많아 여기에서는 포함시키지 않았습니다.

브라우저 호환성

select 태그와 관련 태그 및 관련 속성의 브라우저 호환성
데스크탑
태그와 관련 속성	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`<select>`	1	12	1	1
`<option>`	1	12	1	4
`<optgroup>`	1	12	1	4
`value`	1	12	1	4
`disabled`	1	12	1	4
`label`	1	12	1	4
`selected`	1	12	1	4
`required`	4	12	4	5
`multiple`	1	12	1	3
`size`	1	12	1	3

마지막 업데이트 정보: 2024-07-04

select 태그와 관련 태그 및 관련 속성의 브라우저 호환성
모바일
속성	모바일 Chrome	모바일 Firefox	Safari
`size`	지원하지 않음	1	지원하지 않음

명세서

select 태그의 명세서 사양
명세서 사양
`<select>`	HTML Standard #the-select-element

참고문헌

MDN - <select> The HTML Select element

<select> 태그의 정의 및 사용법

<option>과 <optgroup> 태그

<option> 태그

value 속성

selected 속성

disabled 속성

<optgroup> 태그

label 속성

관련 속성 사용하기

required 속성

autofocus 속성

multiple 속성

size 속성

disabled 속성

<select>에 플레이스홀더(placeholder) 구현하기

selected 속성으로 옵션이 선택되어 있는 경우

옵션이 선택되어 있지 않은 경우

접근성에 대한 고려사항

기술적인 문법 요약

브라우저 호환성

명세서

참고문헌

같이 보기

`<select>` 태그의 정의 및 사용법

`<option>`과 `<optgroup>` 태그

`<option>` 태그

`value` 속성

`selected` 속성

`disabled` 속성

`<optgroup>` 태그

`label` 속성

`required` 속성

`autofocus` 속성

`multiple` 속성

`size` 속성

`disabled` 속성

`<select>`에 플레이스홀더(placeholder) 구현하기

`selected` 속성으로 옵션이 선택되어 있는 경우