优先使用 type="email" 等原生类型而非正则校验，因其自动触发语义化行为（如邮箱键盘、格式拦截、统一提示），且需配合 required 和 title 才生效；number 的 min/max 不阻止手动越界输入，step 有精度和兼容性陷阱；password 仅隐藏不加密，须加 autocomplete="new-password" 等防护；tel/url 类型重在移动端键盘优化，非强校验；inputmode 是提升键盘体验的关键降级补充。
直接用对 type 和验证属性，比写一堆 JavaScript 校验更省事、更可靠、更易维护。
为什么 type="email" 比正则 pattern 更值得优先用
浏览器原生校验会自动触发语义化行为：移动端弹出带 @ 键的键盘、提交时拦截明显错误格式（如 missing @ 或 domain）、配合 required 有统一提示样式。而手写 pattern="^[^\s@]+@[^\s@]+\.[^\s@]+$" 不仅冗长，还容易漏掉边界情况（比如连续点、空格、国际化域名），且不触发键盘优化。
- 必须搭配
required才能真正阻止空提交；只设pattern不设required，空值仍可通过校验 -
title属性是必填项，否则 Chrome 等浏览器不显示自定义错误文案，例如：<input type="email" required title="请输入有效的邮箱地址"> - 不要依赖它做后端等效校验——它只是前端友好提示，后端仍需独立验证
number 输入框的 min/max/step 参数陷阱
number 看似简单，但 min 和 max 只影响浏览器内置增减按钮和校验逻辑，**不阻止用户手动输入越界值**；step 默认为 1，若设 step="0.1" 却没配 value 的小数位数，会导致输入后被截断（如输入 1.23 显示成 1.2）。
- 要确保精度，建议显式设置
step="any"并配合inputmode="decimal"（移动端调出数字+小数点键盘） - 若需整数限制，
min="0" max="100" step="1"是安全组合；但若允许小数，value初始值最好带小数位，例如value="0.0" - 注意 Safari 对
step的兼容性较弱，某些版本会忽略非整数step值
密码字段别只靠 type="password"
type="password" 仅隐藏视觉内容，不加密、不防复制、不阻止开发者工具查看 DOM 值。真正需要防护的场景（如登录页），必须叠加其他控制：
立即学习“前端免费学习笔记（深入）”；
- 禁用自动填充：
autocomplete="new-password"（不是"off"，后者在现代浏览器中已被忽略） - 避免与用户名字段共用
name，防止密码管理器误填；建议用语义化名称如name="user_password" - 若需显示/隐藏切换，不要用
type="text"临时替换——这会让已输入内容暴露在 DOM 中；应使用inputmode="text"+ CSS 控制 visibility，保持type不变
tel 和 url 类型的实际价值在哪
它们几乎不做格式校验（tel 允许任意字符，url 只检查是否有 :），但关键价值在于**移动端体验优化**：iOS 和 Android 会自动调出对应键盘（电话键盘含 *#、URL 键盘含 /.），并支持系统级自动填充（如通讯录电话、常用网址）。这对转化率提升很实在。
-
tel不要用pattern强绑 11 位——用户可能输国际号（+86）、分机（ext.）、括号或空格；留白给用户，后端再标准化 -
url若只接受 HTTPS，应在后端强制重写或拦截，前端用pattern="https://.*"反而造成误拦（比如用户先输 http 再编辑） - 两者都建议加
inputmode="tel"或inputmode="url"，作为type的降级补充，增强兼容性
最常被忽略的是 inputmode 属性——它不改变语义，但能精准控制虚拟键盘，且在旧版浏览器中比 type 更稳定生效。别只盯着 type，该叠就叠。
