用原生HTML可直接构建可提交的选择题:需确保同组单选按钮name相同(如name="q1")、各value有具体值(如value="A"),用label包裹input或for/id关联以支持点击文字选择;加required时只需任一radio添加且name一致,浏览器自动校验整组是否选中;横向排列可用label style="display:inline"实现;提交数据通过form的action和method发送,GET方式可在URL查看参数。

怎么用 <form> 搭出能提交的选择题
直接用原生 HTML 就能做出可提交的选择题,不需要 JavaScript 也能跑。关键是把 <form>、<input type="radio"> 和 <label> 搭对位置,否则点不中选项或提交不了。
常见错误:把 name 属性写成不同值,导致多个单选按钮互不影响;或者漏掉 value,后端收不到答案。
-
<input type="radio">必须同组用相同name(比如name="q1"),才能保证单选互斥 - 每个选项的
value要写具体值(如value="A"),别留空或只写中文,后端靠它识别答案 - 用
<label>包住<input>或用for+id关联,不然点文字没反应 -
<form>的action写接收地址(测试时可用action="#"看表单是否触发)
为什么 required 加了还是能提交空选项
因为 required 只作用于第一个 <input>,不是整组。单选题里“必须选一个”的逻辑得靠浏览器对同名 radio 的默认行为——只要至少一个被选中,整组就算通过验证。
所以真正有效的写法是:给同组任意一个 radio 加 required,并确保它们 name 相同。浏览器会自动检查这组有没有选中项。
立即学习“前端免费学习笔记(深入)”;
- 别给每个 radio 都加
required,多余且可能干扰验证逻辑 - 如果用了
required却还能提交,大概率是name不一致,或者用了type="checkbox"混淆了单选/多选 - 测试时用开发者工具删掉所有
checked,再点提交,看浏览器是否弹提示:“请填写此字段”
怎么让选项横向排列而不是默认竖着排
默认 radio 是块级元素,换行显示。想横排,不用写 CSS 也能快速解决——把 <label> 改成 display: inline 或直接用内联写法。
最轻量的做法:在 <label> 上加 style="display:inline;margin-right:1em;",比写外部样式快,适合新手临时调整。
- 不要用
<br>强制换行来“控制布局”,那会让结构混乱且难维护 - 避免把多个
<input>塞进同一个<label>,语义错乱,屏幕阅读器会读串 - 如果题目多、选项长,横排可能折行难看,优先保证可读性,别硬撑一行
提交后数据去哪了?新手常卡在这步
HTML 表单本身不处理数据,只负责打包发送。点了提交,浏览器会按 method(默认 GET)把数据拼到 URL 后面,或以请求体发给 action 地址。没有后端接收,数据就丢了。
本地测试时,用 method="GET" 最直观:提交后 URL 变成 ?q1=A&q2=B,一眼看到填了啥。这是验证前端是否写对的最快方式。
- 别指望
console.log自动打印表单值——没 JS 绑定的话,它根本不会执行 - 如果想存到本地,得加几行 JS 监听
submit事件,但那是下一步的事,先确保 HTML 结构能发出正确数据 - 真实部署时,
action必须指向真实接口(比如 PHP 文件或云函数地址),否则 404



















