表单结构应通过语义化低但业务准确的name（如product_model）配合autocomplete属性控制自动填充，radio组需同名且仅一个checked并用required校验，提交用fetch替代跳转并注意cors和http服务启动。
表单结构怎么写才不会被浏览器自动填充干扰
浏览器对 <input type="text"> 会默认尝试 autofill，尤其在“姓名”“邮箱”“电话”这类字段上，可能把用户历史填的公司名塞进“产品型号”里——评测页最怕这个。解决方法不是禁用 autocomplete（它不可靠），而是用语义化程度低但业务准确的 name 和 autocomplete 属性组合：
-
name="product_model"比name="model"更难被识别为标准字段 - 对非标准字段显式加
autocomplete="off"（注意：部分浏览器已忽略该值，所以必须配合自定义 name） - 关键字段如邮箱仍用
autocomplete="email"，既保体验又不误填 - 所有
<input>必须有id，且对应<label for="xxx"></label>，否则屏幕阅读器和点击 label 选中输入框都会失效
单选题怎么绑定同一组选项又避免提交空值
投票页核心是让用户必须选一项，但 HTML 默认不强制——没点就提交，FormData 里根本不会包含该字段名。靠 required 属性能触发浏览器校验，但前提是所有同名 radio 的 name 完全一致，且至少一个有 checked（否则初始状态就是空）：
<input type="radio" name="rating" value="5" id="rate5" required><label for="rate5">★★★★★</label> <input type="radio" name="rating" value="4" id="rate4"><label for="rate4">★★★★☆</label> <!-- 注意：只给第一个加 checked，不要多个都加 --> <input type="radio" name="rating" value="3" id="rate3" checked>
- 所有 radio 的
name必须完全相同（包括大小写），否则分组失效 -
required只对第一个 radio 生效，但它能阻止整个组未选时提交 - 别用 JavaScript 模拟单选逻辑——原生 radio 在表单重置、无障碍、移动端焦点管理上更稳
提交后怎么不跳转页面还能拿到结果
默认表单提交会刷新页面，用户看不到自己刚投的票。用 event.preventDefault() 阻止默认行为，再用 fetch 发送数据，是最轻量的方案：
document.querySelector("form").addEventListener("submit", async e => {
e.preventDefault();
const data = new FormData(e.target);
const res = await fetch("/api/vote", {
method: "POST",
body: data
});
if (res.ok) {
document.querySelector(".result").textContent = "已投票成功";
}
});
-
FormData自动收集所有带name的表单控件，不用手动拼对象 - 后端接收时注意：如果用
body: data，服务端需按 multipart/form-data 解析；若想用 JSON，得先Object.fromEntries(data)转对象再JSON.stringify - 按钮要加
type="submit"，否则submit事件不触发 - 别忘了给按钮加 loading 状态（比如禁用 + 文字变“提交中”），防止重复点击
为什么本地测试时 fetch 总报 CORS 错误
直接双击打开 index.html 文件，浏览器以 file:// 协议加载，此时 fetch("/api/vote") 实际请求的是 file:///api/vote，必然失败。这不是代码问题，是协议限制：
- 必须通过 HTTP 服务访问页面，比如用 VS Code 的 Live Server 插件，或命令行
npx http-server - 开发阶段后端接口若在 localhost:3000，前端页面也得在同一域名下（如 http://localhost:5500），否则跨域；临时解决可用浏览器插件禁用 CORS（仅调试用）
- 如果只是存本地 localStorage 模拟投票，可删掉 fetch，改用
localStorage.setItem("vote_"+productId, selectedValue)，适合纯静态演示
真正上线时，表单 action 和 fetch 地址都要指向你自己的 API 域名，本地协议和跨域问题就自然消失。最容易被忽略的是：连基础 HTTP 服务都没起，就急着调接口——先让页面跑起来，再联调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
