Back

Enhance Your Forms with Elegant Floating Placeholder Inputs

Learn how to create visually appealing and user-friendly floating placeholder input fields that improve readability and UX.

HTML Structure

To create a floating placeholder input, you need a container that wraps both the input and label elements. The input field will hold the entered text, while the label will serve as the floating placeholder.

        <div class="input-container">
          <input type="text" class="floating-input" placeholder=" ">
          <label class="floating-label">Enter Text Here</label>
        </div>

JavaScript Enhancements

JavaScript is used to manage the state of the floating label based on focus and blur events of the input field. When the input is focused, the label will float above, and it will return to the original position when the input is blurred and empty.

        document.addEventListener('DOMContentLoaded', function() {
          const inputs = document.querySelectorAll('.floating-input');
          inputs.forEach(input => {
            input.addEventListener('focus', handleFocus);
            input.addEventListener('blur', handleBlur);
          });

          function handleFocus(event) {
            const label = event.target.previousElementSibling;
            if (label) {
              label.classList.add('active');
            }
          }

          function handleBlur(event) {
            const label = event.target.previousElementSibling;
            if (label && event.target.value === '') {
              label.classList.remove('active');
            }
          }
        });

CSS Styling

The styling involves positioning the label relative to the input and using transitions to animate the floating effect. The input has a border and changes color when focused, while the label shifts position and size.

        .input-container {
          position: relative;
          margin: 20px 0;
        }
        .floating-input {
          width: 100%;
          padding: 10px;
          font-size: 16px;
          border: 1px solid #ccc;
          border-radius: 5px;
          background-color: transparent;
          outline: none;
          transition: border 0.3s ease;
        }
        .floating-input:focus {
          border-color: #007BFF;
        }
        .floating-label {
          position: absolute;
          pointer-events: none;
          left: 15px;
          top: 10px;
          transition: 0.3s ease;
          color: #999;
        }
        .floating-input:focus ~ .floating-label,
        .floating-input:not(:placeholder-shown) ~ .floating-label {
          top: -15px;
          left: 10px;
          font-size: 12px;
          color: #007BFF;
        }

Advanced Customizations

Floating placeholder inputs can be customized in various ways to enhance functionality and aesthetics. Consider changing the label colors or size to better match your brand. You can also experiment with different fonts or transition timings for a unique feel. Ensure accessibility by keeping contrast levels high, and consider expanding the functionality for different input types beyond text, such as email or password inputs. On mobile devices, ensure responsiveness by adjusting font sizes and input widths using media queries. Also, adding subtle animations can make the input field more engaging without affecting user experience.

Whole code

<div class="input-container">
  <input type="text" class="floating-input" placeholder=" ">
  <label class="floating-label">Enter Text Here</label>
</div>


<script>
document.addEventListener('DOMContentLoaded', function() {
  const inputs = document.querySelectorAll('.floating-input');
  inputs.forEach(input => {
    input.addEventListener('focus', handleFocus);
    input.addEventListener('blur', handleBlur);
  });

  function handleFocus(event) {
    const label = event.target.previousElementSibling;
    if (label) {
      label.classList.add('active');
    }
  }

  function handleBlur(event) {
    const label = event.target.previousElementSibling;
    if (label && event.target.value === '') {
      label.classList.remove('active');
    }
  }
});
</script>

<style>
.input-container {
  position: relative;
  margin: 20px 0;
}
.floating-input {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: transparent;
  outline: none;
  transition: border 0.3s ease;
}
.floating-input:focus {
  border-color: #007BFF;
}
.floating-label {
  position: absolute;
  pointer-events: none;
  left: 15px;
  top: 10px;
  transition: 0.3s ease;
  color: #999;
}
.floating-input:focus ~ .floating-label,
.floating-input:not(:placeholder-shown) ~ .floating-label {
  top: -15px;
  left: 10px;
  font-size: 12px;
  color: #007BFF;
}
.active {
  top: -15px;
  left: 10px;
  font-size: 12px;
  color: #007BFF;
}
</style>

Thank you for reading this article.

Enhance Your Forms with Elegant Floating Placeholder Inputs

HTML Structure

JavaScript Enhancements

CSS Styling

Advanced Customizations

Whole code

Comments

More inputs

Similar

See also