[html] optgroup 태그

 

 

[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 태그