Making infield form labels suck less.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets/styles
maps
src/styles
.editorconfig
.gitignore
Gulpfile.js
LICENSE
README.md
index.html
jquery.infieldLabel.css
jquery.infieldLabel.js
jquery.infieldLabel.min.js
package.json
yarn.lock

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.