form 的 autocomplete 属性可触发浏览器原生智能填充，需严格匹配标准 token（如 email）；inputmode 控制软键盘类型以提升输入体验；form 关联与 formaction 实现多入口提交；:valid/:invalid 伪类支持无 js 表单反馈。
用 form 的 autocomplete 属性自动填充常见字段
浏览器原生支持的 autocomplete 能直接触发地址、邮箱、电话等字段的智能填充，无需 JS 监听或手动赋值。关键在于值必须严格匹配标准 token（如 autocomplete="email"），否则会被忽略。
- 常见有效值：
name、email、tel、street-address、postal-code、cc-number（信用卡号） - 多字段组合时注意层级：比如地址拆成
address-line1和address-line2，不能写成address1 - Chrome 对
autocomplete="off"已基本无视——若真想禁用，得用随机字符串如autocomplete="off-123" - 移动端 Safari 仅对
email、tel、password等少数值生效，organization类字段常被跳过
靠 inputmode 触发精准软键盘，减少用户输入错误
inputmode 不改变表单语义，但直接影响移动设备弹出的软键盘类型。填错类型会导致用户手动切换键盘、漏输符号、甚至放弃填写。
- 数字类必加：
inputmode="numeric"（纯数字）、inputmode="decimal"（带小数点）、inputmode="tel"（含 *# 符号） - 邮箱和 URL 场景别只依赖
type="email"—— 加上inputmode="email"或inputmode="url"才能唤出 @ / .com 快捷键 - 中文输入法下
inputmode="text"是默认行为，但inputmode="none"可彻底禁用软键盘（适合扫码后自动填入的只读字段） - 注意兼容性：
inputmode在 Safari 16.4+ 才完全支持，旧版 iOS 会直接忽略该属性
用 form 关联 + formaction 分离提交逻辑，避免重复绑定事件
一个页面多个提交入口（如“保存草稿”和“立即发布”）时，不必为每个按钮写 JS 绑定，也不用动态改 form 的 action。
- 所有按钮统一放在
form外部，用form="myForm"显式关联 - 不同按钮各自设置
formaction：<button formaction="/api/draft">存草稿</button>、<button formaction="/api/submit">提交</button> -
formmethod和formenctype可同步指定，比如上传文件时用formenctype="multipart/form-data" - 注意：IE 完全不支持这些属性，如需兼容，得 fallback 到 JS
form.action = "..."; form.submit()
依赖 :valid / :invalid 伪类做无 JS 表单反馈
原生表单验证状态可直接驱动样式变化，省去监听 input、blur、submit 的 JS 逻辑，尤其适合简单必填/格式校验。
- 配合
required、type="email"、pattern等属性才能触发伪类 - 初始加载时
:invalid默认不生效，需加novalidate属性并手动调用checkValidity()才能强制校验 - 边输边提示？用
:user-invalid（Chrome 107+、Firefox 109+ 支持），它只在用户交互后才激活，避免空字段红框吓人 - 注意 Safari 对
pattern的正则支持较弱，比如不支持(?i)忽略大小写，得写成[a-zA-Z]
表单交互属性不是锦上添花的装饰，它们在移动端和低配设备上直接影响数据是否能被正确、快速地填入。真正容易被忽略的是：这些属性只有在语义准确、取值规范、且与其他 HTML 特性（如 type、required）协同使用时，才会稳定生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
