jQuery Plugin For Floating Form Input Labels

jQuery Plugin For Floating Form Input Labels

Floating Form Labels is a jQuery plugin to create theĀ float label pattern that floats the inline label up above the text field when focused. Supports both input field and textarea. Also works with the native placeholder attribute.

1. Wrap the text fields and lables into containers with the 'ffl-wrapper' class.

<form>
  <div class="ffl-wrapper">
    <label for="name" class="ffl-label">Name</label>
    <input type="text" id="name" name="name" placeholder="Your Name">
  </div>
  <div class="ffl-wrapper">
    <label for="email" class="ffl-label">Email</label>
    <input type="email" id="email" name="email">
  </div>
  <div class="ffl-wrapper">
    <label for="message" class="ffl-label">Message <span>(optional)</span></label>
    <textarea id="message" name="message"></textarea>
  </div>
  <button type="submit">Send</button>
</form>

2. Download and insert the JavaScript file 'floatingFormLabels.min.js' after jQuery library.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="dist/floatingFormLabels.min.js"></script>

3. Initialize the Floating Form Labels plugin.

$('.ffl-wrapper').floatingFormLabels();

4. Style and animate the floating form labels with the following CSS/CSS3 rules.

.ffl-wrapper .ffl-label {
  transition-property: all;
  transition-duration: 200ms;
  transition-timing-function: ease;
  transition-delay: 0s;
  position: absolute;
  white-space: nowrap;
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  pointer-events: none;
  top: 1.25rem;
}
.ffl-wrapper.ffl-floated .ffl-label { top: 0; }
.ffl-label {
  color: #909090;
  line-height: 1.2;
}
.ffl-floated .ffl-label {
  color: #0289f3;
  font-size: 0.75rem;
}

This awesome jQuery plugin is developed by Baedda. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 08.03.2018
  • Source