Form Label Design
Web forms are often a tedious experience. There’s a lot to be said for keeping questions to a minimum. Do I really need to enter my name across three fields, can’t you just call me “Dave”?
To save space and reduce visual noise it’s become quite common to repurpose HTML placeholders. But as we should all know: Placeholder Attribute Is Not A Label! For semantics and accessibility a real
<label> should precede its corresponding
Matt D. Smith recently shared a floating label pattern for an iOS app:
Copyright © Matt D. Smith
Quite a nice idea if you ask me. I’m not suggesting it should be the default and I don’t plan to copy the idea myself in projects but as an experiment I tried to create the effect in HTML & CSS.
Here is my result on CodePen:
The HTML is very simple so providing fall back styles for older browsers should be easy (IE9 and below don’t support
<div class="field"> <label class="field__label" for="form-name">Name</label> <input class="field__input" required type="text" placeholder="Name…" id="form-name"> </div>
It’s impossible to tell if an input field is empty with CSS selectors (the
:empty pseudo-class represents any element that has no children). My experiment abuses
:valid and because the input field has a
required attribute it becomes invalid when empty. For this reason the technique only works as expected on
<input type="text">. With more complex validation requirements, like an email, the floating label won’t appear immediately.