🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

This jQuery plugin allows you to use placeholders as labels in your Bootstrap forms.It fully supports Bootstrap ~> 3.0No markup changes required if used with BootstrapIt uses :before pseudo-element instead of adding its own element for labelIt does not change element’s height causing the whole page content to go a bit downAnd it does not require you to use non-equal paddings 

Bootstrap Forms Plugins

Documentation

Description

This plugin allows you to use placeholders as labels in your Bootstrap forms. Its original idea of Float Label belongs to Matt D. Smith. I was inspired by clubdesign's Floatlabels, although there are some differences:

  • It fully supports Bootstrap ~> 3.0
  • No markup changes required if used with Bootstrap
  • It uses :before pseudo-element instead of adding its own element for label
  • All styles are in src/labelholder.less file, easily customizable for non-default form padding values
  • It does not change element's height causing the whole page content to go a bit down
  • And it does not require you to use non-equal paddings

Installation

Assuming you already have a bootstrap form:

  • Include labelholder.js after jQuery script tag
  • Include labelholder.css after bootstrap styles, but before your own style overrides
  <head>     <!-- ... -->     <script src="jquery.js"  type="text/javascript"></script>     <script src="labelholder.js"  type="text/javascript"></script>     <style src="bootstrap.css" type="text/css"></style>     <style src="labelholder.css" type="text/css"></style>     <style src="your_styles.css" type="text/css"></style>     <!-- ... -->   </head>

If you use LESS and you want to precompile it with your own padding variables set, import only src/less/labelholder file:

  @import "bootstrap_and_overrides";   @import "src/less/labelholder";

It will take your padding variables from overrides and apply them, instead of Bootstrap defaults, which are also stored in src/less/variables.less file.

Usage and configuration

Just call .labelholder() on all your input wrappers (for Bootstrap, it's .form-group, and .input-group. Don't forget to add a placeholder!

  <div class="form-group labelholder">     <input class="form-control" type="text" placeholder="Try typing here...">   </div>
  $('.labelholder').labelholder()

Custom floating label

If you want to have floating label text to be different from placeholder, then add data-label attribute to wrapping div. Example:

  <div class="form-group labelholder" data-label="See how it works?">     <input class="form-control" type="text" placeholder="Try typing here...">   </div>
  $('.labelholder').labelholder()

Custom change events

There are three events which are listened to by default: keyup, blur, change. Just pass your own string events option with a list to your labelholder() call:

  $('.labelholder').labelholder({ events: 'keyup custom_event' })

Custom elements

Labelholder is being attached to input[type=text], input[type=date], textarea. If you want to add other input types, just pass custom your input types as a string in a elements option:

  $('.labelholder').labelholder({ elements: 'input[type=text], input[type=date], input[type=email], textarea' })

Contributing

Check CONTRIBUTING.md for more information.

License

MIT License © Felix Borzik


You May Also Like