본문 바로가기
html

[html] optgroup 태그

by 지구별에 2014. 10. 24.

 

 

[html] optgroup 태그

 

며칠 전 option 태그를 배웠습니다.

 

[html] option 태그

 

 

option은 select 태그나 datalist 태그 안에서 사용하여, 드롭다운 목록을 만드는 역할을 합니다.

 

optgroup 태그는  옵션 목록이 길 경우 관계 있는 옵션들끼리 묶어주는 기능을 합니다.

 

주로 label 속성과 함께 사용

 
문법: <optgroup label="female">내용 </optgroup>

 

▶함께 사용할 수 있는 속성

속성 속성값 설명
disabled disabled 옵션 그룹이 비활성화 됨
문법: <optgroup disabled>, xhtml에서는 <optgroup disabled="disabled">
label text 옵션 그룹에 대한 설명

 

 

html 작성 예를 보겠습니다~

 

 html

<h4> 신발 사이즈 선택</h4>
<select name="size" >
<optgroup label="female">
  <option value="225">225mm</option>
  <option value="230" >230mm</option>
  <option value="235">235mm</option>
 </optgroup>
<optgroup label="male">
  <option value="255">255mm</option>
  <option value="260" >260mm</option>
  <option value="265">265mm</option>
 </optgroup>
</select>

 

 

 

 

▶실행 화면

female 과 male로 구분이 되어 표시가 됩니다. 소스 파일 다운 받아 실행해 보세요

optgroup.htm

 

 

[html] input type 속성

 

textarea 태그

 

select 태그

 

button 태그

 

 

반응형

'html' 카테고리의 다른 글

[html5] datalist 태그  (0) 2014.10.28
fieldset 태그, legend 태그  (0) 2014.10.27
[html] option 태그  (0) 2014.10.22
[html] select 태그  (2) 2014.10.21
[html] button 태그  (1) 2014.10.20

댓글0