select

<select> 요소는 옵션 메뉴를 제공하는 컨트롤을 나타냅니다. 드롭다운 메뉴를 통해 하나의 값을 선택해 선택한 값을 제출할 수 있습니다. 또한 후보군들의 경우 select태그의 자식요소로 option을 사용해 작성할 수 있습니다.

  <form action="" method="get">

    <label for="movie">좋아하는 영화: </label>
    <select id="movie" name="movie">
      <option>토이스토리</option>
      <option>쥬토피아</option>
      <option>인사이드아웃</option>
    </select>

    <input type="submit">
  </form>

좋아하는 영화: 토이스토리 쥬토피아 인사이드아웃

1. value속성

옵션 내 자식요소로 들어가 있는 컨텐츠는 최종 사용자에게 ul적인 요소로 보여지는 값이 들어가며, 서버로 보낼 때는 name필드와 value값을 이용해서 서버로 전송하게 됩니다. 또한 value속성이 없는 경우 자식 요소로 들어가 있는 컨텐츠를 전송값으로 이용하게 됩니다.

value값이 지정되지 않은 경우

<option value="toystory">토이스토리</option>
<option value="Zootopia">쥬토피아</option>
<option value="insideout">인사이드아웃</option>

value값이 지정된 경우

2 기본값

첫 번째 옵션 값이 기본값으로 설정이 되게 됩니다.

    <label for="movie">좋아하는 영화: </label>
    <select id="movie" name="movie" required>
      <option value="">--Please choose an option--</option>
      <option value="toystory">토이스토리</option>
      <option value="Zootopia">쥬토피아</option>
      <option value="insideout">인사이드아웃</option>
    </select>

좋아하는 영화:
--Please choose an option-- 토이스토리 쥬토피아 인사이드아웃

3 selecte속성

만약 다른 옵션값을 기본값으로 설정하고 싶은 경우 selected속성을 이용할 수 있습니다.

    <label for="movie">좋아하는 영화: </label>
    <select id="movie" name="movie" required>
      <option>--Please choose an option--</option>
      <option value="toystory">토이스토리</option>
      <option value="Zootopia" selected>쥬토피아</option>
      <option value="insideout">인사이드아웃</option>
    </select>

좋아하는 영화:
--Please choose an option-- 토이스토리 쥬토피아 인사이드아웃

4 <optgruop>태그 이용

옵션들을 그룹으로 지정을 해 구분할 수 있습니다. 또한 label요소를 사용해 그룹의 이름을 지정할 수도 있습니다.

<label for="movie">좋아하는 영화: </label>
<select id="movie" name="movie" required>
  <option>--Please choose an option--</option>
  <optgroup label="animation">
    <option value="toystory">토이스토리</option>
    <option value="Zootopia" selected>쥬토피아</option>
    <option value="insideout">인사이드아웃</option>
  </optgroup>
  <optgroup label="sf">
    <option value="matrix">매트릭스</option>
  </optgroup>
</select>

좋아하는 영화:
--Please choose an option-- 토이스토리 쥬토피아 인사이드아웃 매트릭스