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
.
My Label
- Include jQuery, jquery.infieldLabel.js and jquery.infieldLabel.css.
- Call infieldLabel.
Options
focusClass
: Class applied to wrapper when input receives focus.hideClass
: Class applied to wrapper when input contains text.