網頁

2019/8/12

HTML <select> 選單元素

在HTML網頁可使用選單元素<select>來表示下拉選單(drop-down menu)。


下面是一個簡單的<select>範例。

<label for="blood">選擇血型:</label>
<select id="blood" name="blood">
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">AB</option>
    <option value="4">O</option>
    <option value="5">其他</option>
</select>

顯示如下。

<select>選單的選項內容以<option>元素包起並置於<select>間。

<option>包夾的文字內容僅是用來顯示給使用者看的;<option>value值才是提交時真正送出的內容。


<select>元素可使用size屬性來設定選項露出的數量。例如下面設定size="3"

<label for="blood">選擇血型:</label>
<select id="blood" name="blood" size="3">
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">AB</option>
    <option value="4">O</option>
    <option value="5">其他</option>
</select>

顯示如下。


如果希望一開始就有預設好選項,在該選項的<option>加上selected屬性。

<label for="blood">選擇血型:</label>
<select id="blood" name="blood" size="3">
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3" selected >AB</option> <!-- 此為預設的選項 -->
    <option value="4">O</option>
    <option value="5">其他</option>
</select>

以上即為<select>的基本用法。


參考:

沒有留言:

張貼留言