程序员教程

HTML复选框

复选框用于从一组选项中选择多个值。它们常见于表单、调查问卷和待办事项列表。本教程将介绍如何使用HTML创建和管理复选框。

创建一个简单的复选框

要添加复选框，我们使用 <input> 标签，并将 "type" 属性设置为 "checkbox"。以下是一个简单示例：

                <label for="interest_music">音乐：</label>
                <input type="checkbox" id="interest_music" name="interest" value="music" />
                <label for="interest_movies">电影：</label>
                <input type="checkbox" id="interest_movies" name="interest" value="movies" />
                

此代码段会创建一个包含两个复选框（音乐和电影）的组。

设置复选框属性

<input> 标签支持一些属性以改善用户体验。以下是几个常用属性：

• checked：设置复选框默认选中状态。
• disabled：禁用复选框，用户无法与其交互。

                <label for="feature_enabled">启用功能：</label>
                <input type="checkbox" id="feature_enabled" name="feature" value="enabled" checked disabled />
                

在上述示例中，"启用功能" 复选框默认选中且被禁用。

使用复选框组

复选框允许用户选择多个选项，因此没有必要使它们具有相同的 "name" 属性。但是为了保持一致性，通常将相关复选框的名称设置为相似。以下是一个复选框组的示例：

                <fieldset>
                <legend>选择你喜欢的运动：</legend>
                <label for="sport_basketball">篮球</label>
                <input type="checkbox" id="sport_basketball" name="sport" value="basketball" />
                <label for="sport_football">足球</label>
                <input type="checkbox" id="sport_football" name="sport" value="football" />
                <label for="sport_tennis">网球</label>
                <input type="checkbox" id="sport_tennis" name="sport" value="tennis" />
                </fieldset>
                

在此示例中，我们使用 <fieldset> 对复选框组进行分组，并使用 <legend> 标签为组添加标题。

样式定制

您可以通过内联CSS样式或外部CSS文件来设置复选框的样式。需要注意的是，自定义复选框样式的方法因浏览器而异，可能较为复杂。一种通用方法是隐藏原始复选框并使用伪元素创建自定义样式。以下是一个简单的内联样式示例：

                <style>
                .custom-checkbox input[type="checkbox"] {
                display: none;
                }
                .custom-checkbox label:before {
                content: "";
                display: inline-block;
                width: 16px;
                height: 16px;
                margin-right: 4px;
                border: 1px solid gray;
                }
                .custom-checkbox input[type="checkbox"]:checked + label:before {
                content: "✔";
                text-align: center;
                line-height: 16px;
                }
                </style>

                <div class="custom-checkbox">
                <label for="option_a"><input type="checkbox" id="option_a" name="options" value="a" />选项A</label>
                <label for="option_b"><input type="checkbox" id="option_b" name="options" value="b" />选项B</label>
                </div>
                

上述示例将原始复选框隐藏，并使用伪元素创建矩形样式。选中的复选框显示一个对号。

总结

通过本教程，您已经学会了如何使用HTML创建和管理复选框、设置属性以改善用户体验、创建复选框组以及定制样式。