带有复选框的表单 - Html

在HTML中，我们可以使用复选框(input type="checkbox")来允许用户选择多个选项。通常用于让用户从多个选项中选择一个或多个选项。

基本语法

<input type="checkbox" name="checkbox_name" id="checkbox_id" value="checkbox_value">
<label for="checkbox_id">Checkbox Label</label>

在上述代码片段中，我们使用了input标签来创建了一个复选框，其中type属性设置为"checkbox"，name属性用于存储答案，id属性与label标签中的for属性相对应，value属性用于提交表单时的值。同时，我们使用了label标签来标识该复选框的含义。

支持多选

要支持多选，我们只需在表单中添加多个复选框即可。

<input type="checkbox" name="checkbox_name" id="checkbox_id_1" value="checkbox_value_1">
<label for="checkbox_id_1">Checkbox Label 1</label>

<input type="checkbox" name="checkbox_name" id="checkbox_id_2" value="checkbox_value_2">
<label for="checkbox_id_2">Checkbox Label 2</label>

在上例中，我们添加了两个复选框并使用同一name属性，这意味着所选的选项将作为一个数组传递给后端处理程序。

设置默认选中

在有些场景下，我们希望在初始加载时有一些复选框被预选中。我们可以为复选框添加checked属性来实现这一目的。

<input type="checkbox" name="checkbox_name" id="checkbox_id_1" value="checkbox_value_1" checked>
<label for="checkbox_id_1">Checkbox Label 1</label>

<input type="checkbox" name="checkbox_name" id="checkbox_id_2" value="checkbox_value_2">
<label for="checkbox_id_2">Checkbox Label 2</label>

在上述例子中，第一个复选框将被默认选中。

获取选中值

在提交表单时，我们可以通过在HTML表单中添加一个submit按钮以及后端处理程序来获取所有选中的复选框的值。

<form action="your_backend_handle.php" method="post">
    <input type="checkbox" name="checkbox_name[]" id="checkbox_id_1" value="checkbox_value_1">
    <label for="checkbox_id_1">Checkbox Label 1</label>

    <input type="checkbox" name="checkbox_name[]" id="checkbox_id_2" value="checkbox_value_2">
    <label for="checkbox_id_2">Checkbox Label 2</label>

    <input type="submit" value="Submit">
</form>

在上述代码片段中，我们使用了form标签和一个submit按钮，来完成表单提交操作。同时，我们的checkbox_name属性为数组，这将允许我们获取所有选中的复选框的值。

结束语

在HTML中，我们可以使用复选框来允许用户从多个选项中选择一个或多个选项。我们可以轻松地通过表单提交程序获取所有选中的复选框的值。