목차
- <option> 예제 - 선택사항
- <option> 정의
- <option> 구문
- <option> 속성
<option> 예제 - 선택사항
[에제1] - 선택사항 유형 1개 경우.
<select>
<option value="html">html 홈짱닷컴 (homzzang.com)</option>
<option value="css">css 홈짱닷컴 (homzzang.com)</option>
<option value="javascript">javascript 홈짱닷컴 (homzzang.com)</option>
<option value="php">php 홈짱닷컴 (homzzang.com)</option>
</select>
결과보기
[예제2] - 선택사항 유형 여러 개 경우.
<select>
<optgroup>
<option value="html">html 홈짱닷컴 (homzzang.com)</option>
<option value="css">css 홈짱닷컴 (homzzang.com)</option>
</optgroup>
<optgroup>
<option value="javascript">javascript 홈짱닷컴 (homzzang.com)</option>
<option value="php">php 홈짱닷컴 (homzzang.com)</option>
</optgroup>
</select>
<option> 정의
<select>/<datalist> 태그 안에서 개별 선택사항 나열.
1.
2.
- 속성 없이 사용 가능. (단, 대개 서버에 값 전달 위해 value 속성 사용)
- 이미지는 사용 불가. (즉, JS/jQuery 이용해 비슷한 효과 구현 가능.)
4.
5.
MDN <option> 예제 보기
<option> 구문
[방법1] 선택사항 유형 1개 경우.
<select>
<option 속성="속성값">선택사항</option>
</select>
[방법2] 선택사항 유형 여러 개 경우.
<select>
<optgroup>
<option 속성="속성값">선택사항</option>
<option 속성="속성값">선택사항</option>
...
</optgroup>
</select>
<option> 속성
속성
|
속성값 |
쓰임새 |
disabled
|
disabled |
<option>태그를 사용하지 않을 때 사용 |
label
|
글자 |
<option> 태그 꼬리표 |
selected
|
selected |
해당 옵션을 기본 선택값으로 지정 (= 페이지 로딩시 바로 보이게 지정) |
value
|
글자 |
해당 선택사항을 선택 시, 서버로 전송되는 선택값 |
<option>태그는 전역속성과 이벤트속성 지원.