DEV Community

Diana Le
Diana Le

Posted on

Add Some Bounce to your Forms with Animated Floating Labels

How to Style Form Labels like Placeholders

Disclaimer: Forms with labels directly on top of the inputs have always looked perfectly fine to me. I never understood the movement a few years ago to design forms without labels. You can fit a lot more useful text above the input than trying to cram all it in as a placeholder.

That being said, there may be times when it makes sense to style forms this way, so I decided to revisit these label/input combinations for Codepen's weekly challenge "Lightness", while also making sure to keep these components accessible:

These "floating" labels are not new, and here they're styled to be more bouncy than you'd probably want to use on most of your sites. But the structure is what's important here as the CSS can always be tweaked. So let's make sure to make these as accessible as possible following some of the tips outlined in this Smashing Magazine article about the cons of using placeholders.

Keep the <label> Tags

This example is not even using placeholders at all. Instead the label tag has been styled to sit inside the input tag, so it can keep the relevant HTML connection to the input.

<div class="form-input">
   <label for="firstName">First Name</label>
   <input type="text" id="firstName" name="firstName" autocomplete="given-name" />
</div>
Enter fullscreen mode Exit fullscreen mode

Keep the Labels during and after the User has Filled in their Information

This is where JavaScript is necessary. You can style the labels to rise and float above the field when the input is focused with CSS, but we need to keep the labels after users have finished and focused out of the input so it's easier for them to review their information. If you use placeholders, the useful text will disappear once the input is filled in.

When a user clicks into the input, I'm adding a class of "floating," and keeping the label there permanently unless the user doesn't fill out the input, in which case it returns to its original location.

// Add floating class
function floatLabel(e) {
   e.currentTarget.parentElement.classList.add("floating");
}

// Only remove floating class if there is no text in the input
function checkInput(e) {
   if (!e.currentTarget.value.length) {
      e.currentTarget.parentElement.classList.remove("floating");
   }
}
Enter fullscreen mode Exit fullscreen mode

Conclusion

When I started doing web development I was concerned with just making sure elements were styled like the design - which is challenging in itself, especially with form elements - but now I'm paying more attention to the structure to make sure that I'm not making it more difficult for people to use my sites because of the way they're styled.

Discussion (3)

Collapse
k1dv5 profile image
Kidus Adugna

Nice article. On question, instead of using labels, couldn't we just move the placeholder itself out of the input when the input is focused? (Haven't tried it but just an idea)

Collapse
dianale_dev profile image
Diana Le Author

I think the placeholder is pretty limited in terms of what you can style with CSS. Also the other main issues are that the placeholder text will go away once you fill in the text input, and they don't provide information for accessibility like form labels do.

Collapse
k1dv5 profile image
Kidus Adugna

You're right. My idea was to move the placeholder upward once the user starts typing, but when I tried to change its margin, it disappeared into the input border and changing the z-index didn't have any effect.