HTML 复选框 - Html

HTML 复选框是一种常见的表单元素，允许用户在一组可选项中选择多个选项。在本文中，我们将讨论 HTML 复选框的基础知识和用法。

基本语法

HTML 复选框使用 <input> 元素来创建。 下面是创建复选框的基本语法：

<input type="checkbox" name="foo" value="bar">

上面的代码创建了一个名为 "foo" 的复选框，并为它设置了一个值 "bar"。当复选框被选中时，它将提交 "bar" 作为表单数据。

复选框属性

除了上面提到的属性以外，HTML 复选框还具有以下常用属性：

• checked - 当设置为 true 时，复选框将默认为选中状态。
• disabled - 当设置为 true 时，禁用复选框（禁止用户选择）。
• readonly - 当设置为 true 时，复选框将只读（不能修改）。
• required - 当设置为 true 时，必须选择一个选项才能提交表单。

复选框组

我们可以使用 HTML 表单元素来组织多个复选框到一个组中。下面是一个例子：

<label>
  <input type="checkbox" name="fruits" value="apple">
  Apple
</label>
<label>
  <input type="checkbox" name="fruits" value="banana">
  Banana
</label>
<label>
  <input type="checkbox" name="fruits" value="orange">
  Orange
</label>

上面的代码创建了一个名为 "fruits" 的复选框组，其中包含三个选项：苹果，香蕉和橙子。当用户选择其中一个或多个选项时，表单将提交所选水果的值。

取值和提交数据

在提交表单时，复选框的值将被提交为一个具有相同名称的数组。要获取选定的值，可以使用 JavaScript 或后端脚本来处理提交数据。

下面是 PHP 代码的例子，用于检索名为 "fruits" 的复选框组的值：

<?php
if (isset($_POST['fruits'])) {
  $fruits = $_POST['fruits'];
  foreach ($fruits as $fruit) {
    echo $fruit . '<br>';
  }
}
?>

结论

通过本文，我们学习了 HTML 复选框的基础知识和用法，包括创建基本复选框、复选框组、处理提交数据等。希望这篇文章对您有所帮助！