推荐用包裹，正确关联（嵌套或for属性），设置最小触控尺寸44×44px并留足间距，提交后禁用按钮并反馈状态，失败时恢复并提示。
HTML里怎么加“太难/适中”投票按钮
直接用两个 <button></button> 或 <input type="radio"> 就行，不需要 JS 也能提交——但得配合表单。常见错误是只放按钮不包 <form></form>，点完没反应，用户以为功能坏了。
- 推荐用
<form method="post" action="/api/feedback"></form>包住选项，后端收difficulty=hard或difficulty=medium - 别用
<div> 模拟按钮：语义不对、无法键盘操作、屏幕阅读器读不出意图 <li>如果只是前端记录（比如存 localStorage），那用 <code>onclick绑定也行，但得立刻给视觉反馈，否则用户不确定点没点上 - 写法一（推荐）：
<label><input type="radio" name="difficulty" value="hard"> 太难</label> - 写法二（要配 id）：
<input id="hard" type="radio" name="difficulty" value="hard"><label for="hard">太难</label> - 漏掉
name属性会导致两个选项都能同时选中，后端收到的就不是单选而是多值 - 别依赖默认
<button></button>的大小，显式设min-width: 44px; min-height: 44px; - 用
margin分开两个按钮，别只靠文字间距；padding算在尺寸内，但margin不算 - 避免用
font-size: 12px配小按钮——文字小了，整个可点区也跟着缩水 - 投完立即禁用按钮：
button.disabled = true;，同时改文案为“已反馈” - 后端失败要恢复按钮，并提示“网络不稳，请重试”，不能静默吞掉错误
- 如果用
<form></form>提交后跳转，记得后端返回 302 或直接渲染成功页，别让页面卡在 loading 状态
label没包住导致点击无效的坑
<input type="radio"> 单独放那儿，光标悬停不显示手型，点了没响应——十有八九是 <label></label> 没正确关联。不是写个文字就行，必须用 for 属性或嵌套结构。
移动端点不准？检查 touch 目标尺寸和间距
小屏上手指点不中，常因为按钮太小或挨太近。iOS 和 Android 都要求最小触控区域 ≥ 44×44px，且相邻可点元素间距 ≥ 8px。
用户投完票要不要刷新页面
不刷新更顺滑，但得处理状态反馈。直接删按钮或变灰容易让用户困惑“是不是卡了”，尤其网络稍慢时。
最难的其实不是写那几行 HTML，而是确保每次点击都有确定的视觉反馈、每次失败都有可理解的提示、每个屏幕尺寸下都点得准——这些细节堆起来，才是用户觉得“这功能真能用”的原因。
