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

Select & Option

 

 

 

▶ 풀다운 메뉴를 생성하는 태그이다. 자식태그로 option태그를 사용한다.

 

 

▶ 서버로 제대로 된 값을 전달하기 위해서는 name, value옵션을 필수로 사용해야 한다.

 

<!-- option 태그를 사용하여 메뉴의 요소를 추가했다. -->
<form action="" method="get">
    <select>
        <option> Low </option>
        <option> Middle </option>
        <option> High </option>
    </select>
    <button type="submit"> 제출 </button>
</form>

<!-- 내가 선택한 필드는 무엇이고, 선택된 값이 무엇인가를 서버에 알려주기 위해서 name, value옵션을 사용했다. -->
<form action="" method="get">
    <label for="level"> 수준 </label>
    <select name="level" id="level">
        <option value="low"> Low </option>
        <option value="middle"> Middle </option>
        <option value="high"> High </option>
    </select>
    <button type="submit"> 제출 </button>
</form>

<!-- multiple옵션을 사용하여 다중선택이 가능하도록 했다.(ctrl키를 눌러서 선택해야한다.) -->
<form action="" method="get">
    <label for="level"> 수준 </label>
    <select multiple name="level" id="level">
        <option value="low"> Low </option>
        <option value="middle"> Middle </option>
        <option value="high"> High </option>
    </select>
    <button type="submit"> 제출 </button>
</form>