Making infield form labels suck less.
JavaScript CSS HTML
Switch branches/tags
Nothing to show
Latest commit 27fc007 Apr 12, 2016 @ten1seven ten1seven Update README
Permalink
Failed to load latest commit information.
assets/styles Add postcss processing for styles Apr 11, 2016
src/styles Add postcss processing for styles Apr 11, 2016
.editorconfig Add editorconfig Apr 11, 2016
.gitignore Add gitignore Apr 11, 2016
Gulpfile.js Add postcss processing for styles Apr 11, 2016
LICENSE Add license Apr 11, 2016
README.md Update README Apr 12, 2016
bower.json Update email address in package.json and bower.json Apr 12, 2016
index.html Add postcss processing for styles Apr 11, 2016
jquery.infieldLabel.css Add postcss processing for styles Apr 11, 2016
jquery.infieldLabel.js Fix white space and bump version Apr 11, 2016
jquery.infieldLabel.min.js Fix white space and bump version Apr 11, 2016
package.json

README.md

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.