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>

上述代码示例中创建了一个多选列表，其中用户可以从多个选项中选择多个选项。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/243060.html