选择选项 HTML

当我们需要让用户从一组预定义的选项中进行选择时，可以使用HTML提供的<select>和<option>元素，实现下拉选项和单选或多选框。

下拉选项

下拉选项通常用于提供多个选项，但只允许用户选择其中一个选项。

<select>
  <option value="">请选择一个选项</option>
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

上面的代码定义了一个包含四个选项的下拉列表，第一个选项是默认选项，其value值为空。当用户选择其中一个选项时，浏览器会将所选选项的value值作为表单元素的值提交到服务器。

单选框

单选框用于提供多个选项，但只允许用户选择其中一个选项。

<label><input type="radio" name="option" value="option1">选项1</label><br>
<label><input type="radio" name="option" value="option2">选项2</label><br>
<label><input type="radio" name="option" value="option3">选项3</label><br>

上面的代码定义了三个单选框，它们都有相同的表单元素名称。当用户选择其中一个选项时，浏览器会将所选选项的value值作为表单元素的值提交到服务器。

多选框

多选框用于提供多个选项，允许用户选择其中一个或多个选项。

<label><input type="checkbox" name="option" value="option1">选项1</label><br>
<label><input type="checkbox" name="option" value="option2">选项2</label><br>
<label><input type="checkbox" name="option" value="option3">选项3</label><br>

上面的代码定义了三个多选框，它们都有相同的表单元素名称。当用户选择其中一个或多个选项时，浏览器会将所选选项的value值作为表单元素的值提交到服务器。

以上是HTML中实现选择选项的三种元素，它们分别用于定义下拉选项、单选框和多选框。通过它们我们可以实现各种选择选项的交互，提升用户体验。