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

浮动标签文本框生成器 - Material风格

前端设计 生成器 浮动标签 生成 表单
59
0
0
0

Material 浮动标签文本框生成器

实时预览 · 高度自定义 · 一键复制代码 · Material Design 风格

实时预览 — 点击输入框体验浮动标签效果
⚠ 这是错误提示信息
✓ 验证通过
配置面板
生成的 HTML + CSS 代码
常见问题与知识点

浮动标签是 Google Material Design 中的一种输入框设计模式。标签最初显示在输入框内部（类似占位符），当用户聚焦或输入内容时，标签会平滑地上移到输入框上方。这种设计节省了空间，同时确保用户始终知道输入框的用途，避免了传统占位符在输入后消失的问题。

传统 placeholder 在用户开始输入后就会消失，用户可能忘记输入框的用途。浮动标签始终可见，即使输入框已填充内容，标签仍显示在上方，提升了可用性和无障碍访问体验。在移动端，浮动标签还能有效节省屏幕空间。

Outlined（轮廓风格）：输入框有完整的边框线，标签浮动后会有一个小背景遮挡边框，形成视觉"缺口"，看起来更加精致现代。
Filled（填充风格）：输入框有浅色背景填充和底部边框线，标签浮动后位于填充背景之上，视觉更柔和，适合表单密集的场景。两种风格都符合 Material Design 规范。

本工具生成的浮动标签使用纯 CSS 实现，依赖 :focus、:placeholder-shown 伪类和 CSS transitions。所有现代浏览器（Chrome、Firefox、Safari、Edge）均完美支持。:placeholder-shown 在 IE 中不被支持，如需兼容 IE，需使用额外的 JavaScript 类名切换。

确保使用 <label> 元素并正确关联 for 属性与 input 的 id。标签使用 pointer-events: none 确保点击能传递给输入框。辅助文字应使用 aria-describedby 关联。颜色对比度需满足 WCAG AA 标准（至少 4.5:1）。

完全可以！浮动标签同样适用于 textarea。原理相同——标签初始在 textarea 内部，聚焦或有内容时浮动到上方。本工具支持 textarea 类型，生成的代码对 input 和 textarea 均有效。

CSS 伪类 :placeholder-shown 仅在 placeholder 属性存在且内容非空时生效。设置 placeholder=" "（一个空格）可以确保该伪类正常工作，同时视觉上不显示任何占位符文字。这是 Material 浮动标签实现的关键技巧。
🔧 相关工具