输入标签复选框 - HTML

简介

HTML提供了一种输入类型为复选框的表单元素，允许用户从一组选项中选择多个选项。

代码示例

<form action="#">
  <input type="checkbox" name="example" value="1" checked>
  <label for="example">Example 1</label>

  <br>

  <input type="checkbox" name="example" value="2">
  <label for="example">Example 2</label>

  <br>

  <input type="checkbox" name="example" value="3">
  <label for="example">Example 3</label>
</form>

代码解释

• <form>标签：用于创建一个表单。
• <input>标签：用于创建输入控件，在这里指复选框。
• type="checkbox"：指定输入控件的类型为复选框。
• name属性：指定控件的名称，也用于将输入传递给服务器。
• value属性：指定选择此复选框时将发送到服务器的值。
• checked属性：指定复选框应在页面加载时处于选中状态。
• <label>标签：用于将文本标记为与一个输入控件相关联。
• for属性：指定与该标签相关联的控件的id。

效果展示

效果图如下所示：

总结

复选框是表单设计中经常使用的一种元素，可以让用户选择一个或多个选项。在HTML中，复选框通过<input>元素的type属性设置为checkbox来创建。在使用多个复选框时，需要为每个复选框指定不同的name属性，以便将输入传递给服务器。配合<label>元素使用时，可提高输入体验和交互性。