HTML 입문 | HTML 입력 양식 (Forms) | HTML 선택 입력(select)

선택 입력 select 요소

select 요소는 여러 개의 옵션이 드롭다운 리스트(drop-down list)로 되어 있으며, 그 중에서 단 하나의 옵션만을 입력 받을 수 있다.
콤보 박스라고도 하며, 풀다운 메뉴(pull-down menus)라고도 한다.

option 요소는 드롭다운 리스트에 선택할 수 있는 각각의 옵션을 명시한다.

좋아하는 과일은?
<select name="fruit">
  <option value="apple">사과</option>
  <option value="banana" selected>바나나</option>
  <option value="orange">오렌지</option>
  <option value="strawberry">딸기</option>
</select>

코드 실행

selected 속성을 이용하여 드롭다운 리스트 중에서 처음에 미리 선택되는 옵션을 지정할 수 있다.

option 요소

option 요소는 여러 항목 중에 선택 가능한 항목이다.

option 요소에서 사용하는 value 속성은 텍스트 필드에서의 value 속성과는 조금 다르다. 텍스트 필드에서 value 속성에 값을 입력하면 기본값이 입력되지만, <option> 태그의 경우는 이 option이 선택된 경우에 전송되는 값을 지정하는 것이다.

optgroup 요소

optgroup 요소는 HTML 4 버전에서 새로 만들어진 태그로 옵션을 그룹화할 수 있다.
대부분의 웹브라우저에서 지원하고 있다.

당신의 취미는?
<select name="hobby">
  <option value="독서">독서</option>
  <optgroup label="스포츠">
    <option value="야구">야구</option>
    <option value="축구">축구</option>
  </optgroup>
  <option value="음악감상">음악감상</option>
</select>

코드 실행