HTML多選詳解

一、HTML多選框

HTML多選框可以讓用戶從一組選項中選擇多個選項。當需要讓用戶選取多個選項時可以使用多選框。多選框是指由1個或多個方框組成的控制項，在其中可以選擇0至全部的選項。

<form action="#">
  <label for="fruit">請選擇您喜歡的水果:</label>
  <input type="checkbox" name="fruit" value="apple">蘋果<br>
  <input type="checkbox" name="fruit" value="banana">香蕉<br>
  <input type="checkbox" name="fruit" value="orange">橘子<br>
</form>

上述代碼示例中創建了一個簡單的多選框表單，用戶可以選擇其喜歡的水果或多種水果。

二、HTML實現多選下拉框

HTML實現多選下拉框是一種用戶可以展開並選擇多個選項的控制項。多選下拉框允許同時選擇多個值。

<select id="fruits" multiple>
  <option value="apple">蘋果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橘子</option>
  <option value="pear">梨子</option>
</select>

上述代碼示例中創建了一個帶有多選選項的下拉框。用戶可以展開下拉框並按住Shift或Ctrl與滑鼠單擊來選擇多個選項。

三、HTML多選代碼

HTML多選代碼是指多選框的HTML代碼。要使用多選框，需要使用元素。多個多選框需要指定相同的name屬性，而每個多選框的值必須是唯一的。

<input type="checkbox" name="vehicle" value="Bike">自行車<br>
<input type="checkbox" name="vehicle" value="Car">汽車<br>
<input type="checkbox" name="vehicle" value="Boat">船<br>
<input type="checkbox" name="vehicle" value="Plane">飛機

上述代碼示例中創建了一個多選框列表，用戶可以選擇其旅行的交通工具。

四、HTML多選按鈕和單選按鈕

HTML多選按鈕和單選按鈕是兩種可以選擇多個選項或僅選擇一個選項的控制項。

<input type="radio" name="gender" value="male">男性<br>
<input type="radio" name="gender" value="female">女性<br>
<input type="radio" name="gender" value="other">其他<br>

<input type="checkbox" name="fruit" value="apple">蘋果<br>
<input type="checkbox" name="fruit" value="banana">香蕉<br>
<input type="checkbox" name="fruit" value="orange">橘子<br>
<input type="checkbox" name="fruit" value="pear">梨子

HTML單選按鈕只允許用戶選擇單個選項，而多選按鈕允許用戶選擇多個選項。

五、HTML多選框自動選中

HTML多選框自動選中是指通過設置checked屬性來自動選中多選框。

<form action="#">
  <label for="fruit">請選擇您喜歡的水果:</label>
  <input type="checkbox" name="fruit" value="apple" checked>蘋果<br>
  <input type="checkbox" name="fruit" value="banana">香蕉<br>
  <input type="checkbox" name="fruit" value="orange">橘子<br>
</form>

上述代碼示例中將”蘋果”多選框設置為自動選中，而其他選項則需要用戶手動選擇。

六、HTML多選框彈窗

HTML多選框彈窗是一種用戶可以從彈窗中選擇多個選項的控制項。

<form action="#">
  <button onclick="myFunction()">選擇水果</button>
  <input type="text" id="selected-fruit" readonly>
</form>

<script>
function myFunction() {
  var fruits = prompt("請選擇您喜歡的水果", "蘋果,香蕉,橘子");
  document.getElementById("selected-fruit").value = fruits;
}
</script>

上述代碼示例中，用戶點擊按鈕後，彈窗會顯示可供選擇的水果選項。用戶選擇完成後，選項將顯示在文本框中。

七、HTML多選下拉框

HTML多選下拉框是一種用戶可以展開並選擇多個選項的控制項。多選下拉框允許同時選擇多個值。

<select id="fruits" multiple>
  <option value="apple">蘋果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橘子</option>
  <option value="pear">梨子</option>
</select>

上述代碼示例中創建了一個帶有多選選項的下拉框。用戶可以展開下拉框並按住Shift或Ctrl與滑鼠單擊來選擇多個選項。

八、HTML多選列表

HTML多選列表是一種用戶可以從多個選項中選擇多個選項的列表控制項。

<form action="#">
  <label for="fruit">請選擇您喜歡的水果:</label>
  <select id="fruit" name="fruit" multiple size="4">
    <option value="apple">蘋果</option>
    <option value="banana">香蕉</option>
    <option value="orange">橘子</option>
    <option value="pear">梨子</option>
  </select>
  <br>
  <input type="submit">
</form>

上述代碼示例中創建了一個多選列表，其中用戶可以從多個選項中選擇多個選項。