必须用一个<form>包裹评分（如<input type="range" name="score">）和文字评价（如<textarea name="feedback">），二者name属性需不同且为合法英文标识符，否则后端无法完整接收数据。
怎么用 <form> 同时收集评分和文字评价
必须用一个 <form> 包住所有控件，否则提交时数据会丢失。评分和文字评价是两类不同输入，不能混用同一 name，否则后端收不到完整数据。
常见错误：把 <input type="range"> 和 <textarea> 放在不同 <form> 里，或漏写 name 属性——浏览器根本不会提交这些字段。
-
<input type="range" name="score" min="1" max="5" value="3">是最轻量的评分控件，适合快速打分；value设默认值避免空提交 -
<textarea name="feedback"></textarea>必须带name，否则文字内容不参与提交 - 加
required要谨慎：如果允许“只打分不写评语”，就别给<textarea>加该属性
评分用 range 还是 number？选哪个更合适
range 更适合主观评分场景——用户拖动即可，无需键盘输入，移动端友好，且天然限制在 1–5 范围内；number 虽然能输入精确值，但容易被误输成 0、6、-2 等非法分，还得额外加 JS 校验。
如果你的评分逻辑严格限定整数 1–5，range 是更安全的选择。注意：不要依赖 step="1" 来“保证整数”——部分旧版 Safari 对 range 的 step 支持不一致，稳妥做法是后端再校验一次。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 用
<input type="range" step="1">+min="1" max="5"组合，视觉上就是 5 个档位 - 搭配
<output>实时显示当前值：<output for="score">3</output>，提升交互反馈 - 别用
radio组（如五星点击）——它无法原生支持“拖动微调”，且 HTML 层级变深，样式和 JS 绑定成本高
表单提交后，后端怎么识别评分和评价字段
关键在 name 值命名是否清晰、无歧义。比如 name="score" 和 name="feedback" 就很直接；但若写成 name="data" 或 name="input"，后端拿到的就是两个同名字段，只能取到第一个值。
常见坑：前端用中文当 name（如 name="评分"），某些 PHP/Node 框架默认不解析非 ASCII 字符名，导致字段为空；还有人用点号或中括号（如 name="user.score"），这属于结构化命名，需确认后端框架是否自动解析嵌套对象。
- 坚持用小写字母+下划线：
name="work_score"、name="review_text" - 避免空格、中文、特殊符号，哪怕看着“更可读”，也会在传输或解析时出问题
- 提交前可用浏览器开发者工具的 Network → Payload 查看实际发送的键值对，确认字段名和值都符合预期
为什么提交后页面刷新了，但没看到错误提示或成功反馈
因为纯 HTML 表单默认是同步提交并跳转，没有拦截机制。你写的 <form action="/submit"> 提交后，浏览器直接请求新页面，JS 里的验证或提示来不及执行，或者执行了但页面已刷新清空。
这不是代码写错了，而是行为预期没对齐。要实现“不跳转+带提示”，必须加 event.preventDefault() 阻止默认提交，并用 fetch 手动发请求——但这已超出纯 HTML 范围。如果暂时不想写 JS，至少加 target="_self" 明确行为，并确保后端返回的响应页包含明确的成功/失败信息。
- 调试时先关掉 JS，确认纯 HTML 提交是否真能到达后端（查服务器日志或用 curl 模拟）
- 如果用了 JS 提交，检查是否漏了
event.preventDefault()，这是最常被忽略的一行 - 服务端返回 4xx 错误时，浏览器不会报错，但 Network 面板里能看到状态码——别只盯着页面有没有弹窗
