记录下

Matt Smith是位著名的设计师和开发者，专注于UX/UI。他在博客中分享了一种新颖的表单交互模式，也就是我们所说的浮动式标签。在这种模式中，当用户聚焦于某个输入框并输入内容之后，原有的内联标签就会“浮”到已输入的内容之上。

Matt Smith在 博客中解释道，他第一次尝试使用相同的概念将占位符变成一个图标，但是没有坚持下来。这是因为他觉得不够好，没有将占位符/标签信息表达清楚，于是Matt决定让文字“动”起来。

使用浮动标签有许多优点，当用户聚焦于字段并输入内容之后，仍可保持上下文信息可见。这带来了更好的可访问性。在默认情况下可以保持简洁，便于视线扫描。这种模式在默认情况下就是原来的内联标签，只有当用户产生交互行为后才会成为浮动样式。总的来说，这种模式很棒。

Code

Jesse Shawl创建的这款Codepen代码编辑工具很强大，它可以帮助你创建完美的、可视的浮动标签模式。下面我们就来演示如何在HTML、CSS以及JavaScript中创建浮动式标签。

HTML

在HTML中首先我们需要创建一个表格，你只需将下面这段代码复制您的网页中即可使用。该代码旨在使其看起来像有一个动画的占位符。