More than one instance of an id on a page? Don't control the entire page? Want your forms to be more accessible? LabelFor is for you!
What is it? LabelFor is a jQuery extension to automatically associate label elements with nearby inputs in an html standards compliant way.
The first label will associate with any next element via for="_next". The second label will associate with the previous element.
<label for="_next">Username</label><input type="text"> <input type="text"><label for="_prev">Zip</label>
//to find all labels within body $('body').labelFor();
This will find elements matching the css expression following '_next' within the element immediately following the label.
<div class='css-username'> <label for="_next input">Username</label> <div> <input type="text"> </div> </div>
//only associate labels within the matched elements $('.css-username').labelFor();
to include on your page
- If you're including on a very simple web-page you can copy
/dist/main.js.mapinto your javscript directory and use a <src> tag to include main.js on your page.
- If you're using an ES5 build system you can
require('jquery-labelfor')wherever you're doing your other plugins
- If you're using ES2015+ or Babel I'd suggest using
import $lf from 'jquery-labelfor/src/main'This will help your bundler minimize file sizes. You'll also be able to call
- Non invasive: LabelFor is non destructive to existing ids.
- Idempotent: It can be run multiple times over the same set of elements without messing up existing associations.
- This lib is super-mature. It gets security updates. If you want a new feature please submit a PR on github