[HTML]<select> 태그

<select>태그란

 여러가지 선택지가 있을 때, 하나의 선택지를 선택 할 수 있는 드롭박스를 만들어준다.

 

문법

<select>
  <option value=""> </option>
</select>

option 태그 사이에 텍스트를 넣어 보여준다.

 

 

<select>태그 예제

See the Pen VwPZKWL by BakGyoungMin (@bgm16) on CodePen.

 

 

 

 

<optgroup> 태그

 이 태그는 select태그 내에 있는 option태그들을 그룹화 하는데 사용하는 태그이다.

 

문법

<select>
 <optgroup label="">
  <option value="">  </option>
 <optgroup label="">
  <option value="">  </option>
</select>

optgtoup label에 그룹의 제목이 될 텍스트를 넣는다. 물론 그룹제목인 optgroup에 넣은 택스트는 선택되지 않는다.

 

<optgroup>태그 예제

See the Pen qBRWaje by BakGyoungMin (@bgm16) on CodePen.

 

 

 

<select> 태그 속성

selected

여러 항목중에서 기본값으로 설정되어 보여진다.

multiple

여러개의 값을 선택할 수 있도록 한다.

autofocus

 페이지가 로드 되었을 때, 해당 목록으로 바로 포커스가 맞춰진다.

size

 목록을 펼치기 전에 보여질 목록의 개수를 정한다.

 

See the Pen RwKbGyG by BakGyoungMin (@bgm16) on CodePen.