Menu
CoddyTech

复选框

本课属于 Coddy HTML 学习旅程的“基础知识”单元。第 42 课,共 60 课。

在 HTML 中,复选框用于创建一组选项,让用户可以从中选择多个选项。复选框使用 <input> 标签创建,并将 type 属性设置为 "checkbox"。

以下是在 HTML 中创建复选框的基本语法:

<input type="checkbox" id="option1" name="checkboxgroup" value="option1">
<label for="option1">Option 1</label>
  • <input>:定义输入字段的标签。
  • type="checkbox":指定输入类型为复选框的属性。
  • id:为复选框指定唯一标识符的属性。
  • name:用于将复选框分组的属性。与单选按钮不同,多个具有相同 name 的复选框可以同时选中。
  • value:用于指定与复选框关联的值的属性。提交表单时,此值会发送到服务器。
  • <label>:为复选框提供可点击标签的标签。标签的 for 属性应与复选框的 id 属性匹配。

下面是创建一组选项框的示例:

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

在这个示例中,我们有一个包含三个复选框的表单。它们属于同一组,因为它们共享相同的 name 属性("mygroup")。每个复选框都有唯一的 id 和 value,以及对应的标签。当用户选择一个或多个选项并提交表单时,所选复选框的值会发送到服务器。

challenge icon

挑战

简单

创建一个 HTML 文档,其中包含一个带有一组复选框的表单。表单应包含以下元素:

  1. 一个 <form> 标签。
  2. 在表单中,创建一组包含三个复选框的选项组,名称为 "toppings"。
  3. 第一个复选框的 id 为 "cheese",值为 "cheese",并带有文本为 "Cheese" 的标签。
  4. 第二个复选框的 id 为 "pepperoni",值为 "pepperoni",并带有文本为 "Pepperoni" 的标签。
  5. 第三个复选框的 id 为 "mushrooms",值为 "mushrooms",并带有文本为 "Mushrooms" 的标签。
  6. 在每个标签后添加一个 <br> 标签,以换行。

亲手试试

<!DOCTYPE html>
<html>
    <body>
        <!-- 在这里编写代码 -->
    </body>
</html>
quiz icon自我测试

这节课包含一个小测验。开始学习即可作答,并记录你的进度。

基础知识中的所有课

自己练习: Web 在线编辑器