HTML5新增13个input类型，其中date、time、datetime-local、month、week、email、range共7个具独立UI；date选年月日，time选时分秒，datetime-local选年月日及时分（无秒及时区），均以ISO格式提交；range需设min/max/step，值为字符串；email仅做基础格式校验，不验证真实性。
HTML5 新增的表单控件类型有哪些
HTML5 原生新增了 13 个 类型，其中真正有独立 UI 行为、非纯语义增强的实用控件共 7 个： date、time、datetime-local、month、week、email、range。其余如 url、tel、search 等虽也属新增类型，但多数浏览器不提供专用 UI，仅触发基础校验或软键盘优化。
date / time / datetime-local 这三个时间类控件怎么选
它们都依赖系统本地时区，且不支持自定义格式显示（value 始终是 ISO 8601 字符串）。关键区别在于精度和兼容性：
-
date：只选年月日，iOS Safari 支持良好，Android Chrome 默认弹出日历； -
time：只选时分秒（可含秒），部分 Android 厂商定制系统会降级为文本输入； -
datetime-local：年月日 + 时分（无秒、无时区），Chrome 和 Edge 支持，但 Safari 直到 16.4 才支持，旧版直接回退为text。
⚠️ 注意：datetime（带时区）已被废弃，不要用；服务端接收时，date 类型的 value 没有时区信息，需按 UTC 或业务时区统一解释。
range 滑块控件的常见坑点
range 是唯一真正带滑动 UI 的数值控件，但它默认无标注、无反馈，极易被误用：
立即学习“前端免费学习笔记（深入）”；
- 必须显式设置
min、max、step，否则 Chrome 下默认min=0、max=100、step=1，但 Safari 可能表现不同； - 值始终是字符串，需用
parseFloat()或Number()转换； - 无法直接绑定小数步进（如
step="0.1"）在某些 Android 版本会跳变，建议用step="1"+ 后端按比例换算； - 无障碍支持弱，必须配合
和aria-valuetext才能被读屏软件识别。
email 输入框真能防错吗
不能。它只做最基础的格式校验（是否含 @、是否含域名结构），不发请求、不查 MX 记录、不验证邮箱真实存在：
- 合法但无效的地址如
user@localhost、test@..com（部分浏览器会通过）； - 中文邮箱（如
张三@公司.cn）在未启用 IDN 的环境下可能被拒绝； - 移动端会自动唤起带 @ 符号的键盘，这是它最大的实际价值；
- 提交失败仍需后端二次校验，前端
type="email"仅作体验增强和轻量过滤。
别把它当验证工具，只当「友好提示 + 键盘优化」用就对了。
浏览器原生控件看似省事，但每个都有隐性约束：日期类受系统 locale 影响大，range 缺乏视觉反馈，email 校验形同虚设。真要稳定交付，得先测目标用户主力机型+系统版本，再决定哪些用原生、哪些换第三方库补足。
