Nonviolent Pirate Mobster

    infieldLabel

    1.1.0 • Public • Published

    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.

    Install

    npm i infieldLabel

    DownloadsWeekly Downloads

    6

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    163 kB

    Total Files

    17

    Last publish

    Collaborators

    • ten1seven