纯HTML登录表单能提交的前提是四个硬性条件：form必须含小写method="post"和有效action；input需正确type与后端字段名一致的name；label须通过for/id精确绑定；全局CSS必须启用box-sizing: border-box。
表单交不出去、回车没反应、移动端点不准、后端收不到字段——这些问题90%不是JS写错了，而是HTML骨架本身没搭对。纯HTML登录表单不需要JavaScript也能提交，但必须满足四个硬性条件：form有method="post"和有效action，input有正确type和name，label通过for绑定id，全局box-sizing: border-box已启用。
form 标签的 method 和 action 写错就根本发不出去
浏览器只认method="post"（小写），写成"POST"在旧版 Safari 或某些嵌入式 WebView 里会静默失败；action不能为空、不能只写""或"#"（除非你明确用 JS 拦截并调用event.preventDefault()）。否则表单可能提交到当前 URL 路径，导致刷新或 404。
- 开发阶段可先写
action="/login"占位，后端路由配好再切真实地址 - 调试时打开浏览器 DevTools → Network 标签，点提交后看有没有
POST请求发出；没有就说明form通道没通 - 如果用 JS 处理提交，
action="#"可以，但必须在事件回调里加event.preventDefault()，否则页面跳转
input 的 type 和 name 必须匹配后端约定字段名
后端靠name取值：$_POST['username']（PHP）、request.form['password']（Flask）、req.body.username（Express）——拼错一个字母，字段就丢。同时type决定行为：用type="text"输密码会明文显示；type="string"是非法值，浏览器直接忽略；移动端键盘类型也依赖type（比如type="email"弹出@键，type="password"触发安全键盘）。
- 用户名必须是
，别写user_name、account或漏name - 密码必须是
，别用type="text"或type="secret" - 需要邮箱校验时用
type="email"，它自带基础格式验证（空值或格式错误时checkValidity()返回false）
label 不绑定 id，移动端点不准、读屏器读不到
“账号”两个字点了没反应？不是样式问题，是语义缺失。浏览器和辅助工具靠label for="xxx"和input id="xxx"的精确匹配建立焦点路径。嵌套写法在旧版 Safari 上不稳定；省略id会导致for失效——哪怕name和id一样，for只认id。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 必须写成：
- 移动端手指点文字区域比点输入框边缘准得多，这是真实交互成本，不是“看起来一样就行”
- 如果用
aria-labelledby替代for，需确保引用的元素存在且可访问，复杂度远高于直接用id
box-sizing 不统一，CSS 宽度永远算不准
没加* { box-sizing: border-box; }，width: 100%配合padding: 12px和border: 1px会撑出父容器；iOS Safari 左右留白不一致、小屏下溢出、按钮总比输入框窄几像素……90% 是盒模型没归一化。
- 必须加全局重置，不是可选，是必加；放在 CSS 最顶部，避免被后续规则覆盖
-
input和button的font-size、line-height、padding要保持一致，否则视觉高度不齐 - 移动端慎用
height固定输入框，优先用padding控制内部空间，让字体缩放更自然
最容易被忽略的其实是required和autocomplete：前者触发浏览器原生校验（但不防绕过），后者影响密码管理器能否自动填充——写autocomplete="username"和autocomplete="current-password"才能让 Chrome/Firefox 正确识别并唤起保存提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
