Wait. Floated Labels?
The Float Label Pattern found his success after Brad Frost wrote a blog post about Float Label Patterns. The idea is based on a Dribbble Shot by Matt D Smith. The Pattern is easy to explain. On User Interaction with an input field the placeholder value moves up, and is displayed above the typed text. This Plugin offers you the possibility to upgrade your forms with this famous pattern.
Installation & Dependencies
Include the latest release of jQuery. The Google AJAX Libraries API can be used for this but you could also host the library yourself.
Download floatlabels.js from Github, upload the file to your server & include it in your code AFTER jQuery.
Currently floatlabels.js is dependant from jQuery 1.8+. Lower Versions have not been tested.
<head>
..
<script src="jquery.js" type="text/javascript"></script>
<script src="floatlabels.js" type="text/javascript"></script>
..
</head>Initialization
Basically floatlabel is initialized with on simple call.
<head>
..
<script src="jquery.js" type="text/javascript"></script>
<script src="floatlabels.js" type="text/javascript"></script>
..
<script>
$('input.floatlabel').floatlabel();
</script>
</head>
<body>
<div>
<input type="text" id="test-input" placeholder="This is the placeholder" class="floatlabel">
</div>
</body>The script cycles through all your selected input fields and converts them to inputs with floated labels. Done.
Customization
The script offers some customization methods for your labels.
Inline Data Attributes:
data-label
Add this to your input field if you want the floating label to be different from your placeholder value.
data-class
Add the classes you want to add to this generated label in here. You can add multiple classes by seperating with spaces.
Javascript Options
slideInput Default: true
If true the input field will slide down (height) to fit the floating label.
labelStartTop Default: '20px'
How many pixel the label should travel when enabled. This sets the starting point of the animation from the top of the input field. Play around with it.
labelEndTop Default: '10px'
Where the Label should stop animating in px from the top of the input field.
transitionDuration Default: 0.3
Label Transition time in seconds.
transitionEasing Default: 'ease-in-out'
Easing function to use. Here are some examples of other easing functions.
labelClass Default: ''
Another way to add classes to the label element.
typeMatches Default: /text|password|email|number|search|url/
This Regex Expression is triggered at the initializiation of the script. It checks the type="text" if the element the plugin is triggered on is valid. Some advanced users might want to expand this to the new HTML5 textfield types.
Configuration
..
<script>
$('input.floatlabel').floatlabel({
// Add Configuration Object here
});
</script>
..Examples
Here are some examples on CodePen. Just view the source and play with it.
See the Pen ptxhG by Marcus Pohorely (@clubdesign) on CodePen