Select, Option Tag

옵션 메뉴를 제공하는 컨트롤을 생성하는 태그

HTML의 Select Tag는 fall down menu를 만들때 사용하고 Option Tag는 fall down menu안에 list값을 만들 때 사용하는 태그이다.

menu의 다중 항목 선택시 <select>태그에 multiple속성 사용한다.

또한 <input>태그와는 다르게 <select>태그에만 name속성을 적용하면 자식인 <option>태그에도 자동으로 적용된다.

  <form action="" method="get">
    <!-- <label>태그와 <select>태그 연결시 <input>태그와 동일하게 for, id속성값 지정해서 사용 -->
    <label for="skill">사용가능을 고르시오.</label>
  
    <!-- 위와 같이 코드를 작성한 뒤 값을 선택하면 선택한 값이 서버로 전송 -->
    <select name="skill" id="skill" multiple>
      <option value="html">HTML</option>
      <option value="css">CSS</option>
      <option value="js">Java Script</option>
    </select>   

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

위 코드를 실행하면 아래와 같은 결과가 출력된다.

참고 자료

<select> - HTML: Hypertext Markup Language - MDN Web Docs
<option> - HTML: Hypertext Markup Language - MDN Web Docs