HTML 必填复选框

在表单中，有时需要强制用户填写某个选项。HTML 中的必填复选框可以让用户只有在勾选这个选项时才能提交表单。本文将介绍如何创建必填复选框。

HTML 必填复选框代码示例

<form>
  <label>
    <input type="checkbox" name="agree" required>
    我同意相关条款和条件
  </label>
  <br>
  <button type="submit">提交表单</button>
</form>

必填复选框需要设置 required 属性才能生效。上面的代码演示了如何创建一个必填复选框。当用户没有勾选这个复选框时，提交按钮将会被禁用。

工作原理

必填复选框的工作原理与必填文本框类似。当用户未填写必填复选框时，浏览器会显示一个错误提示，提示用户必须勾选这个复选框才能提交表单。

必填复选框的错误提示可以通过 CSS 自定义。下面的代码演示了如何自定义必填复选框的错误提示：

input:required:invalid {
  border-color: red;
}
input:required:valid {
  border-color: green;
}
input:required:invalid + span::before {
  content: '必填';
  color: red;
}

上面的代码将在必填复选框未勾选时将复选框的边框颜色设置为红色，并在复选框下方显示一个“必填”提示。

总结

必填复选框可以帮助实现表单的强制填写功能。在使用必填复选框时，请确保清楚地告知用户勾选该复选框的含义，以及未勾选该复选框将导致无法提交表单。