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>

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");
   }
}

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.