Floating Form Labels

</ head>

<!-- FORM STYLES --> 
<style>
.input-label {
	pointer-events: none;
}

.input::placeholder {
	opacity: 0;
  transition: opacity .2s ease-out;
}

.input:focus::placeholder {
	opacity: 1;
}
</style>

</ body>

<!-- FLOATING FORM LABELS -->
<script>
const inputClass = "input";
const labelActiveClass = "float";

const inputFields = Array.from(document.querySelectorAll(`.${inputClass}`));
inputFields.forEach(focusInput);

function focusInput(field) {
  field.addEventListener("focus", () => {
    field.previousElementSibling.classList.add(`${labelActiveClass}`);
  });

  field.addEventListener("blur", () => {
    if (!field.value) {
      field.previousElementSibling.classList.remove(`${labelActiveClass}`);
    }
  });
}
</script>

HTML/Embed

<!-- FORM STYLES --> 
<style>
.input-label {
	pointer-events: none;
}

.input::placeholder {
	opacity: 0;
  transition: opacity .2s ease-out;
}

.input:focus::placeholder {
	opacity: 1;
}
</style>
Only tabs with a " " have code.
<!-- FLOATING FORM LABELS -->
<script>
const inputClass = "input";
const labelActiveClass = "float";

const inputFields = Array.from(document.querySelectorAll(`.${inputClass}`));
inputFields.forEach(focusInput);

function focusInput(field) {
  field.addEventListener("focus", () => {
    field.previousElementSibling.classList.add(`${labelActiveClass}`);
  });

  field.addEventListener("blur", () => {
    if (!field.value) {
      field.previousElementSibling.classList.remove(`${labelActiveClass}`);
    }
  });
}
</script>
Only tabs with a " " have code.
Only tabs with a " " have code.
Author
CodeCrumbs
Updated on
Aug 10, 2022

How to use:

Tutorial Coming Soon!

Check Browser Support

Interactive Table

With this crumb we can simply create what is commonly known as floating form labels. A UI effect that allows you to display form labels as placeholders initially and animate them to typical labels.

Clone Project
Documentation
Author:
Built by
Built with
For the best experience

Please switch to desktop to view the content.

Back Home
Thank you! Your submission has been received!
Close Form
Oops! Something went wrong while submitting the form.
Become a Contributor