表单必须正确设置name、type、id/for三属性：name是后端接收字段标识，type决定键盘类型与基础校验，id与label的for必须严格匹配以保障可访问性；所有表单控件须在内，提交按钮推荐。

直接用 <form></form> 包住 <input> 就能跑起来，但没加 name、type 或放错位置，后端根本收不到数据——这是新手最常卡住的地方。

必须写对的三个属性：name、type、id/for

缺一不可，不是“可选”：

• name 是后端接收字段的唯一标识，比如 name="username"，没它提交时这个输入框的数据就彻底消失
• type="text" 和 type="password" 不只是视觉区别：前者在手机上弹出全键盘，后者自动屏蔽内容、触发密码管理器识别；用 type="text" 写密码框，等于把明文贴在控制台里
• id 和 label 的 for 必须严格匹配，否则点击文字无法聚焦输入框，影响可访问性和触屏体验。例如 <label for="login-pwd">密码</label> 对应 <input id="login-pwd" ...>

<form></form> 不能只当“视觉容器”

很多初学者把按钮和输入框写在 <form></form> 外面，看起来排得整齐，但实际提交会失败：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 所有参与提交的 <input>、<select></select>、<textarea></textarea> 必须在同一个 <form></form> 标签内，否则浏览器不打包发送
• 提交按钮推荐用 <button type="submit"></button>，不是 <button></button>（默认是 type="button"，点了也没反应）
• 如果按钮必须放在表单外，要用 form="myform" 显式绑定，同时 <form id="myform"></form>

移动端键盘和校验陷阱

HTML5 的 type 值直接影响原生键盘类型和基础校验逻辑，选错会立刻暴露问题：

立即学习“前端免费学习笔记（深入）”；

• type="email" → iOS/Android 弹出带 @ 键的键盘，且提交前检查是否含 @ 符号（但不验证域名）
• type="tel" → 弹出数字键盘，适合手机号；别用 type="number"，它会删掉手机号开头的 0，Safari 还强制显示上下箭头
• type="password" 不提供加密能力，只是前端掩码；传输安全靠 HTTPS，不是靠这个标签
• 需要更细粒度控制时，配合 inputmode="numeric" + pattern="[0-9]*" 比单纯用 type="number" 更可靠

容易被忽略的“小动作”

真正影响用户是否愿意填完的关键，往往藏在细节里：

• 所有 <input> 都该加 required 属性，否则空提交会绕过前端校验，增加后端负担
• 密码框建议加 autocomplete="current-password"（登录）或 "new-password"（注册），帮密码管理器正确识别
• 不要依赖 placeholder 当标签，它会在聚焦后消失；始终配 <label></label>，哪怕视觉上隐藏也要保留语义
• CSS 中给 input:focus 加 box-shadow 和 border-color 变化，比纯背景色更易感知焦点状态