HTML checkbox标签

HTML checkbox标签是一种用于创建复选框的HTML元素。 复选框允许用户从可用选项中选择一个或多个选项。

语法

下面是HTML checkbox标签的语法：

<input type="checkbox" name="checkboxName" value="value">

标签属性说明：

• type：必需，标签的类型。此处应为“checkbox”。
• name：可选，复选框的名称。此名称用于标识在表格提交到服务器时勾选了哪些复选框。
• value：可选，复选框的值。如果用户选择复选框，则值将被提交到服务器。

示例

下面是一个HTML checkbox标签的简单示例：

<form>
  <label>
    <input type="checkbox" name="option1" value="1">
    Option 1
  </label>
  <br>
  <label>
    <input type="checkbox" name="option2" value="2">
    Option 2
  </label>
  <br>
  <label>
    <input type="checkbox" name="option3" value="3">
    Option 3
  </label>
  <br>
  <input type="submit" value="Submit">
</form>

在此示例中，我们创建了三个复选框，每个复选框都有一个不同的名称和值。 当用户选择复选框并提交表单时，选中的复选框的值将被提交到服务器。

定制复选框

可以使用CSS样式对复选框进行样式。

例如，通过使用以下代码，创建一个圆形的、颜色为蓝色的复选框：

input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  margin-right: 5px;
  position: relative;
  top: 5px;
}

input[type=checkbox]:checked::before {
  content: "✔";
  display: block;
  width: 20px;
  height: 20px;
  background-color: #007fff;
  color: #fff;
  text-align: center;
  line-height: 20px;
  position: absolute;
  top: -1px;
  left: -1px;
  border-radius: 50%;
}

结论

HTML checkbox标签是一种用于创建复选框的HTML元素。 通过HTML checkbox标签，开发人员可以轻松地创建一组选项供用户选择。 可以使用CSS样式自定义复选框的外观和行为，以适应特定的需求。