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.

How to use it:

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

Changelog:

v1.2.4 (2018-07-08)

• Revert "Fix autofill fields on pageload"
• Empty placeholder does not float label

v1.2.3 (2018-06-22)

• Fix autofill fields on pageload

 

---

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