HTML5新增13个type值，其中date、time、datetime-local、month、week会弹出原生选择器；email、url、number有客户端校验但无专用UI；range渲染滑块，color调起拾色器；不支持时自动退化为text。
input 元素的类型远不止 text、password、submit 这些传统类型。HTML5 新增了 13 个 type 值，其中真正带来 UI 变化和实用校验能力的有 7 个：date、time、datetime-local、month、week、email、range。其余如 url、tel、search、color、number 等虽也属新增，但部分仅触发软键盘适配或基础正则校验，UI 行为较弱。
哪些 type 会弹出原生选择器？
只有明确带「时间/日期语义」且浏览器实现完整的类型，才会在点击时唤起系统级选择器（桌面端下拉日历、移动端原生日历/时间面板）：
-
date：显示年-月-日，支持 Chrome/Firefox/Safari（macOS/iOS），IE 完全不支持 -
time：仅小时+分钟，无秒；Safari 旧版（≤15.6）不支持 -
datetime-local：最常用，本地时区，避免 UTC 转换陷阱；Firefox 直到 2025 年才完全支持 -
month和week：UI 较简陋，week的格式是YYYY-W##（如2026-W15），后端解析需注意
⚠️ 注意：datetime（带 UTC）已被废弃，所有现代项目应改用 datetime-local。
哪些 type 有客户端校验但无专用 UI？
这类类型不会改变输入框外观，但会在 form.submit() 或调用 checkValidity() 时触发内置验证逻辑：
立即学习“前端免费学习笔记（深入）”；
-
email：校验基本格式（a@b.c），但不验证域名是否存在；Safari iOS 会弹出带@和.com快捷键的键盘 -
url：要求以http://或https://开头（部分浏览器宽松匹配）；不校验可访问性 -
number：阻止非数字字符输入（除-、.、e），但step默认为 1，小数需显式设step="0.01" -
tel：无强制校验，纯语义提示；仅触发达成软键盘数字布局
? 提示：若需强校验（如邮箱 MX 记录检查），必须依赖后端或 JS 手动补充正则，不能只信 type="email"。
range 和 color 的行为差异在哪？
range 和 color 都是带控件的类型，但交互逻辑完全不同：
-
range：默认渲染为水平滑块，值为字符串数字（"50"），需用parseInt(input.value)转换；min/max/step必须为数字字符串，否则降级为文本框 -
color：始终显示为色块 + 拾色器，值恒为 7 位十六进制（"#ff0000"）；不支持min/max，也无法绑定valueAsNumber
⚠️ 坑点：Chrome 对 range 的 step="any" 支持不稳定，Firefox 不识别，建议固定步长；color 在 Safari 14–15 中存在无法读取初始值的 bug，需手动设 value="#000000" 避免空值。
不被支持时 fallback 到什么？
所有新增 type 在不支持的浏览器中（如 IE11、老版 Android WebView）会自动退化为 type="text"，样式和功能完全丢失，但表单仍可提交。
- 不推荐用 JavaScript 特性检测后动态替换 DOM（易引发 focus 丢失、React/Vue 更新冲突）
- 更稳妥的做法是：保留原生
type，用 CSS 加一层视觉提示（如日期旁加 ? 图标），再用 JS 补充轻量级日历库（如 flatpickr）仅对不支持者激活 -
placeholder和required属性仍生效，可作为最低限度体验保障
真正容易被忽略的是时区处理——datetime-local 的值永远是本地时间字符串（如 "2026-04-12T14:30"），没有时区偏移，后端收到后必须按客户端时区解释，不能直接当 UTC 存。
