如何在HTML[+示例]中创建复选框

你想使你的表格尽可能容易填写．这就是复选框的用处。

复选框使订阅你的通讯或在你的网站上采取其他行动像勾选框一样简单。bob官网官方网站它们还允许用户在列表中选择一个或多个选项。这样就可以询问访问者他们是如何听说你的品牌的，他们的兴趣是什么，以及其他复杂的问题，而无需让他们打出冗长的回答。

这也使得访问者有可能采取更复杂的行动，比如同时注册多个时事通讯。bob官网官方网站下面是HubSpot表单的一个例子，它通过复选框实现了这一点。

现在，您已经了解了使用复选框的好处，让我们介绍一下在中创建复选框所需了解的所有内容超文本标记语言．

HTML复选框输入

在HTML中，复选框是一个类型属性定义为“checkbox”的。完整的语法是：

复选框通常也包含名称和值属性。提交表单时，此名称/值对将提交到服务器。

例如，假设一个带有复选框的表单询问某人是如何得知您的业务的。在这种情况下，每个输入元素的name属性可能是“source”。输入元素的值属性之一可能是instagram。所以提交到服务器的数据将是"source=instagram "

如果未指定值属性，则报告的值默认为“开”。

下面让我们看一些复选框的例子。

HTML复选框示例

假设您想问访客他们是如何听说您的业务的。游行例如，在订单确认页面中包含此表单。

您可以使用HTML复选框元素创建类似的内容。在下面的示例中，用户可以在列表中选择一个或多个选项。

看到笔了吗HTML复选框示例克里斯蒂娜·佩里康(@轮毂点)在代码笔．

选中HTML复选框

许多电子商务企业将显示一个在结账过程中预先选中的电子邮件选择加入复选框诺布尔遗址为例。

您可以使用checked boolean属性将复选框编码为在页面加载时预选。您只需添加单词检查在输入元素的开始标记内。

下面是一个默认选中复选框的例子:

看到笔了吗克里斯蒂娜·佩里康(@轮毂点)在代码笔．

HTML所需复选框

使用另一个布尔属性，您可以将复选框编码为必需。这意味着，用户在选中该复选框之前将无法提交表单。此属性通常应用于同意条款和条件的复选框。

例如,自动气象站要求用户阅读并同意AWS客户协议的条款。如果未选中此框，则无法继续注册过程。

您可以使用所需的布尔属性创建类似的内容。在下面的示例中，如果您单击按钮而不勾选该框，则会看到一条错误消息，提示“如果要继续，请勾选此框。”

看到笔了吗克里斯蒂娜·佩里康(@轮毂点)在代码笔．

HTML复选框大小

假设您想更改复选框的大小。您可以使用两种不同的方法进行更改。

第一个方法是在CSS中设置宽度和高度属性。在下面的例子中，我设置复选框的宽度和高度为10px。这使得复选框比默认的尺寸要小，默认的尺寸在Chrome中大约是13px * 13px。

看到笔了吗克里斯蒂娜·佩里康(@轮毂点)在代码笔．

第二种方法是使用CSS转换属性。具体来说，您将使用scale（）方法更改复选框的大小。无论您在括号内放置什么值，都会将复选框的大小增加或减少其原始大小的倍数。此方法适用于所有主要浏览器，包括Mozilla Firefox。在下面的示例中，我将transform属性设置为scale（1.5）使其为默认大小的1.5倍。

看到笔了吗HTML复选框大小[转换属性]克里斯蒂娜·佩里康(@轮毂点)在代码笔．

HTML复选框样式

您可以使用自定义CSS设置HTML复选框的样式。这将需要多个规则集，因为您必须隐藏浏览器的默认复选框，然后创建自定义复选框和自定义复选标记。但结果可能会使表单看起来更符合您的品牌。

例如，上的订单游泳具有一个复选框，当用户单击该复选框时，该复选框将变为黑色。

你可以在你的网站上创造类似的效果。下面是一个自定义复选框的例子，它的圆角边在选中时变成深蓝色:

看到笔了吗克里斯蒂娜·佩里康(@轮毂点)在代码笔．

编码复选框

复选框有助于改善用户填写表单的体验，这可能意味着你的网站上会有更多的转换。最好的是，它们很容易使用HTML和一些CSS进行编码。