[HTML] — 下拉式選單

[HTML] — 下拉式選單

表單

使用表單讓使用者可以填寫資料，並送資料回傳給伺服器。

action：將表單填寫的資料，傳送到伺服器的哪一個位置。

method：指定傳輸協定的使用方法。

<!-- HTTP 動詞 GET、POST、PUT、DELETE -->
<form action="" method="post"></form>

下拉式選單

標籤 <label> 和 <select> 通常會一起使用。

<label> 的 for 要跟 <select> id 是一樣的名稱，這樣才找得到。

<select> 的 name 為伺服器接收到的變數名稱，這邊為 meun。

<option> 的 value 為 <select> 的 name 的值。

<option> 的 selected 為選單的預設選項，這邊預設為「魚排便當」。

<label for="meun">菜單</label><br><br>
<select name="meun" id="meun">
    <option value="food1" >雞腿便當</option>
    <option value="food2">排骨便當</option>
    <option value="food3">控肉便當</option>
    <option value="food4" selected>魚排便當</option>
</select>

完整程式碼

<h1>吃什麼</h1>
<form action="" method="get">
    <label for="meun">菜單</label><br><br>
    <select name="choice" id="meun">
        <option value="food1" >雞腿便當</option>
        <option value="food2">排骨便當</option>
        <option value="food3">控肉便當</option>
        <option value="food4" selected>魚排便當</option>
    </select>
    <br><br>
    <input type="submit" value="submit">
</form>

參考資料

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option