纯html能构建可提交、无障碍友好的登录界面，但必须满足硬性条件：form需设method="post"和有效action，input要有合法type与准确name，label须用for/id精确绑定；漏任一条件则提交失败、回车无效、读屏器不可读、后端收不到数据。
纯 HTML 能搭出能用、可提交、无障碍友好的登录界面，但必须满足几个硬性条件：form 的 method 和 action 不能缺，input 必须有合法 type 和准确 name，label 必须用 for 绑定 id。漏掉任意一条，页面看起来像登录页，实际点不动、回车无效、读屏器读不出、后端收不到字段。
form 标签的 method 和 action 写错就交不出去
浏览器只认 method="post"（小写） + 有效 action 才会真正发起表单提交。大写 "POST" 在部分旧版 Safari 或嵌入式 WebView 中会被忽略；空 action="" 或没写 action，会默认提交到当前 URL，大概率 404 或刷新页面。
-
action可先占位为action="/login"或action="#"（后者需配 JS 的event.preventDefault()） - 密码类字段绝不能用
method="get"，否则明文进 URL，存在日志泄露、代理缓存风险 - 如果用 JS 拦截提交，
action写成"#"是常见做法，但不加preventDefault()就会跳转或刷新
input 的 type 和 name 必须匹配后端约定
后端靠 name 键取值：$_POST['username']（PHP）、request.form['password']（Flask）。拼错、大小写不一致、用了下划线或驼峰，字段就直接丢弃。
- 用户名必须是
<input type="text" name="username">，不是user_name、account、loginId - 密码必须是
<input type="password" name="password">；type="text"明文显示，type="string"是非法值，浏览器静默降级为text - 移动端键盘行为依赖
type：用type="email"用户名会弹出 @ 键，type="password"才触发密码管理器填充和安全键盘
label 和 input 的 for/id 绑定失效，移动端就点不准
“点‘用户名’没反应”不是 CSS 问题，是语义断裂。iOS 和 Android 原生输入法、读屏器、语音助手都依赖 label for="xxx" 与 input id="xxx" 的精确匹配来建立焦点路径。
- 写法必须是分开的：
<label for="username">用户名</label><input id="username" name="username"> - 禁用嵌套写法：
<label>用户名<input></label>—— Safari 旧版不支持稳定聚焦 -
id不能省略，哪怕和name相同；for只认id，不认name - 手指点文字区域比点输入框边缘准得多——这是真实交互成本，不是“看起来一样就行”
box-sizing: border-box 不全局加，CSS 宽度永远算不准
输入框总比按钮宽几像素、小屏下溢出、iOS Safari 左右留白不一致……90% 是盒模型没归一化。默认 box-sizing: content-box 下，width: 100% 不含 padding 和 border，导致视觉错位。
- 必须加全局重置：
* { box-sizing: border-box; }，不是可选，是必加 - 不加这句，
padding: 12px+border: 1px solid会让实际宽度超出容器，尤其在 flex 容器中表现诡异 - 所有现代框架（Bootstrap、Tailwind）都默认启用该规则，手写 HTML 更不能漏
最容易被忽略的是 box-sizing 全局重置和 label/input 的 for/id 精确配对——前者影响布局稳定性，后者决定是否真能被用户点中、被辅助工具识别。这两处不修，其他再炫的动效或样式都是空中楼阁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
