无需登录 数据私有 本地保存

HTML输入类型大全 - 所有type现场演示

11
0
0
0

HTML Input 类型大全

覆盖HTML5规范中全部 22种 input type 属性值，现场演示每种类型的渲染效果与交互行为，一目了然。

4大分类 22种类型 移动端适配 实时交互演示
文本与输入类 7种
type="text" 默认类型

最通用的单行文本输入，默认type。支持所有字符。

type="password" 掩码输入

字符被掩码隐藏，防止旁人窥屏。点击眼睛图标可切换显示。

type="email" 邮箱验证

浏览器自动校验邮箱格式。移动端调出含@的邮箱键盘。

type="url" 网址输入

自动校验URL格式。移动端键盘含 .com 等域名后缀键。

type="number" 数字步进

带增减箭头，支持min/max/step。移动端弹出数字键盘。

type="tel" 电话输入

桌面端外观同text，移动端调出电话键盘，方便号码输入。

type="search" 搜索框

部分浏览器显示清除按钮(×)。移动端键盘含搜索键。

日期与时间类 5种
type="date" 日期选择

弹出日历面板，选择年月日。格式为 YYYY-MM-DD。

type="time" 时间选择

弹出时间面板，选择小时和分钟。格式 HH:MM。

type="datetime-local" 日期+时间

日期+时间组合选择。注意旧type="datetime"已废弃。

type="month" 月份选择

选择年份+月份，格式 YYYY-MM。适合信用卡过期等场景。

type="week" 周次选择

选择年份+周次，格式 YYYY-Www。适合周报等场景。

交互与选择类 5种
type="color" 颜色拾取
#4f46e5

弹出系统颜色选择器，返回十六进制颜色值。

type="range" 滑块
65

滑块拖拽选择数值。支持min/max/step精确控制。

type="file" 文件上传
未选择文件

弹出文件浏览对话框，支持accept限制类型、multiple多选。

type="checkbox" 复选框
当前选中: 选项 A

多选，每个独立勾选。常用于同意条款、多项选择。

type="radio" 单选按钮
当前选中: 选项 1

互斥单选，同name属性下只能选一个。

按钮与特殊类 5种
type="submit" 提交按钮

触发表单提交动作，将数据发送到action指定的URL。

type="reset" 重置按钮

一键清空所有表单字段，恢复为初始默认值。

type="button" 普通按钮

无默认行为，需绑定JavaScript事件。最灵活的按钮类型。

type="image" 图像提交

用图片替代提交按钮，点击时附带坐标(x,y)参数。

type="hidden" 隐藏字段
此类型在页面上不可见
<input type="hidden" name="token" value="abc123">

存储不展示给用户的数据，随表单提交发送到服务器。

常见问题与知识点 SEO友好
HTML5 新增了哪些 input 类型？

HTML5 新增了 email、url、number、tel、search、date、time、datetime-local、month、week、color、range 等类型，大幅丰富了表单输入体验，减少了JavaScript辅助验证的工作量。

type="datetime" 和 datetime-local 有什么区别？

datetime 在HTML5规范中已被废弃，因为它要求包含时区信息，实现复杂。现在应使用 datetime-local，表示不带时区的本地日期时间。

移动端不同 input type 如何影响键盘？

移动端浏览器会根据type属性智能切换键盘布局：email显示含@的键盘、url显示含.com的键盘、tel显示电话数字键盘、number显示数字键盘、search显示含搜索按钮的键盘。这是提升移动端UX的关键。

type="number" 如何限制输入范围？

使用 min 和 max 属性设定数值范围，step 控制步进精度。例如 min="0" max="100" step="5" 允许输入0到100之间5的倍数。同时可配合JavaScript做更严格的校验。

浏览器不支持的 input type 会怎样？

浏览器遇到不认识的type值会自动降级为 type="text"，这是一种优雅的降级机制。因此使用HTML5新类型不会破坏旧浏览器的兼容性，只是失去了增强的交互体验。

type="file" 如何限制文件类型和多选？

使用 accept 属性限制可接受的文件MIME类型（如 accept="image/*" 只选图片，accept=".pdf" 只选PDF）。添加 multiple 属性即可支持同时选择多个文件。

如何为 type="range" 添加刻度标记？

HTML原生range不支持刻度标记，但可以通过 datalist 元素配合 list 属性实现刻度提示：<datalist id="ticks"><option value="0"><option value="50"><option value="100"></datalist>，然后在range上添加 list="ticks"。

type="hidden" 安全吗？能否用来存储敏感数据？

不安全。hidden字段仅是在页面上不可见，但用户可以通过查看页面源代码或开发者工具直接看到和修改其值。绝不要用hidden存储密码、令牌等敏感信息。敏感数据应在服务端处理。

提示：所有演示输入框均可直接交互操作，尝试修改数值、选择日期、拖拽滑块，体验各类型的原生行为。

🔧 相关工具