type属性决定input的行为和语义，直接影响渲染、校验、键盘唤起及数据格式：如type="email"自动校验@符号，type="number"触发数字键盘并校验数值，而type="tel"仅优化键盘无校验。
type 属性决定 input 的行为和语义
type 不是装饰性属性，它直接控制浏览器如何渲染、验证、唤起键盘、触发校验逻辑，甚至影响表单提交时的数据格式。比如 type="email" 在提交时会自动检查是否含 @，而 type="text" 完全不干预；type="number" 在 iOS 上唤出数字键盘，但若写成 type="text" 再加 inputmode="numeric"，只是键盘提示，不带内置校验。
哪些 type 值能真正减少 JS 校验代码
以下类型在现代浏览器中自带基础校验，且无需额外 JS 就能拦截无效提交（前提是没加 novalidate）：
-
type="email"：拒绝不含@或多个@的输入（如a@b@c会被拦） -
type="url"：要求协议头（http://或https://），空值或纯域名（如example.com）会报错 -
type="number"：非数字字符（如12a）、空字符串、超出min/max的值都会使checkValidity()返回false -
type="date"：只接受YYYY-MM-DD格式，2026-02-30这种非法日期也会被拒
注意：type="tel" 和 type="search" 不做任何格式校验，只优化键盘和 UI，别指望它们帮你拦错数据。
移动端键盘适配靠 type，不是 placeholder
用户在手机上点输入框时弹什么键盘，主要由 type 决定，而不是你写了“请输入手机号”这种提示文字：
立即学习“前端免费学习笔记（深入）”；
-
type="tel"→ 弹出带+、*、#的电话键盘 -
type="number"→ 弹出纯数字键盘（无字母） -
type="email"→ 键盘底部显示@和.com快捷键 -
type="url"→ 显示/和.com -
type="text"→ 默认全键盘，哪怕placeholder写的是“邮编”也没用
如果误用 type="text" 处理数字类输入，用户得手动切键盘，体验断层。iOS 对 type="number" 的兼容性比安卓更稳，但所有平台都认 type="tel" 的键盘行为。
容易被忽略的兼容性坑
某些 type 值在旧浏览器里会自动退化为 type="text"，但退化后不报错也不警告，导致功能静默失效：
-
type="datetime-local"：Safari 一直不支持，直到 Safari 16.4（2023 年中）才部分支持，此前所有日期时间逻辑必须 fallback 到 JS 插件 -
type="color"：IE 完全无视，Edge 18 及更早也当text处理，且无法通过 CSS 伪元素模拟原生色盘 -
type="range"：IE10+ 支持，但默认样式极难统一，拖动反馈延迟明显，不适合精度要求高的场景（如音量调节） -
type="file"的multiple和accept：Android 4.4 以下对accept="image/*"基本无效，用户仍可选任意文件
判断是否可用不能只看 caniuse 数据，得在目标机型真机测——特别是微信内置浏览器，它基于旧版 X5 内核，对 type="date" 的支持常比系统 WebView 还差一截。
