数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在HTML表单中添加复选框？
复选框是HTML输入标签的一个特性。它们显示为正方形的框，前端用户可以动态地选中。当我们希望用户提供多种输入时，HTML复选框非常有用。当用户面对复选框查询时，通过选中或勾选这些文本框，选择他们想要的项目。当提交表单时，选中复选框的数据会被收集并存储在后台。
通常，复选框可以处于三种状态之一：选中、未选中或不确定。当用户可以选择多个选项时，在表单中这是必要的。在深入探讨本文之前，让我们快速了解一下HTML <input type="checkbox">。
HTML <input type="checkbox">
使用HTML <input type="checkbox">标签创建复选框字段。复选框显示为一个正方形的框，选中时处于活动状态。用户可以选择几个可用选项中的一种或多种选项。
语法
以下是HTML复选框标签的语法
<input type="checkbox">
示例
在下面的示例中，我们将使用HTML创建一个简单的复选框表单。
<!DOCTYPE html>
<html>
<body style="text-align: center; font-family:verdana">
<h2 style="color:#58D68D ;"> HTML CheckBox </h2>
<form style="color:#DE3163">
<input type="checkbox" name="vehicle" value="car"> CAR <input type="checkbox" name="vehicle" value="bike"> BIKE <input type="checkbox" name="vehicle" value="aeroplane"> AEROPLANE <br>
<br>
<input type="submit" value="SUBMIT">
</form>
</body>
</html>
运行上面的代码后，它将生成一个输出，其中包含在网页上显示的带有复选框的选项，允许用户选择选项并提交表单。
示例
让我们来看下面的例子，我们将设置表单中复选框的默认值。
<!DOCTYPE html>
<html>
<body style="text-align: center; font-family:verdana">
<form style="color:#7D3C98 ">
<p>Places To Visit : </p>
<input type="checkbox" name="place" value="Shimla"> SHIMLA <input type="checkbox" name="place" value="Ooty"> OOTY <input type="checkbox" name="place" value="Coorg" checked> COORG <br>
<br>
<input type="submit" value="SUBMIT">
</form>
</body>
</html>
运行上面的代码后，输出窗口将弹出，显示复选框，其中一个默认选中，显示在网页上，还有一个提交按钮。
示例
考虑另一种情况，我们将禁用表单中的复选框。
<!DOCTYPE html>
<html>
<body style="text-align: center; font-family:verdana">
<h2 style="color:#27AE60 ">HTML disabled CheckBox</h2>
<form style="color:#7D3C98 ">
<p>Choose The Course :</p>
<input type="checkbox" name="course" value="html"> HTML <input type="checkbox" name="course" value="python"> PYTHON <input type="checkbox" name="course" value="java" disabled> JAVA <br>
<br>
<input type="submit" value="SUBMIT">
</form>
</body>
</html>
运行上面的代码后，它将生成一个输出，其中包含在网页上显示的禁用复选框以及一个提交按钮。
更新于：2024年1月19日
浏览量：142
广告