Gonna Pivot

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

1. 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.
2. 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:

1. Label status & color based on valid or invalid input values
2. Combination of :focus, :valid, :invalid to highlight label status
3. transition on label 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 :)