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.
- 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
- Combination of
:invalidto highlight label status
labelto make the animation
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 :)