结论：text、password、email、number、date、checkbox、radio、file、submit 这9种是真正高频、语义明确、浏览器校验有效、移动端适配靠谱的常用类型；其余如week、datetime-local等兼容性或实用性有限，不建议优先使用。
直接说结论：text、password、email、number、date、checkbox、radio、file、submit 这 9 种是真正高频、语义明确、浏览器校验有效、移动端适配靠谱的常用类型。其余如 week、datetime-local 等虽存在，但兼容性或实用性有限，别一上来就用。
哪些 type 会触发浏览器原生校验？
只有明确声明语义且被广泛实现的类型，在 form.submit() 或调用 input.reportValidity() 时才会自动校验格式：
-
email：要求含@，前后至少一个字符（u@x合法，@单独不合法） -
url：允许无协议（example.com通过），但若带https://必须格式完整；foo不通过 -
number：只检查是否可解析为数字（12e3合法，12.3.4不合法）；valueAsNumber对非法值返回NaN -
date、time、month等：只校验 ISO 字符串格式，不校验逻辑有效性（2026-02-30会被接受但 UI 显示为空） -
tel和search：完全不校验格式，仅影响键盘样式和 UA 行为
移动端键盘适配靠 type，不是靠 JS
iOS 和 Android 原生根据 type 切换软键盘布局，这是 HTML 层能力，JS 无法模拟：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
tel→ 数字键盘（含*#），适合国内手机号；别用number，它会吞掉开头的0，长数字还可能显示成科学计数法 -
email→ 键盘带@和.com快捷键；加inputmode="text"会覆盖此行为，失去快捷键 -
url→ 键盘带/和.com；若强制要求 HTTPS，得配合pattern="^https?://.+" -
search→ iOS 自带清空按钮（×），部分安卓键盘加搜索图标；text没这个效果
动态改 type 会导致 value 失效
input.type = "number" 这类赋值看似简单，但实际会重置控件内部状态：
-
valueAsNumber、valueAsDate等属性在type切换后立即失效，返回NaN或null - 原始
value字符串仍保留在 DOM 中，但 UI 可能清空（尤其日期类），造成“值丢了”的错觉 - 正确做法是：用
display: none+visibility: hidden切换不同type的input元素，而非复用同一个元素 - 例如手机号输入场景，不要在
text和number之间切换，而应准备两个input，按需显隐
日期类 type 的 value 格式必须严格 ISO
所有日期相关 type 的 value、min、max 都只认 ISO 8601 字符串，浏览器不会帮你转换：
-
date：必须为"YYYY-MM-DD"（"2026-04-30"✅，"30/04/2026"❌，"2026-4-30"❌） -
datetime-local：格式为"YYYY-MM-DDThh:mm"或"YYYY-MM-DDThh:mm:ss"（T不可省略） - 服务端传来的日期字符串若非 ISO 格式（比如
"2026/04/30"），必须前端手动格式化后再赋给value，否则控件不显示
最常被忽略的是：日期控件的 value 是字符串，不是 Date 对象；想转成时间戳得先用 new Date(input.value) 解析，而且要注意时区——date 类型默认是本地时区，datetime-local 也是，但没 UTC 偏移信息，别直接丢给后端当 ISO 时间用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
