表单必须设置method="post"和有效action地址，input需正确type与name属性，label须绑定唯一id，避免autocomplete干扰，才能确保数据稳定提交至后端。
直接用 <form></form> 收集用户基本信息，必须确保字段语义正确、提交路径可靠、无障碍可用——否则前端看起来完整，后端收不到数据是常态。
表单必须设 method 和 action 才能真正提交
只写 <form></form> 标签，里面放了 <input> 却点不动？大概率是没配 method 和 action。浏览器默认 method="GET"，但基本信息（如邮箱、电话）不该暴露在 URL 里；action 留空或写 "#"，表单会尝试提交到当前地址，通常 405 错误或静默失败。
-
method="POST"是合理选择，保护字段内容不被记录在服务端日志或浏览器历史中 -
action必须指向真实可接收的后端地址，比如"/api/submit"或测试用的"https://httpbin.org/post"；本地双击 HTML 文件（file://协议）时，任何action都会触发net::ERR_FILE_NOT_FOUND - 纯前端无法发邮件或存数据库，
action指向的必须是服务端接口或第三方中转服务（如 Formspree、Netlify Forms）
input 类型和 name 属性缺一不可
类型选错，移动端键盘不匹配；漏写 name，后端收不到值——这是两个最隐蔽也最高频的问题。
- 姓名：
<input type="text" name="name" required>（required触发原生校验提示） - 邮箱：
<input type="email" name="email" required>（自动格式校验 + 唤起邮箱键盘） - 电话：
<input type="tel" name="phone">（不强制校验，但支持+和短横线，唤起数字键盘） - 消息正文必须用
<textarea name="message" required rows="5"></textarea>，别用type="text"模拟多行 -
name是后端取值的键名（如 Python 的request.form['email']），id只用于 CSS/JS 定位或关联<label></label>，两者不能混用
label 必须绑定 input 的 id，否则等于没写
只写 <label>邮箱</label><input type="email">，屏幕阅读器读不到，点击 label 也无法聚焦输入框。更糟的是，部分旧版 Safari 对 <label><input></label> 包裹写法支持不稳定。
- 每个
<input>需有唯一id，且不能以数字开头（id="1email"无效） - 对应
<label for="xxx"></label>中的xxx必须与input的id完全一致（大小写、连字符、空格都算错） - 复选框或单选按钮要为每个选项单独配
<label for="opt1">选项一</label><input type="checkbox" id="opt1" name="interests" value="web">，不能一个 label 统管多个 input - 不要用
placeholder替代<label></label>，它在输入后消失，也不被多数屏幕阅读器朗读
敏感字段要小心 autocomplete 行为
现代浏览器（Chrome、Edge、Firefox）基本无视 autocomplete="off" 在 <form></form> 上的设置，尤其对密码类字段。它们会强行填充已保存的凭据，导致你写的 JS 清空逻辑被覆盖。
- 对密码输入框，用
autocomplete="new-password"；对已有账号登录，用autocomplete="current-password" - 避开常见关键词：把
name="password"改成name="user-pwd-2026"，减少被识别为登录表单的概率 - 确保该
<input>不在 class 含"login"或"auth"的容器内，DOM 位置也影响浏览器判断 - 如果页面加载后立即执行
input.value = ""，要在DOMContentLoaded后立刻运行，否则填充可能已发生
真正难的不是写出表单结构，而是让每个字段在各种设备、各种辅助技术、各种浏览器自动填充策略下，都能稳定传值——这需要同时兼顾语义、属性、DOM 顺序和后端约定，少一个环节，数据就断在半路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
