<select> 요소는 <optgroup>, <option> 태그를 이용하여 드롭다운 목록을 표시합니다.
<option> 태그의 selected 속성은 초기값을 선택할 수 있습니다.
disabled 속성은 비활성화 하여 선택할 수 없습니다.
<select name="sel">
<option value="ds">자료구조</option>
<option value="html" selected>HTML</option>
<option value="pl">프로그래밍언어론</option>
<option value="db">데이터베이스</option>
<option value="os" disabled>운영체제</option>
<option value="algo">알고리즘</option>
</select>
multiple 속성으로 다중선택을 할 수 있습니다. size 속성을 지정하면 한번에 보여질 항목 수를 표시합니다.
<select name="sel" multiple size="4">
<option value="ds">자료구조</option>
<option value="html" selected>HTML</option>
<option value="pl">프로그래밍언어론</option>
<option value="db">데이터베이스</option>
<option value="os" disabled>운영체제</option>
<option value="algo">알고리즘</option>
</select>
<optgroup> 태그로 옵션을 그룹화할 수 있습니다
<select name="sel">
<optgroup label="1학년">
<option value="ds">자료구조</option>
<option value="html">HTML</option>
</optgroup>
<optgroup label="2학년">
<option value="pl">프로그래밍언어론</option>
<option value="db">데이터베이스</option>
</optgroup>
<optgroup label="3학년" disabled>
<option value="os" >운영체제</option>
<option value="algo">알고리즘</option>
</optgroup>
</select>
속성 | 설명 |
---|---|
name |
요소의 이름을 지정합니다. 서버로 전송될 이름입니다. |
size | 한번에 보여질 항목의 개수를 지정합니다. |
multiple | 여러항목을 선택할 수 있게 합니다. |
required | 폼 제출시 값이 필수로 선택되어야 합니다. |
autofocus | 페이지가 로드될때 자동으로 포커스를 취득합니다. |
form | 폼요소 밖에서 사용되는 경우 form 요소의 id를 지정합니다. |
disabled | 비활성화 시키고 제출할때 값을 전송하지 않습니다. |
속성 | 설명 |
---|---|
label | 옵션그룹의 레이블을 지정합니다. |
disabled |
옵션그룹을 비활성화 합니다. 그룹내의 옵션도 비활성화 됩니다. |
속성 | 설명 |
---|---|
value | 폼을 제출할때 서버로 전송될 값입니다. |
selected | 초기값으로 선택합니다. |
disabled | 비활성화 하여 선택할 수 없습니다. |
label | 옵션 콘텐츠가 긴 경우 항목을 짧은 레이블로 표시합니다. |