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

HTML Input 类型全览演示 - 每个type实时渲染

12
0
0
0
Input 类型
共 22 种类型

text

文本输入

实时预览
HTML 代码
常用属性
全部类型快速浏览
常见问题 (FAQ)

HTML5 新增了 email、url、tel、number、range、date、time、datetime-local、month、week、color、search 等类型。这些新类型带来了内置验证、更友好的移动端键盘、原生日期/颜色选择器等优势。例如 type="email" 会自动验证邮箱格式，type="number" 在移动端会弹出数字键盘，type="date" 会调出原生日期选择器，大大提升了用户体验。

大多数现代浏览器（Chrome、Edge、Firefox、Safari）对 HTML5 input 类型都有良好支持。但存在一些差异：color 类型在各浏览器的颜色选择器UI不同；date/time 在 Safari 旧版本中支持不完善；datetime-local 在 Firefox 中显示格式略有差异。对于不支持的浏览器，input 会优雅降级为 type="text"，不会影响基本功能。建议在实际项目中进行跨浏览器测试。

value 属性设置 input 的实际默认值，会作为表单数据提交；placeholder 是占位提示文字，当 input 为空时显示灰色提示，用户开始输入后消失，不会作为表单数据提交。对于 checkbox/radio，使用 checked 属性设置默认选中状态；对于 select 的 option，使用 selected 属性。

type="tel" → 电话数字键盘；type="number" → 数字符号键盘；type="email" → 带@符号的邮箱键盘；type="url" → 带.com等域名的URL键盘；type="search" → 带搜索按钮的键盘。正确使用 input 类型可以显著提升移动端表单填写效率。建议配合 inputmode 属性进一步优化（如 inputmode="numeric"）。

HTML5 提供了强大的原生表单验证：required 表示必填项；pattern 接受正则表达式进行自定义验证（如 pattern="[A-Za-z]{3,}" 限制为至少3个字母）；min/max 用于 number/date/range 类型设置数值范围；minlength/maxlength 限制字符长度。验证失败时浏览器会自动显示提示气泡，也可以通过 :valid 和 :invalid CSS伪类自定义样式。

可以通过CSS对input进行深度美化：使用 border、border-radius、padding 调整外观；使用 :focus 伪类定制聚焦状态；使用 accent-color 属性快速改变 checkbox/radio/range/color 的主题色；使用 ::placeholder 伪元素美化占位文字；对于 range 类型，可以使用 accent-color 或针对各浏览器的伪元素（如 ::-webkit-slider-thumb）深度定制滑块样式。

type="hidden" 的 input 在页面中不可见，但会随表单一起提交。常用于：传递CSRF令牌（安全验证）、存储用户ID/会话标识、传递上一步表单的状态数据、记录追踪参数等。虽然用户看不到，但可以通过浏览器开发者工具查看和修改，因此不能依赖hidden字段来存储敏感信息，重要数据必须在服务端验证。
🔧 相关工具