表单name属性缺失导致后端收不到数据；复选框/单选框需设value；同名name可解析为数组；html5校验不可靠，须后端配合；蜜罐字段应自然命名并服务端校验；提交按钮须type="submit"。
联系表单里 name 属性写错，后端根本收不到数据
浏览器提交表单时，只把带有 name 属性的控件值发给服务器，id 或 class 不起作用。常见错误是只写 id="email" 却漏掉 name="email"，导致 PHP 的 $_POST['email'] 或 Node.js 的 req.body.email 为 undefined。
-
<input type="email" id="email">→ 后端收不到；必须写成<input type="email" id="email" name="email"> - 复选框和单选按钮必须带
value，否则提交的是空字符串或on（浏览器默认值） - 多个同名
name（如name="hobby"的复选框）会被后端解析为数组，前提是后端框架支持（如 Express 需启用extended: true）
用 required 和 type 做基础校验，但别依赖它
HTML5 的 required、type="email"、type="tel" 能触发浏览器原生提示，减少简单误填。但它纯属前端行为，禁用 JavaScript 或直接 POST 请求就能绕过。
-
<input type="email" required>会阻止提交并高亮，但用户改 HTML 或 curl 提交照样能发非法邮箱 -
type="number"比type="text"更适合年龄字段，但注意它允许输入e和-，且返回值是字符串而非数字 - 手机号建议用
type="tel"而非type="number"，前者不触发数字键盘的上下箭头，兼容性更好
隐藏字段和反机器人：加 hidden 输入项比 CSS 隐藏更可靠
想防自动提交，常用“蜜罐”策略——加一个本不该被人类填写的字段，比如 <input type="text" name="phone2" style="display:none">。但这种方式容易被爬虫识别并跳过。更稳妥的做法是用 type="hidden" + 服务端校验。
-
<input type="hidden" name="timestamp" value="<script>document.write(Date.now())</script>">不安全，JS 可被禁用；应由后端生成并注入 - 蜜罐字段命名要自然，比如
name="company"（联系表单中本就可能有公司字段），再配合后端判断该字段是否为空且长度 > 0 - 避免用
display: none或visibility: hidden隐藏真实字段，部分自动化工具会主动忽略这类元素
提交按钮必须带 type="submit"，且避免用 button 标签替代
如果写成 <button>提交</button> 而不声明 type，在部分浏览器中默认为 type="submit"，但规范要求显式写出。更麻烦的是，若父容器有 JS 绑定 click 事件但没阻止默认行为，可能重复提交。
-
<button type="submit">发送</button>是标准做法；<input type="submit" value="发送">也完全可用 - 不要用
<div onclick="submitForm()">提交</div>替代表单按钮，这样无法触发表单原生验证，也无法被键盘Enter键激活 - 禁用按钮应在 JS 提交后设置
disabled，而不是初始就加disabled——否则用户首次打开页面就无法点击
label 关联、autocomplete 值这些细节会影响移动端体验和辅助技术兼容性，但最容易被跳过的，其实是后端对 name 的严格匹配和对空字符串的清洗处理。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
