使用<form>搭建报名表单需包裹所有字段，设置action和method="POST"，name属性必填，required仅作前端校验，type="email"等不可替代后端验证，按钮须设type="submit"，并添加防重复提交逻辑。
怎么用 <form> 搭出能提交的报名表单
不能只写 <input> 就完事，<form> 标签必须包裹所有字段，并明确 action 和 method。常见错误是漏掉 action（导致点提交没反应）或写成相对路径但没配好后端路由（返回 404）。如果只是本地测试，action 可暂设为 "#" 或留空，但得加 onsubmit="return false;" 防刷新——否则页面一提交就跳转或重载。
推荐写法：
<form action="/api/apply" method="POST"> <input type="text" name="name" required> <input type="email" name="email" required> <button type="submit">立即报名</button> </form>
-
method="POST"更安全，适合传敏感信息（如手机号）；GET会把数据拼在 URL 里，不推荐用于报名 -
name属性必须写，后端靠它取值；别写成id或class - 加
required是最简校验，但仅前端生效，不能替代后端验证
为什么 type="email" 和 type="tel" 不能当真实校验用
浏览器自带的类型提示（比如 iOS 键盘自动切数字键盘）和基础格式拦截（输入 abc@def 会标红）确实方便，但它们极易绕过：用户禁用 JS、用 DevTools 改 type 值、或直接发 POST 请求就能跳过。实际项目中，见过太多“邮箱格式正确却收不到验证码”的情况——因为前端只拦了 @，没拦 test@@example.com 这种非法格式。
- 真正要拦的：空值、明显错位（如邮箱缺
@、手机号非 11 位且不含 +86 前缀） - 建议配合
pattern属性做轻量正则，比如<input type="tel" pattern="^1[3-9]\d{9}$" title="请输入11位手机号"> - 关键字段（如验证码、密码确认）必须服务端二次校验，前端只是体验优化
提交按钮点击后没反应？检查这三处
不是 JS 写错了，大概率是 HTML 结构或语义问题。
立即学习“前端免费学习笔记（深入）”；
- 按钮没写
type="submit"—— 默认是type="button"，点多少次都不会触发表单提交 - 表单内有多个
<button>且都没设type，部分浏览器会按第一个按钮行为执行（可能误触发重置） -
<input>类型写成type="button"或type="reset"，却当成提交按钮用
顺手加个防重复提交的小保护：
<button type="submit" id="submitBtn">提交报名</button>
<script>
document.querySelector('form').onsubmit = function() {
document.getElementById('submitBtn').disabled = true;
};
</script>
移动端报名页容易被忽略的细节
用户在手机上填表时，缩放、键盘遮挡、输入框聚焦后页面滚动错位，这些问题不是 CSS 能全解决的。
- 加
<meta name="viewport" content="width=device-width, initial-scale=1">是底线，否则 iOS Safari 会强制缩放 -
<input>上加autocomplete属性提升体验，比如autocomplete="name"、autocomplete="tel"，让系统键盘推荐对应内容 - 避免用
position: fixed盖住输入框——iOS 下键盘弹起时，fixed 元素常卡在错误位置 - 提交成功后别只弹 alert，优先用页面内提示（
<div class="success">报名成功！</div>），alert 在微信内置浏览器里经常失效
表单逻辑本身不复杂，难的是边界情况：网络中断时要不要存草稿、验证码超时怎么同步 UI、后端返回错误字段名和前端 name 对不上怎么办。这些没法靠 HTML 解决，得从接口约定开始对齐。
