如何制作 HTML 复选框

HTML 复选框概述

HTML 复选框是一种表单元素，允许用户选择多个选项。每个复选框都有一个关联的值，如果该复选框被选中，该值将被提交到服务器。HTML 复选框可以与标签<label>结合使用，以便在单击文本或复选框时选中。

制作 HTML 复选框

要创建 HTML 复选框，您需要使用标签<input>。在<input>标签中，将属性type设置为checkbox将创建复选框。将属性name设置为识别复选框的名称，将属性value设置为复选框关联的值。

以下是 HTML 复选框的代码示例：

<input type="checkbox" name="option1" value="Option 1"> Option 1
<input type="checkbox" name="option2" value="Option 2"> Option 2
<input type="checkbox" name="option3" value="Option 3"> Option 3

此代码将创建三个复选框，它们的名称为option1，option2和option3，分别关联的值为Option 1，Option 2和Option 3。

搭配标签<label>

为了显示文本，并使文本和复选框成为单个组，您还可以使用标签<label>。将标签<label>的for属性设置为与复选框id属性相同的值，以便单击文本或复选框时选中。

以下是 HTML 复选框与标签<label>一起使用的代码示例：

<label for="option1"><input type="checkbox" id="option1" name="option1" value="Option 1"> Option 1</label>
<label for="option2"><input type="checkbox" id="option2" name="option2" value="Option 2"> Option 2</label>
<label for="option3"><input type="checkbox" id="option3" name="option3" value="Option 3"> Option 3</label>

此代码将创建三个带标签<label>的复选框，使其在单击文本或复选框时选中。

结论

制作 HTML 复选框非常简单，只需使用标签<input>将属性type设置为checkbox，并将属性name设置为识别复选框的名称，将属性value设置为复选框关联的值。要使用标签<label>，只需将其for属性设置为与复选框id属性相同的值。