Skip to content

ten1seven/infieldLabel

Repository files navigation

infieldLabel

infieldLabel is a jQuery plugin that creates a compact, text-over-input, form layout while using semabtic HTML and preserving usability and accessibility.

Check out the demo: http://ten1seven.github.io/infieldLabel/. Read the full post: http://viget.com/inspire/making-infield-form-labels-suck-less-2.

How it works

  • Using good HTML structure, the label is positioned over the input.
  • When the input receives focus, the label is moved to above the input as a tooltip.
  • If the input contains text, the label is hidden.
  • Hidden labels re-appear above the input any time it receives focus.

Installing

Download the file directly...

or install via Bower...

bower install infieldLabel

or install via NPM...

npm install infieldLabel

Usage

  • Build input fields like normal using a label.
  • Wrap the label and input in a container, like a span, and give it the class of infield-label.
<p>
  <span class="infield-label">
    <label for="myLabel">My Label</label>
    <input type="text" name="myLabel" id="myLabel" class="input" size="50">
  </span>
</p>
  • Include jQuery, jquery.infieldLabel.js and jquery.infieldLabel.css.
  • Call infieldLabel.
<link href="jquery.infieldLabel.css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="jquery.infieldLabel.js"></script>
<script>
  $(function() {
    $('.infield-label').infieldLabel();
  });
</script>

Options

  • focusClass: Class applied to wrapper when input receives focus.
  • hideClass: Class applied to wrapper when input contains text.