HTML 多复选框列表

HTML 多复选框列表是用于允许用户选择多个选项的常见表单控件之一。它可以方便地从预定义的选项中选择多个选项，并将其作为表单数据提交到服务器。

基本结构

HTML 多复选框列表的基本结构包含一个 <ul> 元素和多个 <li> 元素，每个 <li> 元素包含一个 <label> 元素和一个 <input> 元素。<label> 元素用于显示选项文本，<input> 元素用于获取选择状态。

以下是基本的 HTML 结构：

<ul>
  <li>
    <label><input type="checkbox" name="option1" value="1"> 选项 1</label>
  </li>
  <li>
    <label><input type="checkbox" name="option2" value="2"> 选项 2</label>
  </li>
  <li>
    <label><input type="checkbox" name="option3" value="3"> 选项 3</label>
  </li>
</ul>

属性详解

• type="checkbox"：定义复选框类型。
• name：定义表单数据提交时的参数名。
• value：定义表单数据提交时的参数值。
• checked：定义该复选框是否选中。

样式定制

多复选框列表的样式可以通过 CSS 进行定制。一般可以设置选中状态和非选中状态的样式，以及鼠标悬停时的样式，使用如下 CSS 代码：

/* 多复选框列表样式 */
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  margin: 5px 0;
  padding: 0;
}

/* 给每个复选框添加样式 */
input[type=checkbox] {
  margin-right: 5px;
}

/* 设置选中状态下的样式 */
input[type=checkbox]:checked + label {
  color: #f00; /* 设置选中状态label字体颜色为红色 */
}

/* 设置非选中状态下的样式 */
input[type=checkbox] + label {
  color: #666; /* 设置非选中状态label字体颜色为灰色 */
}

/* 设置鼠标悬停状态下的样式 */
input[type=checkbox] + label:hover {
  text-decoration: underline; /* 鼠标悬停时添加下划线 */
}

总结

HTML 多复选框列表是一个非常常见和实用的表单控件，可以允许用户选择多个选项，并将其作为表单数据提交到服务器。通过 CSS 可以方便地对复选框列表进行样式定制。