Author: | richardvenneman |
---|---|
Views Total: | 885 views |
Official Page: | Go to website |
Last Update: | September 22, 2018 |
License: | MIT |
Preview:

Description:
A simple, dependency-free JavaScript plugin that lets you implement the familiar Float Label Pattern in form fields (input and textarea) to improve user experience.
Installation:
# Yarn $ yarn add floatl # NPM $ npm install floatl --save
How to use it:
Include the Floatl’s JavaScript and stylesheet on the webpage.
<link href="lib/css/floatl.css" rel="stylesheet"> <script src="lib/js/floatl.js"></script>
Add the following CSS classes to your existing form fields:
<div class="floatl js-floatl"> <label class="floatl__label">Username</label> <input class="floatl__input" placeholder="Username" type="text"> </div> <div class="floatl js-floatl"> <label class="floatl__label">Password</label> <input class="floatl__input" placeholder="Password" type="password"> </div>
Initialize the Floatl and we’re done.
new Floatl(document.querySelectorAll('.js-floatl')[0]) new Floatl(document.querySelectorAll('.js-floatl')[1])
Changelog:
v0.2.1 (09/22/2018)
- Bugfix