真正被广泛支持的HTML5新增input类型是email、tel、url、date、time、datetime-local、number、search；它们提供语义强化、原生校验和移动端键盘优化，但兼容性与校验能力有限，需配合JS回退与增强。
HTML5 新增的 类型不是“功能增强”，而是语义强化 + 浏览器原生校验 + 移动端键盘优化的组合。用错类型不会报错，但会丢失输入体验、校验逻辑和可访问性支持。
哪些是真正被广泛支持的新增 type？
别被 MDN 列表吓到，实际项目中能放心用的只有这几个：
-
email：触发邮箱软键盘，提交时自动校验基础格式（如含 @ 和域名） -
tel：调出数字/符号键盘（无统一校验逻辑，浏览器不验证格式） -
url：校验是否以http://或https://开头（部分浏览器也接受省略协议） -
date/time/datetime-local：触发原生日历/时间选择器（datetime已废弃） -
number：限制输入为数字，支持min/max/step，但注意它仍返回字符串值 -
search：语义化搜索框，部分浏览器添加清空按钮
像 color、range、week、month 等虽存在，但兼容性或交互一致性差，不建议作为核心输入控件依赖。
email 和 url 的校验边界在哪？
它们只做最轻量格式检查，不发请求验证真实性。比如：
立即学习“前端免费学习笔记（深入）”；
-
user@domain会被email接受（缺后缀不算错） -
http://localhost、https://a.b被url接受，但example.com不被接受（缺协议） - 校验仅在
form.reportValidity()或表单 submit 时触发，不监听实时输入 - 可通过
setCustomValidity('')清除默认错误，再用 JS 做深度校验（如 DNS 验证需后端）
date 和 datetime-local 的值格式固定且不可改
所有浏览器返回的 value 都是 ISO 8601 字符串，与用户界面显示无关：
input.value // "2024-05-20"（date） input.value // "2024-05-20T14:30"（datetime-local）
- 没有
format属性，无法改成 “2024年5月20日” 这类中文格式 - 时区处理隐式：
date无时区，datetime-local按本地时区解析，但值中不含时区标识 - 若需服务端友好时间戳，得用 JS 转换：
new Date(input.value).toISOString() - Safari 对
datetime-local支持较晚（iOS 14.5+），旧版本回退到文本输入
tel 是唯一完全不校验的“新增类型”
它的唯一作用就是告诉移动端弹出电话键盘（含 * # 号），其他全是空的：
- 不会拒绝输入字母，也不会提示格式错误
-
required仍生效，但空格或纯符号也算“已填” - 想校验手机号？必须用
pattern（如pattern="[0-9]{11}"）或 JS 正则 - 国际号码场景更复杂：
+86 138 1234 5678合法，但pattern很难覆盖所有写法，建议后端兜底
这些类型不是银弹——它们的价值取决于你是否愿意接受其行为边界，并准备好 fallback 和增强逻辑。
