HTML表单怎么实现问卷调查每题必选校验-html教程-PHP中文网

用 required 属性可实现单选题必选原生校验，需为同一 name 的所有 radio 都加 required；多选题 checkbox 不支持“至少选一”的原生校验，须用 js 拦截 submit 并统计 checked 数量；select 必须配合 disabled selected 的空 option 才能触发 required 校验。

html表单怎么实现问卷调查每题必选校验

用 `required` 属性最简实现单选/多选必选

浏览器原生校验能直接拦截提交，不用写 JS 就能保证每题至少选一项。关键在于：只有带 required 的表单控件在为空时才会触发校验提示。

对单选题（<input type="radio">），必须让同一 name 下的所有选项都加 required —— 否则只给其中一个加，用户不选它但选了其他同名项，校验就通过了；而浏览器实际只检查「该组是否有任意一个被选中」，所以全部加是安全写法。

<input type="radio" name="q1" value="a" required>
<input type="radio" name="q1" value="b" required>
<input type="radio" name="q1" value="c" required>

多选题（<input type="checkbox">）通常不适用 required，因为「至少选一个」无法靠单个控件的 required 表达——它只校验该 checkbox 是否被勾选，而不是整组。这时候得用 JS。

Checkbox 多选题“至少选一个”的 JS 校验逻辑

HTML 原生不支持“一组 checkbox 中至少选 N 个”，必须用 JS 拦截 submit 事件并手动检查。

核心思路：获取所有同名 checkbox，统计 checked 数量，小于最小值就 event.preventDefault() 并提示。

document.querySelector('form').addEventListener('submit', function(e) {
  const checks = document.querySelectorAll('input[name="q2"]:checked');
  if (checks.length === 0) {
    e.preventDefault();
    alert('第2题至少选择一项');
  }
});

注意点：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

用 querySelectorAll('input[name="q2"]:checked') 直接拿已勾选项，比遍历再判断 checked 更简洁
别用 getElementsByName，它返回的是 HTMLCollection，不支持 forEach，且类型判断更麻烦
如果题目允许「选 2 项以上」，把 === 0 改成 即可

下拉框（`<select></select>`）怎么设默认空选项并强制选择

<select></select> 必须配合一个禁用且选中的空 <option></option>，再加 required，才能真正实现“非空选择”。

错误写法：<select required><option value="a">A</option></select> —— 浏览器会把第一个 option 当作默认值，即使没显式 selected，也会通过校验。

正确写法：

<select name="q3" required><option value="" disabled selected>请选择</option>
<option value="x">选项X</option>
<option value="y">选项Y</option></select>

disabled 防止用户选中这个空项（否则提交时值为空，但校验仍通过）
selected 让它初始显示，提升体验
value 为空字符串 ""，配合 required 才会触发校验失败

校验失败后用户看不到提示？检查这几个地方

原生 required 提示依赖浏览器行为，但容易被隐藏或失效：

CSS 里写了 input:invalid { border: none; } 之类重置样式，可能掩盖红色边框和 tooltip
表单用了 display: none 切换页面，而校验只在 visible 元素上触发 —— 需要手动调用 checkValidity() 并处理 invalid 事件
移动端 Safari 对 required 的 tooltip 支持不稳定，建议加 JS fallback 提示（比如在 input 下方插入 <div class="error"></div>）
如果用了 formnovalidate 按钮（如“暂存”），确保它不会干扰主提交按钮的校验逻辑