当前位置：翔宇亭IT乐园 → IT知识库 → WEB → HTML

HTML中定义多选按钮

减小字体

增大字体作者：本站来源：本站整理发布时间：2023-07-20 11:38:20

在HTML中，<input>元素的type属性值设置为checkbox时则可以定义一个复选按钮。大多数浏览器默认情况下将该控件渲染为一个小正方向方框，用户选中时，小正方形中将会出现一个√。当然不同的浏览器在渲染时会有不同的风格。

HTML chexbox

HTML中复选框的定义形式

在HTML中，使用如下的方法来定义复选框：

<input type="checkbox" id="fx1" name="hobby" value="v1">

其中，type属性给出定义的输入控件类型为复选按钮。

id属性用于标识复选框，可以用于Javascript脚本获取某个复选框或使用CSS类来定义其显示效果。

name属性是用于复选框分组，同时当表单提交到服务器端时，服务器端脚本可以接收该组中用户选中的值。

value属性用于给出该单选按钮代表的值，当该复选按钮选中时，服务器端可以通过name属性的值接收到该值。

复选按钮的value属性

value属性定义复选框代表的值。该值不会显示在客户端，但在表单提交时，服务器端通过复选框的name属性可以获取到该值（如果该复选框被选中了的话）。

下面的例子中演示了复选框的定义及value属性的使用方法。

<form action="form_example.asp" method="post" id="form1">

  <p>是否已阅读相关条款：</p>

  <label><input type="checkbox" name="read" value="1">已阅读</label><br>

  <input type="submit">

</form>

在本例中定义了一个名为read的复选框，其值为1，当表单提交时，将以name=value的形式传递到服务器端进行接收和处理。

该例的浏览效果如下图所示：

html checkbox value属性

当忽略value属性值时，复选框的默认值为on，这与单选按钮的情况相同。

复选框的checked属性

复选框的checked属性是一个布尔值，用于设置该复选框在页面加载后，默认情况下是否被选中。

只有被选中的复选框的值才会被提交到服务器端。

下面的例子演示了复选框checked属性的使用方法。

<form action="form_example.asp" method="post" id="form2">

  <p>您听过的歌曲：</p>

  <label><input type="checkbox" name="songs" value="今天" checked>今天</label>

  <label><input type="checkbox" name="songs" value="大海">大海</label><br>

  <input type="submit">

</form>

该例在浏览器中的浏览效果如下图所示：

html checkbox checked属性

使用label元素增加复选框的可选区域

上面的例子中都使用了label元素增加了复选框的可选区域，下面的例子演示了两种使用label元素增加可选区域的方法，同时给出了不使用label元素的效果。

<form action="form_example.asp" method="post" id="form3">

  <p>您的爱好有：</p>

  <input type="checkbox" name="hobby" id="h1" value="足球">足球(未使用label)<br>

  <label><input type="checkbox" id="h2" name="hobby" value="跑步">跑步(方式1)</label>

  <br>

  <input type="checkbox" id="h3" name="hobby" value="唱歌"><label for="h3">唱歌(方式2)</label>

 <br>

 <input type="submit">

</form>

上例的效果如下图所示：

HTML checkbox应用label元素

在上例中，用户点击文字“足球(未使用label)”时，不会选中该复选框，只有点击方框时才能选中，而另外两个运用label标签的复选框可以通过点击文字选中。说明运用了label元素后，可以扩大用户的选择区域，方便用户选中相关项。

使用name属性对复选框进行分组

在实际中，往往会出现很多意义相关的复选框分组。如多选题，每个题目都可以有多个选项，为了区分不同的题目，需要对复选框进行分组。

与HTML 单选框相同的是是使用name属性来对复选框进行分组，下例演示了具体用法：

<form action="form_example.asp" method="post" id="form4">

  <p>您喜欢的球类运动有：</p>

  <label><input type="checkbox" name="ball" value="basketball">篮球</label>

  <label><input type="checkbox" name="ball" value="football">足球</label>

  <label><input type="checkbox" name="ball" value="pingpang">乒乓球</label>

  <p>您喜欢的歌曲有：</p>

  <label><input type="checkbox" name="songs" value="今天">今天</label>

  <label><input type="checkbox" name="songs" value="大海">大海</label><br><br>

  <input type="submit">

</form>

本例的显示效果如下图所示：

html checkbox name属性

当表单提交后，服务器端可以通过名称获取到用户选择的项的value值。

为复选框指定required属性

复选框中的required属性与单选按钮中的required属性作用不完全相同。

在复选框分组中，当设置了required属性的项未选中时，在提交表单时将给出提示，并禁止提交表单。

<form action="form_example.asp" method="post" id="form5">

  <p>您喜欢的球类运动有：</p>

  <label><input type="checkbox" name="ball" required value="basketball">篮球</label>

  <label><input type="checkbox" name="ball" value="football">足球</label>

  <label><input type="checkbox" name="ball" value="pingpang">乒乓球</label>

  <p>您喜欢的歌曲有：</p>

  <label><input type="checkbox" name="songs" value="今天">今天</label>

  <label><input type="checkbox" name="songs" value="大海">大海</label><br><br>

  <input type="submit">

</form>