Float Label Pattern
Though we're meeting forms everyday while surfing the Internet, there always be tons of great ideas to improve user's experiences on filling forms.
Inspired by Float Label with CSS and Float Label Pattern, I totally agree with that the placeholder is not a replacement of label, even it is not semantic.
So I spent some time to make my own implement.
Here's the showcase
Checkout the codes on gist.github.com.
Principle Behind
- First of all, as I said, the placeholder is not a replacement to label, even you're just wanna save some space in design. Alternatively you could use a float / dymanic label like this.
- Color hints / labels is really a good choice responding to user's input. Besides it is easy to implement and need no change to your HTML stracture.
The Real Tricks
As mentioned in the source posts, there're some tricks on implementing this effect using pure CSS:
- Label status & color based on
valid
orinvalid
input values - Combination of
:focus
,:valid
,:invalid
to highlight label status -
transition
onlabel
to make the animation
Problem?
Yep, I'm still feeling that the HTML code a little bit ugly, because the label
tag comes after the input
. However, I cannot found the way to select the previous sibling element by pure css selectors.
If anybody knows how to fix it, please kindly let me know :)