表单提交必须将input置于form标签内且设置name属性，type决定校验与行为，required与novalidate不可共存，否则验证逻辑异常。

input 必须放在

内部才能提交数据

浏览器只会在 <form></form> 标签包裹下的 <input> 元素中收集值并打包发送。脱离 <form></form> 的 <input>，哪怕带 name，提交时也完全不会出现。

• 常见错误：把 <input type="text" name="username"> 放在 <form></form> 外面，或误嵌套在 <div> 里又没包表单 <li>表格中放输入框时，必须用一个 <code><form></form> 包裹整个 <table>，不能只包某几行或某个 <code><td> <li>如果结构受限（比如模态框里要提交主表单），可用 <code>form="main" 属性让外部 <input> 关联回指定 <form id="main"></form>

name 属性是提交数据的唯一标识

后端靠 name 值接收字段，没有 name 的 <input> 等同于不存在。它不是可选项，是硬性要求。


Wechat HTML Publisher
直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。
下载
• <input type="text" name="user_email"> → 后端收到 user_email=xxx@xxx.com
• 单选组（type="radio"）必须共用同一个 name，否则无法互斥；例如 name="payment_method" 下多个 <input> 才算一组
• 复选框（type="checkbox"）可以同名，后端通常按数组接收，如 hobbies[]=reading&hobbies[]=coding
• name 值避免空格、中文、特殊符号，推荐用下划线或驼峰，如 full_name 或 userPhone

type 属性决定行为和校验逻辑

type 不只是样式切换，它直接影响输入限制、键盘类型、原生验证触发条件。用错 type 可能导致移动端键盘不匹配，或浏览器跳过格式校验。

• type="email"：自动校验邮箱格式，iOS/Android 弹出 @ 键优先的键盘
• type="number"：禁用非数字字符（但注意：用户仍可粘贴字母，需服务端兜底）
• type="date"：触发系统日期选择器，且提交值固定为 YYYY-MM-DD 格式
• type="submit" 和 type="button" 功能完全不同：前者触发表单提交，后者默认无行为，需 JS 绑定
• 别写 type="password "（末尾带空格）——浏览器会当成未知 type，退化为 text，密码明文显示

required 和 novalidate 的冲突必须手动处理

加了 required 却又在 <form></form> 上写了 novalidate，等于开了验证开关又拔了保险丝——所有原生提示都会失效，但 JavaScript 的 checkValidity() 仍返回 false，容易引发逻辑混乱。

• 调试阶段临时关验证？删掉 novalidate，别留着；或者用 JS 动态控制：form.noValidate = true
• <select></select> 的 required 要配合空值 <option value="" selected disabled></option> 才生效，否则点开就默认选中第一项，验证永远通过
• 自定义校验（如手机号正则）要用 pattern + title 提示，但注意：pattern 不校验空值，得和 required 搭配使用
表单看似简单，但 name 缺失、form 包裹范围错误、type 与语义错配这三类问题，在真实项目里高频出现在联调阶段，且往往被前端忽略、后端报“参数为空”才暴露。