在HTML5中为输入控件指定预定义选项列表

HTML5中的输入控件经常需要提供一些预定义的选项列表，以帮助用户快速选择。本文将介绍如何为HTML5中的输入控件指定预定义选项列表。

1. 针对下拉列表的select标签

1.1 静态预定义选项

在select标签中，我们可以使用option标签来指定静态的预定义选项。例如：

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

在上述代码中，option标签中的value属性定义了该选项的值，在提交表单时会将该值作为参数传递给后台处理程序。而option标签中的文本则是显示在下拉列表中的内容。

1.2 动态预定义选项

有时候，我们需要根据用户的操作动态生成预定义选项。这时可以使用JavaScript动态修改select标签中的option标签。例如：

<select id="cars">
  <option value="">请选择</option>
</select>
<script>
  var carList = ["Volvo","Saab","Opel","Audi"];
  var select = document.getElementById("cars");
  for (var i = 0; i < carList.length; i++) {
    var option = document.createElement("option");
    option.text = carList[i];
    option.value = carList[i];
    select.appendChild(option);
  }
</script>

在上述代码中，我们首先创建了一个空的select标签，并设置其id为cars。然后使用JavaScript动态地生成了option标签，并将其添加到select标签中。由于我们设置了SELECT标签的ID，因此可以通过document.getElementById()方法获取到该标签的引用，从而方便地操作其子元素。

2. 针对单选框和复选框的input标签

对于单选框和复选框，我们可以通过指定value属性来定义每个选项的值。对于单选框，我们需要将它们的name属性设置为相同的值，以便在提交表单时只选中其中一个选项。例如：

<label>
  <input type="radio" name="gender" value="male"> Male
</label>
<label>
  <input type="radio" name="gender" value="female"> Female
</label>

在上述代码中，我们创建了两个单选框，它们的name属性都设置为gender，以便在提交表单时只选中其中一个。而每个单选框的value属性分别是male和female。

对于复选框，则可以使用相同的方式来定义各个选项的value属性。例如：

<label>
  <input type="checkbox" name="fruit" value="apple"> Apple
</label>
<label>
  <input type="checkbox" name="fruit" value="banana"> Banana
</label>
<label>
  <input type="checkbox" name="fruit" value="orange"> Orange
</label>

在上述代码中，我们创建了三个复选框，它们的name属性都设置为fruit，以便在提交表单时选中多个选项。而每个复选框的value属性分别是apple、banana和orange。

3. 总结

通过上述介绍，我们学会了如何在HTML5中为输入控件指定预定义选项列表。对于下拉列表，我们可以使用option标签来定义静态的预定义选项，也可以使用JavaScript动态地生成预定义选项。对于单选框和复选框，我们可以使用相同的方式来定义各个选项的value属性。