<select>

정의 및 사용

<select>태그는 선택 메뉴(drop-down list)를 만들 때 사용한다. select 요소 내의 <option>태그는 목록에 있는 사용 가능한 옵션을 정의한다. select요소는 form 컨트롤 및 사용자가 입력한 값을 수집하는 형태로 사용할 수 있다.

브라우저 지원

IE6 지원IE7 지원IE8 지원IE9 지원IE10 지원Chrome 지원Firefox 지원Opera 지원Safari 지원

모든 주요 브라우저에서 지원

접근성 이슈

  • 되도록이면 자바스크립트로 디자인을 입히지 않도록 한다. 많은 경우에 키보드로 접근이 되지 않는다.
  • option 항목에 자바스크립트를 넣어 선택하였을 때 바로 액션이 일어나도록 하면 키보드로 사용하는 사람들에게는 option 항목에 접근조차 하지 못하는 현상이 발생하므로, select 요소 옆에 전송 버튼을 함께 구현하여 버튼을 눌렀을 시 전송이 일어나도록 하는 것이 좋다.

구문

속성 값 설명
속성 설명
autofocusnew autofocus 페이지가 로딩되었을 때 키보드 포커스가 해당 select에 위치하도록 한다.
disabled disabled 드롭다운 목록(구성요소)을 선택할 수 없게 지정한다.
formnew form_id
multiple multiple 다중선택 할 수 있도록 지정한다.
name name 요소의 이름을 지정한다.
requirednew required 필수입력값으로 지정한다.
size number 드롭다운 목록(구성요소) 항목의 개수를 지정한다.

예제

목록 으로

댓글