HTML表单元素怎么创建？教程详解

表单必须用 包裹，但 action 和 method 不能瞎填

浏览器只认 标签内的控件为“可提交字段”，外面的 <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>，后者仍会提交

不绑定 for，点击输入框没反应

很多人把 当成纯文字容器，写了却没和 <input> 关联。结果用户点文字无法聚焦输入框，屏幕阅读器也读不出关联关系，既影响体验又不符合无障碍标准。

• 的 for 值必须严格等于对应 <input> 的 id（注意不是 name）
• 更稳妥的写法是把 <input> 写在 内部，不用 for 和 id 也能自动绑定
• 复选框/单选按钮多个选项时，每个 <input> 都要有独立 id， 分别绑定，别共用一个

提交按钮必须是 或 <input type="submit">

用