Matt Smith是位著名的设计师和开发者,专注于UX/UI。他在博客中分享了一种新颖的表单交互模式,也就是我们所说的浮动式标签。在这种模式中,当用户聚焦于某个输入框并输入内容之后,原有的内联标签就会“浮”到已输入的内容之上。
Matt Smith在 博客中解释道,他第一次尝试使用相同的概念将占位符变成一个图标,但是没有坚持下来。这是因为他觉得不够好,没有将占位符/标签信息表达清楚,于是Matt决定让文字“动”起来。
使用浮动标签有许多优点,当用户聚焦于字段并输入内容之后,仍可保持上下文信息可见。这带来了更好的可访问性。在默认情况下可以保持简洁,便于视线扫描。这种模式在默认情况下就是原来的内联标签,只有当用户产生交互行为后才会成为浮动样式。总的来说,这种模式很棒。
Code
Jesse Shawl创建的这款Codepen代码编辑工具很强大,它可以帮助你创建完美的、可视的浮动标签模式。下面我们就来演示如何在HTML、CSS以及JavaScript中创建浮动式标签。
HTML
在HTML中首先我们需要创建一个表格,你只需将下面这段代码复制您的网页中即可使用。该代码旨在使其看起来像有一个动画的占位符。