<select>
<select> 태그는 선택 목록을 설정합니다.
<select> 태그는 선택 목록을 <option> 태그를 사용하여 설정하며, 접근성을 위하여 <label> 요소를 사용하며, id와 for 속성을 설정합니다.
<select>
<select> 태그는 선택 목록을 설정합니다.
특징 | 설명 |
---|---|
요소 | 인라인 요소(Inline Element) |
닫는 태그 | 닫는 태그 사용(<select> ~ </select>) |
버전 | HTML4 |
시각적 표현 | 선택 메뉴 |
사용성 |
정의(Definition)
- <select> 태그는 선택 목록을 설정합니다.
- <select> 태그는 선택 목록을 <option> 태그를 사용하여 설정합니다.
- <select> 태그는 접근성을 위하여 <label> 요소를 사용하며, id와 for 속성을 설정합니다.
- <selecg> 태그와 <datalist> 태그는 선택 목록을 보여주는 것은 똑같지만, <datalist>는 사용자가 선택 목록에 없는 값도 사용할 수 있으면, 일치하는 데이터 값이 있으면 바로 선택할 수 있습니다.
비교(Compare)
- <select> 태그는 선택 목록을 설정합니다.
- <datalist> 태그는 선택 목록과 자동 완성 기능을 설정합니다.
- <details> 태그는 접기/펼치기 목록을 설정합니다.
속성(Property)
속성 | 값(예) | 설명 | 버전 |
---|---|---|---|
autofocus | autofocus | 페이지가 로드한 후 자동으로 포커스를 설정합니다. | - |
disabled | disabled | 목록을 비활성화합니다. | - |
form | form = "id" | 선택 메뉴에 폼 아이디를 설정합니다. | - |
multiple | multiple | 선택 메뉴를 두개 이상 선택할 수 있습니다. | - |
name | name = "text" | 선택 메뉴에 이름을 설정합니다. | - |
required | required | 선택 메뉴가 필수적으로 선택할 때 설정합니다. | - |
size | size = "4" | 보여주고 싶은 선택 메뉴의 갯수를 설정합니다. | - |
예제1(Sample)
<select> 태그를 이용한 선택 목록 예제입니다.
HTML
CSS
SCRIPT
<label for="select">당신이 선호하는 언어는 무엇인가요?</label>
<select id="select">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="react">React.js</option>
<option value="vue">vue.js</option>
<option value="Javascript">Javascript</option>
</select>
//CSS none
//Javascript none
호환성(Compatibility)
6 | 7 | 8 | 9 | 10 | 11 | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
<select> | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
autofocus | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
disabled | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
form | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
multiple | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
name | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
required | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
size | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |