1. 多選與清單
HTML 表單提供了多種方式來讓使用者與網頁互動。除了文字框和按鈕之外，表單還支援多選元素和清單，這些元素能讓資料輸入更靈活、更便利。今天我們就來認識一下它們吧。
在 HTML 中，表單有幾種方式來建立帶有選擇列表的元素。最常見的元素是 <select> 和 <option>，另外還有 checkbox 和 radio 按鈕。
下拉清單：<select> 和 <option>
標籤 <select> 創建了下拉清單，而 <option> 被用來為這個清單添加選項。使用者可以從清單中選擇一個或多個選項。
單選項：默認情況下，<select> 僅允許選擇一個選項。
HTML
<label for="country">選擇國家:</label>
<select id="country" name="country">
<option value="ru">俄羅斯</option>
<option value="us">美國</option>
<option value="de">德國</option>
</select>
HTML
<label for="country">選擇國家:</label>
<select id="country" name="country">
<option value="ru">俄羅斯</option>
<option value="us">美國</option>
<option value="de">德國</option>
</select>
多選項：如果添加屬性 multiple，使用者可以按住 Ctrl（在 Windows 系統）或 Cmd（在 Mac 系統）的同時點擊來選擇多個選項。
HTML
<label for="languages">選擇語言:</label>
<select id="languages" name="languages" multiple>
<option value="ru">俄語</option>
<option value="en">英語</option>
<option value="de">德語</option>
</select>
HTML
<label for="languages">選擇語言:</label>
<select id="languages" name="languages" multiple>
<option value="ru">俄語</option>
<option value="en">英語</option>
<option value="de">德語</option>
</select>
在這種情況下，選中的多個元素的資料會以數組形式發送到伺服器。
Checkbox：<input type="checkbox">
Checkbox 是允許使用者從提供的選項中選擇一個或多個選項的元素。每個 checkbox 都是通過標籤 <input type="checkbox"> 創建的。
HTML
<label><input type="checkbox" name="interests" value="sports"> 運動</label>
<label><input type="checkbox" name="interests" value="music"> 音樂</label>
<label><input type="checkbox" name="interests" value="travel"> 旅行</label>
HTML
<label><input type="checkbox" name="interests" value="sports"> 運動</label>
<label><input type="checkbox" name="interests" value="music"> 音樂</label>
<label><input type="checkbox" name="interests" value="travel"> 旅行</label>
如果所有的 checkbox 都有相同的屬性 name，那麼在提交表單時，每個被選中的 checkbox 的資料都會以數組形式發送。
Radio 按鈕：<input type="radio">
Radio 按鈕允許使用者在一組中僅選擇一個選項。具有相同屬性 name 的 Radio 按鈕會被組合成一組，使用者只能在這組中選擇一個選項。
HTML
<p>選擇性別:</p>
<label><input type="radio" name="gender" value="male"> 男性</label>
<label><input type="radio" name="gender" value="female"> 女性</label>
HTML
<p>選擇性別:</p>
<label><input type="radio" name="gender" value="male"> 男性</label>
<label><input type="radio" name="gender" value="female"> 女性</label>
Radio 按鈕特別適合於固定選項的選擇，比如「是」或「否」、性別、年齡組別等。
GO TO FULL VERSION