表单必须设method="post"和正确action，name属性不可缺，提交按钮需type="submit"，移动端优先用语义化type和inputmode优化键盘。

表单结构用

包裹，method 和 action 必须设对

用户点“提交”后数据发给谁、怎么发，全靠这两个属性。不写 method 默认是 GET，但报名信息含姓名、电话、邮箱等敏感内容，必须用 POST；action 指向后端接收地址，本地测试可先设为 "#" 或留空，避免跳转报错。

常见错误：漏写 method="post" 导致参数拼在 URL 里，或 action 写成绝对路径却没部署后端，点提交后 404 或刷新空白页。

• （上线时指向真实接口）
• 本地调试可用 action="#"，配合浏览器控制台看 submit 事件是否触发
• 别用 action="javascript:void(0)" —— 屏蔽默认行为但没补 JS，提交就失效

必填字段加 required，但得配 name 才能传值

HTML 表单提交只发送带 name 属性的控件值。required 只负责前端校验，不加 name 就算填了也传不出去。

典型翻车现场：写 ，结果后端收不到 name 字段。

• 姓名：
• 手机号：（pattern 做简单格式限制）
• 邮箱：（浏览器自动校验邮箱格式）
• 选项类用 或 ，注意同组 name 相同

按钮必须是 type="submit"，别用 button 或 div

很多新手用 提交 或

，结果按回车没反应、点按钮不触发表单提交——因为默认 是 type="button"，只是普通按钮。

回车提交是表单基础体验，尤其移动端用户习惯直接按键盘回车，这点不能丢。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 正确写法：立即报名
• 如果要加 loading 状态，JS 里监听 submit 事件，调用 event.preventDefault() 后再发请求，别直接干掉提交逻辑
• 禁用状态用 disabled 属性，而不是 CSS 隐藏或 JS 移除点击事件

移动端输入体验差？优先用语义化 type 和 inputmode

在手机上， 弹出的是全键盘，但手机号应该弹数字键盘，邮箱应该带 @ 键。不用 JS 就能优化。

安卓和 iOS 对 inputmode 支持已很稳定，比单纯靠 type 更精准。

• 手机号：
• 验证码：
• 邮箱：
• 避免滥用 type="number"——它会校验并可能把 "00123" 转成 "123"，丢失前导零

表单看似简单，但用户从点开到填完的每一步，都卡在某个属性没写对、某个类型选错、或者以为写了 required 就万事大吉。最常被忽略的是 name 和 type="submit"，这两处一漏，后端连日志都收不到。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！