옵션(<option>, <optgroup>)의 선택 메뉴(<select>)나 자동완성(<datalist>)을 제공.
1. <select>
옵션을 선택하는 메뉴.
| 속성 | 의미 | 값 | 기본값 |
| autocomplete | 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 | on, off | on |
| disabled | 선택 메뉴를 비활성화 | Boolean | |
| form | 선택 메뉴가 속할 하나 이상의 form의 id 속성 값 (즉 id가 form태그 안에 있지 않을 경우에 id속성값으로 연결한다.) |
||
| multiple | 다중 선택 여부 | Boolean | |
| name | 선택 메뉴의 이름 | ||
| size | 한 번에 볼 수 있는 행의 개수 | 숫자(Number) | 0(1과 같음) |
<body>
<select name="fruits" size = "3" multiple disabled> <!--화면에 보이는 목록 개수, 다수 선택, 목록선택 금지-->
<option>Apple</option>
<option>Orange</option>
<option>Banana</option>
<option>Mango</option>
<option>Pineapple</option>
</select>
</body>
2. <optgroup>
<option>을 그룹화.
| 속성 | 의미 | 값 |
| label | (필수)옵션 그룹의 이름 | |
| disabled | 옵션 그룹을 비활성화 | Boolean |
3. <option>
선택 메뉴(<select>)나 자동완성(<datalist>)에서 사용될 옵션.
- 선택적 빈(Empty) 태그로 사용 가능.
| 속성 | 의미 | 값 | 특성 |
| disabled | 옵션을 비활성화 | Boolean | |
| label | 표시될 옵션의 제목 | 생략되면 포함된 텍스트를 표시 | |
| selected | 옵션이 선택되었음을 표시 | Boolean | |
| value | 양식으로 제출될 값 | 생략되면 포함된 텍스트를 값으로 사용 |
<!--옵션그룹 및 옵션-->
<body>
<select name="fruits">
<optgroup label = "my favorite fruites">
<option>Apple</option>
<option>Orange</option>
<option>Banana</option>
</optgroup>
<optgroup label = "my hate fruites">
<option selected>Mango</option> <!--미리 선택-->
<option>Pineapple</option>
</optgroup>
</select>
</body>4. <datalist>
<input>에 미리 정의된 옵션을 지정하여 자동완성(Autocomplete) 기능을 제공하는 데 사용.
- <input>의 list 속성 바인딩.
- <option>을 포함하여 정의된 옵션을 지정.
<input type="text" list="fruits"> <!--input으로 기본적인 양식을 제공함, 자동완성 기능리스트-->
<datalist id="fruits"> <!--fruits로 연결, 자동완성리스트 컴포넌트-->
<option>Apple</option>
<option>Orange</option>
<option>Banana</option>
<option>Mango</option>
<option>Fineapple</option>
</datalist>
'HTML > 요소' 카테고리의 다른 글
| 전역 속성 - CLASS와 ID (0) | 2021.01.06 |
|---|---|
| 양식 - PROGRESS (0) | 2021.01.06 |
| 양식 - FIELDSET, LEGEND (0) | 2021.01.05 |
| 양식 - TEXTAREA (0) | 2021.01.05 |
| 양식 - BUTTON (0) | 2021.01.05 |