HTML5新增input类型包括email、url、tel、number、date、time、search、color等，旨在提升语义化、移动端体验及内置校验；HTML4实际支持10种类型，含file等易被忽略的“老面孔”。
HTML5 新增的
HTML4 确实只正式定义了 text 和 password 两种基础类型（还有 hidden、checkbox、radio 等控件类型，但语义化输入类型极少）。HTML5 则大幅扩展了原生支持，核心目标是：更精准的语义、更好的移动端体验、内置校验能力、减少 JS 依赖。
最常用且有实际价值的 HTML5 input 类型
以下类型在现代项目中高频使用，浏览器支持良好（Chrome/Firefox/Safari/Edge 均已稳定支持多年）：
-
email：触发邮箱软键盘，自动校验格式（如必须含@），表单提交时浏览器会拦截明显错误值 -
url：触发网址软键盘，校验是否以http://或https://开头（或允许相对路径，取决于require属性） -
tel：触发数字/电话键盘，**不校验格式**（正则需手动加pattern），纯为输入体验优化 -
number：带上下箭头，限制只能输数字，支持min/max/step；注意：值始终是字符串，需parseFloat()或parseInt()转换 -
date：YYYY-MM-DD格式，触发日期选择器（iOS/Android 原生，桌面端 Chrome/Firefox 也支持） -
time：24 小时制时间（HH:MM），同上触发原生选择器 -
search：视觉上常带清除按钮（X），部分浏览器对空格处理更友好 -
color：点击弹出系统级取色器，返回 7 位十六进制字符串（如"#ff0000"）
容易踩坑的兼容性与行为细节
不是所有“新增类型”在所有场景下都可靠，尤其涉及校验和回退逻辑时：
-
date/time/datetime-local在 Safari 15.4 之前不支持valueAsDate，获取值建议统一用input.value字符串再解析 -
number的step="any"在旧版 Safari 中可能被忽略，导致小数输入被截断，建议显式设step="0.01"等具体值 -
email和url的校验非常宽松（例如a@b被认为合法），生产环境仍需后端或 JS 正则加强校验 - IE10 及以下完全不识别 HTML5 类型，会自动降级为
text—— 所以type="email"在 IE 中只是个普通文本框，无校验无键盘优化 -
type="range"滑块没有默认数值显示，需配合或 JS 实时更新
HTML4 真的只有 text/password？别漏掉这些“老面孔”
HTML4 规范中明确列出的 type 值其实有 10 种左右，包括：
立即学习“前端免费学习笔记（深入）”；
其中 file 是关键遗漏点——它早在 HTML4 就存在，只是功能受限（单文件、无拖拽、无预览），HTML5 后才通过 multiple、accept、File API 等增强。
真正需要警惕的是：别把 type="search" 或 type="color" 当成“万能解”，它们解决的是特定场景下的体验和轻量校验，复杂业务逻辑（比如日期范围联动、邮箱域名白名单）还得靠 JS 控制。
