纯HTML+JS可实现本地演示投票页：用radio单选+label增强可访问性，JS通过localStorage存取选项避免刷新丢失，提交时preventDefault()阻止跳转，并检查是否已投票。
怎么用纯 HTML + JavaScript 实现一个可提交的投票页面
纯 HTML 本身不能处理投票逻辑或保存结果，必须搭配 JavaScript（前端交互）和后端（如 PHP/Node.js）才能完成真实投票。但如果你只是要做一个「演示用」或「本地测试用」的静态投票页，可以用 localStorage 模拟记录，避免报错或刷新丢失数据。
- 用户点击选项 → 触发
onclick或addEventListener，更新选中状态 - 提交按钮调用函数，把选中的
value存进localStorage，比如localStorage.setItem('vote', 'option2') - 页面加载时用
localStorage.getItem('vote')恢复上次选择，避免重复投 - 别用
form默认提交（会跳转或刷新），加event.preventDefault()
为什么直接用 <input type="radio"> 就够用，不用框架
投票本质是单选，radio 天然支持同名互斥，语义正确、无障碍友好、移动端点击区域大。强行套 React/Vue 反而增加体积和调试成本。
- 所有选项必须有相同的
name属性，例如name="choice" - 每个
input配一个label，用for绑定id，提升可点击范围 - 禁用默认表单行为：给
button设type="button"，否则在form内会触发表单提交 - 不要用
div+onclick模拟 radio——无法用空格键切换、不被屏幕阅读器识别
常见错误：点了没反应 / 提交后清空 / 刷新就重置
这些问题基本都出在事件绑定时机或存储逻辑上，不是 HTML 写错了，而是 JS 执行顺序或作用域不对。
-
document.getElementById在 DOM 加载前执行 → 把 JS 放在</body>前，或用DOMContentLoaded包裹 - 没检查是否已投过票，导致多次点击同一选项反复写入
localStorage→ 提交前先读一次localStorage.getItem('vote')，如果有值就提示“已投过” - 用了
location.reload()或表单默认提交 → 替换为event.preventDefault()和手动清空 UI 状态（如移除checked） - 选项 value 含空格或特殊字符（如
value="北京 上海"）→ 后端解析易出错，建议用短标识符，如value="beijing"
要不要加后端？什么情况下必须加
只要页面要部署到公网、多人同时访问、需要防刷或统计真实数据，就必须加后端。否则，仅靠 localStorage 每个浏览器都是独立的，A 投了不影响 B，也拦不住 F5 刷票。
立即学习“前端免费学习笔记（深入）”；
- 最小可用后端：一个 PHP 文件接收
POST，写入文本文件或 SQLite；Node.js 用express+fs也行 - 关键防护点：提交时校验
Referer或加简单 token（如隐藏字段<input type="hidden" name="token" value="abc123">），至少挡住直接 curl 刷票 - 别省略 CORS 配置：如果前端在
file://协议下打开（双击 HTML），现代浏览器会拦截 fetch 请求 → 必须起本地服务（python3 -m http.server）
localStorage 是按域名隔离的，localhost:3000 和 localhost:8080 之间数据不共享；还有人把投票结果存在 sessionStorage，关掉标签页就没了——这些细节比怎么写 HTML 标签更影响功能落地。 
