⌨
HTML input 类型
HTML <input> 的 type 取值速查，含用途与移动端键盘提示。
本地处理 · 不上传
加载工具中…
相关：input type · HTML表单 · date · email · range
HTML input 类型列出所有 input 的 type 取值及其行为与移动端键盘表现。选对类型能显著改善移动端的输入体验。
使用步骤
- 按要采集的数据类型挑选 type
- 注意移动端会据此切换软键盘
- 确认该类型在目标浏览器的支持与降级表现
- 日期、颜色等类型的原生控件外观无法完全统一，需要时自行实现
使用场景
- 为表单字段选择合适的类型
- 优化移动端的输入键盘
- 利用浏览器的内置校验
- 理解各类型的兼容性
小贴士
- type 决定移动端弹出的键盘：tel 弹数字键盘、email 弹带 @ 的键盘。选对类型是改善移动端体验成本最低的一步。
- 浏览器的内置校验（required、pattern、type=email）能提供即时反馈，但绝不能替代服务端校验——它可以被完全绕过。
- type=number 在部分浏览器中允许输入 e 和加减号，且会因滚轮误改数值。纯数字输入有时用 text 配合 inputmode 更可控。
常见问题
手机号该用什么 type？
用 tel。它会弹出数字键盘且不做格式校验（各国号码格式差异太大）。用 number 会带来滚轮改值、允许输入 e 等问题，且会去掉前导零。
内置校验够用吗？
作为用户体验的即时反馈很好用，但绝不能作为安全依赖。任何人都能绕过前端直接发请求，服务端必须独立完整地校验所有输入。
type=number 有什么坑？
部分浏览器允许输入 e、加号减号；鼠标滚轮悬停时会意外改变数值；前导零会被去掉。对于编号、验证码这类「数字形式的字符串」，用 text 配合 inputmode="numeric" 更合适。
HTML input 类型是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用HTML input 类型，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。