表单必须含name属性才能提交数据，漏写name是“点提交没反应”的主因；用户等级升级申请需收集当前等级、目标等级、申请理由和联系方式，并注意required校验、type="email"原生验证、label不可用placeholder替代、textarea换行处理、移动端select卡顿改用radio等细节。
表单结构必须包含 name 属性才能提交数据
浏览器只把带 name 的表单控件（input、select、textarea）打包发送，id 或 class 不参与提交。漏写 name 是最常见“点提交没反应”的原因。
用户等级升级申请通常要收集：当前等级、目标等级、申请理由、联系方式。对应字段建议这样写：
<form action="/api/upgrade" method="POST">
<label>当前等级：</label>
<select name="current_level">
<option value="1">青铜</option>
<option value="2">白银</option>
<option value="3">黄金</option>
</select>
<label>申请升级至：</label>
<select name="target_level">
<option value="4">铂金</option>
<option value="5">钻石</option>
</select>
<label>升级理由（必填）：</label>
<textarea name="reason" required></textarea>
<label>邮箱：</label>
<input type="email" name="email" required>
<button type="submit">提交申请</button>
</form>
-
required要加在必填项上，否则空提交会绕过前端校验 -
type="email"触发浏览器原生邮箱格式检查，比用pattern更可靠 - 避免用
placeholder替代label，它不提供可访问性支持，且焦点时消失
textarea 默认无换行提交，后端需按 \n 解析
用户在 textarea 里敲回车，实际提交的是 \n 字符（Unix 风格），不是 HTML 的 <br>。如果后端渲染到网页展示，直接插进去会丢失换行 —— 必须用 white-space: pre-line CSS 或服务端转义为 <br>。
示例后端处理（Node.js）：
立即学习“前端免费学习笔记（深入）”；
const reason = req.body.reason?.replace(/\n/g, '<br>');
- 别依赖前端 JS 把换行转成
<br>，容易被绕过或 XSS 注入 - 若存入数据库，保持原始
\n；仅在渲染 HTML 时做转换 - 移动端软键盘回车可能触发意外提交，给
textarea加rows="4"明确高度，避免布局跳动
提交失败时，action 地址返回 400 或 500 会导致页面跳转空白
默认表单提交是全页跳转。如果后端验证失败返回 JSON 错误（如 {"error": "等级不能降级"}），浏览器会直接显示原始 JSON 文本——用户看到一片乱码，还以为挂了。
- 要么后端返回完整 HTML 页面（含错误提示和原表单数据），维持传统流程
- 要么改用
fetch+event.preventDefault()做无刷新提交，错误信息插入<div class="error"></div> - 如果坚持用原生
form，至少让后端返回 302 跳回原页，并通过 URL 参数或 session 携带错误信息（如?error=level_invalid）
移动端 select 在 iOS 上滚动卡顿，优先用单选按钮替代
iOS Safari 的原生 select 下拉菜单响应慢、样式不可控，且无法监听滚动事件。等级选项少（≤5 项）时，用 radio 更稳妥：
<fieldset> <legend>申请升级至</legend> <label><input type="radio" name="target_level" value="4"> 铂金</label> <label><input type="radio" name="target_level" value="5"> 钻石</label> </fieldset>
-
fieldset+legend提供语义化分组，对屏幕阅读器友好 - 所有
radio共享同一name才能互斥选择 - 不要用
div包裹多个input替代fieldset，会丢失可访问性上下文
