HTML <select> 태그
예시
네 가지 옵션이 있는 드롭다운 목록을 만듭니다.
<label for="cars">Choose a car:</label>
<select
name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
요소 는 <select>드롭다운 목록을 만드는 데 사용됩니다.
요소 는 <select>사용자 입력을 수집하기 위해 양식에서 가장 자주 사용됩니다.
name속성은 양식이 제출된 후 양식 데이터를 참조하는 데 필요합니다(속성을 생략하면 드롭
name다운 목록의 데이터가 제출되지 않음).
id속성은 드롭다운 목록을 레이블과 연결하는 데 필요합니다 .
요소 내부 의 <option> 태그 <select>는 드롭다운 목록에서 사용 가능한 옵션을 정의합니다.
팁: 최상의 접근성을 위해 항상 <label> 태그를 추가하십시오!
브라우저 지원
| Element | |||||
|---|---|---|---|---|---|
| <select> | Yes | Yes | Yes | Yes | Yes |
속성
| Attribute | Value | Description |
|---|---|---|
| autofocus | autofocus | Specifies that the drop-down list should automatically get focus when the page loads |
| disabled | disabled | Specifies that a drop-down list should be disabled |
| form | form_id | Defines which form the drop-down list belongs to |
| multiple | multiple | Specifies that multiple options can be selected at once |
| name | name | Defines a name for the drop-down list |
| required | required | Specifies that the user is required to select a value before submitting the form |
| size | number | Defines the number of visible options in a drop-down list |
전역 속성
<select>태그는 HTML의 전역 속성도 지원 합니다 .
이벤트 속성
<select>태그는 HTML의 이벤트 속성 도 지원합니다 .
더 많은 예
예시
<optgroup> 태그와 함께 <select> 사용:
<label for="cars">Choose a car:</label>
<select
name="cars" id="cars">
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
관련 페이지
HTML DOM 참조: 개체 선택
CSS 튜토리얼: 양식 스타일 지정
기본 CSS 설정
없음.