form标签决定数据提交方式、目标和方法，必须正确设置method和action；input类型需精准匹配语义与功能；css应统一box-sizing并保障可访问性；javascript验证是必要兜底，name属性直接影响后端字段名。
form 标签不是装饰品，它决定数据怎么发、发给谁、用什么方式发——写错 method 或漏掉 action，表单就只是个静态框。
用 form 搭出可提交的骨架
浏览器默认把 form 当作一个独立交互单元，不加 method 和 action，点提交按钮根本不会触发任何网络请求。
-
method="post"是登录/注册等敏感操作的合理选择；method="get"适合搜索、筛选这类无副作用的操作（参数会暴露在 URL 中） -
action必须指向真实后端接口路径，比如action="/api/login"；设成"#"或空字符串，提交后页面只会刷新或跳到顶部 - 别用
div套一堆input代替form——屏幕阅读器无法识别语义，JavaScript 也拿不到原生的submit事件和form.elements集合
input 类型和属性不能靠猜
type 决定输入行为和校验逻辑，不是“看着像就行”。比如密码字段用 type="text"，连基础掩码都没有，更别说触屏键盘自动切出数字/密码布局。
- 用户名：用
type="text"+autocomplete="username"，让浏览器能正确填充 - 密码：必须是
type="password"；需要“显示明文”功能时，只切换type值（password↔text），不要删重建元素 - 邮箱：用
type="email"，移动端会调起带 @ 符号的键盘，且浏览器内置邮箱格式校验 - 必填项统一加
required，比用 JavaScript 判断value === ""更可靠——它会在提交前拦截，并聚焦到第一个空字段
CSS 控制表单，别只改颜色和边框
表单控件的默认样式在不同浏览器里差异很大，直接写 input { width: 100%; } 很可能被 box-sizing 或内边距撑破容器。
- 所有
input、select、textarea都要加box-sizing: border-box，否则width: 100%会算错总宽 - 禁用系统默认焦点轮廓（
outline: none）前，必须提供替代视觉反馈，比如border: 2px solid #007bff，否则键盘用户无法感知当前焦点位置 - 移动端点击区域太小？给
input设min-height: 44px或padding: 12px，这是 iOS 触控最小建议尺寸 - 别用
font标签控制文字颜色——它已废弃，用 CSS 的color属性替代
JavaScript 验证不是锦上添花，而是兜底手段
HTML5 原生验证（required、minlength、pattern）能拦住明显错误，但复杂规则（如“密码需含大小写字母和数字”）必须靠 JS。
- 监听
input事件做实时校验，比只等submit时再检查体验好得多 - 用
setCustomValidity()替代手动增删 class——它能让checkValidity()返回正确布尔值，且与原生提交流程无缝集成 - 防重复提交：提交瞬间禁用按钮（
button.disabled = true），并在请求结束或失败后恢复，否则用户狂点可能发出多份相同请求 - 别在
submit事件里用return false阻止默认行为——用event.preventDefault()，更清晰可控
name 属性常被忽略，但它决定了后端收到的字段名。写成 name="user_name" 还是 name="username"，后端代码就得跟着改——这种细节不出错，上线才不会卡在第一关。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
