HTML表单需严格遵循语义化标签组合：必须用包裹，正确设置action（推荐完整路径）和method（敏感操作显式设为POST）；类型要匹配语义（如email、number、password），name属性不可缺失；须通过for与id绑定或嵌套；提交按钮必须是type="submit"。
HTML 表单不是靠“教程”搭出来的，是靠 <form></form>、<input>、<select></select> 这几个核心标签按语义组合出来的——写错一个 name 属性，后端就收不到数据。
表单必须用 <form></form> 包裹，但 action 和 method 不能瞎填
浏览器只认 <form></form> 标签内的控件为“可提交字段”，外面的 <input> 再像模像样也没用。常见错误是漏掉 action 或填成相对路径如 ./submit.php，结果一提交 404；更隐蔽的是 method 默认为 GET，但登录、上传这类操作必须显式写 method="POST"，否则参数暴露在 URL 里，还可能被缓存。
-
action建议填完整路径（如/api/login），避免路径解析歧义 - 敏感操作一律用
method="POST"，别依赖默认值 - 如果只是前端校验或 JS 处理，
action可留空，但onsubmit="return false"或event.preventDefault()得跟上，否则页面还是会跳转
<input> 类型选错，用户输入和验证全乱套
<input> 的 type 不只是改个外观，它直接决定键盘类型（手机）、校验规则（浏览器原生）、甚至能否被密码管理器识别。比如用 type="text" 写邮箱，不会触发邮箱格式校验；用 type="password" 却忘了加 name，后端连字段名都收不到。
- 邮箱必须用
type="email"，配合required才有基础校验 - 数字输入优先用
type="number"，但注意它的值是字符串，要parseInt()或parseFloat()转换 - 密码字段必须带
name（如name="password"），否则提交时该字段直接消失 - 隐藏字段用
type="hidden"，别用style="display:none"的普通<input>，后者仍会提交
<label></label> 不绑定 for，点击输入框没反应
很多人把 <label></label> 当成纯文字容器，写了却没和 <input> 关联。结果用户点文字无法聚焦输入框，屏幕阅读器也读不出关联关系，既影响体验又不符合无障碍标准。
立即学习“前端免费学习笔记（深入）”；
-
<label></label>的for值必须严格等于对应<input>的id（注意不是name） - 更稳妥的写法是把
<input>写在<label></label>内部，不用for和id也能自动绑定 - 复选框/单选按钮多个选项时，每个
<input>都要有独立id，<label></label>分别绑定，别共用一个
提交按钮必须是 <button type="submit"></button> 或 <input type="submit"></H3>
<p>用 <code><div onclick="submitForm()">
或 <button></button>（没写 type）当提交按钮，最大的问题是：回车键无法触发表单提交。浏览器只对 type="submit" 的按钮响应 Enter 键，这是表单交互的基本契约。
- 显式写
<button type="submit">提交</button>，别省略 type
- 禁用状态用
disabled 属性，别用 CSS 隐藏或 JS 拦截，否则可访问性崩坏
- 按钮内不要嵌套
<span></span> 或 <svg></svg> 后忘记设 aria-hidden="true"，屏幕阅读器会误读图标文字
<button type="submit">提交</button>，别省略 type
disabled 属性，别用 CSS 隐藏或 JS 拦截，否则可访问性崩坏<span></span> 或 <svg></svg> 后忘记设 aria-hidden="true"，屏幕阅读器会误读图标文字表单最麻烦的从来不是写标签，而是 name 属性是否统一、id/for 是否配对、type 是否匹配语义——这些地方错一个，调试时根本看不出 HTML 有问题，只会觉得“明明点了，怎么没反应”。
