HTML input类型有哪些_html input所有type类型一览【附代码】

HTML input类型有哪些_html input所有type类型一览【附代码】的重点在于把前置条件、操作顺序和容易误判的地方分清楚。

现代浏览器稳定支持且有明确语义的 input type 共12种：text、password、email、url、tel、number、range、date、datetime-local、month、week、color；search 和 hidden 也可用；checkbox、radio、file、submit、reset、button 属核心用法；datetime等已废弃，time、image 等场景极窄不建议选用。

HTML <input> 的 type 属性不是固定列表，而是分三类：浏览器原生支持的、被废弃的、以及未被广泛实现的实验性类型。真正该用、能用、有实际意义的，不超过 12 种。

哪些 type 值现在还能放心用

现代浏览器（Chrome/Firefox/Safari/Edge ≥ 2022）稳定支持且有明确语义和行为的 type 值如下：

1. text、password、email、url、tel、number、range、date、datetime-local、month、week、color
2. search 和 hidden 也完全可用，但行为接近 text 和无渲染，语义略强
3. checkbox、radio、file、submit、reset、button 这些非文本型控件，虽不依赖输入校验，但属于 <input> 的核心用法，必须包含

像 datetime（已废弃）、time（虽存在但 Android WebView 支持差）、image（极少单独用）这类，要么失效，要么场景极窄，不建议主动选用。

type="number" 不等于“只能输数字”

它只是触发数字键盘（移动端）+ 提供上下箭头 + 允许 min/max/step 约束，但用户仍可粘贴字母、清空内容、甚至输入 e 或 - —— 浏览器不会阻止，valueAsNumber 会返回 NaN。

1. 要真正限制输入，得结合 inputmode="numeric"（软键盘提示）+ JavaScript 监听 input 事件过滤
2. type="number" 的 step="any" 可接受小数，但 Safari 对 step="0.01" 解析不稳定，建议统一用 step="1" + 后端校验精度
3. 不要用它存金额：19.99 可能被解析为 19.990000000000002，该用字符串或后端处理

type="date" 的兼容性和真实行为

桌面 Chrome/Firefox 显示原生日期选择器；Safari 直到 v16.4 才完整支持 datetime-local，旧版仅 fallback 为文本框；iOS Safari 虽显示日历，但 value 始终是 YYYY-MM-DD 格式字符串，无法直接读取 Date 对象。

1. 不能依赖 input.valueAsDate 在所有环境返回有效 Date 实例，IE 完全不支持，需降级处理
2. 设置默认值必须用规范格式：<input type="date" value="2024-05-20">，写成 "20-05-2024" 或 "May 20, 2024" 会被忽略
3. 安卓原生浏览器对 min/max 的限制常不生效，得靠 JS 补充校验

别碰这些已失效或高风险的 type

datetime（HTML5 已移除）、keygen（从未真正落地，2017 年起被各大浏览器弃用）、output（不是 input 类型，是独立标签）—— 这些在 MDN 文档里已标为“deprecated”或“obsolete”，查兼容性表（caniuse.com）也能确认它们在主流版本中无实际作用。

1. type="search" 看似无害，但它在 Safari 中会自动添加删除按钮，且 appearance: none 无法完全隐藏，CSS 覆盖成本高于收益
2. type="color" 在部分 Linux 桌面环境或旧 Android 上只显示文本框，选色功能不可用，如需强一致性，应换用第三方色盘库

真正难处理的不是类型数量，而是每个 type 在不同平台下对 value、事件触发时机、键盘行为、无障碍属性的支持差异——这些细节比记住 20 个类型名重要得多。