推荐生产环境使用的 input type 包括 text、email、tel、url、number、date、search、checkbox、radio；其中 number 类型存在粘贴非数字变空、小数点处理异常等坑，需配合 inputmode 精准控制键盘，避免使用 datetime 等废弃类型。
HTML5 的 标签 type 属性远不止 text 和 password，但不是所有类型都通用、安全或有实际意义——选错 type 可能导致移动端键盘不匹配、表单验证失效、甚至被 Safari 或旧版 Android 忽略。
哪些 type 是真正可用且推荐在生产环境使用的
以下 type 在现代浏览器（Chrome 80+、Firefox 75+、Safari 14+、Edge 90+）中行为稳定，有原生验证、语义化支持和移动端适配：
-
text：通用文本输入，无自动校验，但可配合pattern或required -
email：触发邮箱格式校验（user@domain.tld），iOS 键盘显示 @ 符号 -
tel：无强制格式校验（别信“会校验手机号”），但唤起数字键盘，适合电话/验证码 -
url：要求输入以http://或https://开头（部分浏览器允许省略协议） -
number：支持min/max/step，注意：值始终是字符串，需用parseFloat()转换 -
date：YYYY-MM-DD格式，不支持时间；Safari 14+ 才有原生 picker -
search：语义明确，部分浏览器自动添加清空按钮，CSS 可用::-webkit-search-cancel-button -
checkbox和radio：表单控件基础类型，必须带name才能分组提交
type=“number” 的坑比你想象的多
number 类型常被误认为“只允许输入数字”，但它在实际交互中存在多个反直觉行为：
- 用户仍可粘贴非数字内容（如
"123abc"），此时value为空字符串，而非截断后剩余部分 - 小数点和负号（
-）被允许，但连续输入多个小数点（12..3）会被视为无效，input.value返回空字符串 - Firefox 不支持
step="any"，若需任意精度浮点数，得降级用type="text"+inputmode="decimal" - Android Chrome 中，
step="0.01"无法阻止用户手动输入0.001，校验必须靠 JS 或后端
移动端键盘适配关键：inputmode 配合 type 使用
type 决定语义和基础行为，inputmode 才真正控制软键盘类型——尤其当 type 不够精确时（比如手机号不用 number，而用 tel + inputmode="numeric"）：
立即学习“前端免费学习笔记（深入）”；
-
inputmode="numeric"：纯数字键盘（无符号、无小数点），适合金额整数、ID -
inputmode="decimal"：带小数点的数字键盘（iOS 支持，Android 部分支持） -
inputmode="tel"：电话键盘（含 * #），比type="tel"更可靠 -
inputmode="email"：键盘显示 @ 和 . 字符，比type="email"更轻量（不触发校验）
注意：inputmode 在 type="text" 下最有效；若设为 type="number"，某些 Android 版本会忽略 inputmode。
已废弃或极度不建议使用的 type
以下类型要么已被标准移除，要么行为混乱、兼容性差，应避免：
-
datetime：HTML5 初期定义，2014 年起被废弃，所有浏览器均不支持 -
datetime-local：虽未废弃，但 Safari 对其valueAsNumber支持不一致，且 picker UI 差异大，建议用date+time分离处理 -
color：看似有用，但 iOS Safari 一直不支持原生 picker，Android 厂商定制键盘也常无响应 -
range：滑块控件，但默认样式难定制，无障碍支持弱，复杂场景建议用 JS 库替代
真实项目中，type 的选择本质是权衡：语义清晰度、移动端体验、校验可控性。很多时候，type="text" 配合 inputmode、pattern 和 JS 校验，比强行套用某个“高级 type”更可靠。
