GitHub - ageron/labelinput: A bit of javascript to add a label inside <input> fields.

Branches Tags

Name		Name	Last commit message	Last commit date
Latest commit History 13 Commits
css		css
js		js
test		test
CHANGELOG		CHANGELOG
LICENCE		LICENCE
README		README

Repository files navigation

Labelinput v1.01
Copyright (c) 2009 Aurélien Geron, Wifirst
Released under the MIT Licence.


= Introduction =

LabelInput is a javascript plugin which adds a label inside your text or
password inputs or textareas.  This label automatically disappears when the
input is not empty (or optionally upon focus). The style can be changed as
needed very easily.

You can try it out by opening in your web brower any one of the HTML files
located in the test directory, or by visiting:

http://aureliengeron.free.fr/labelinput/test/signup.html
http://aureliengeron.free.fr/labelinput/test/plain.html


= Credit =

This plugin is based on the overlabel technique by Mike Brittain:
http://www.alistapart.com/articles/makingcompactformsmoreaccessible


= Compatibility =
Should work in any recent Javascript-compatible browser.

Tested on:
- Iceweasel 3.0.6
- Firefox 3.0.6
- Internet Explorer 6
- Internet Explorer 7
- Internet Explorer 8


= Installation =

1. Download prototype.js (www.prototypejs.org) or use the included copy.

2. Copy prototype.js, labelinput.js and your prefered labelinput CSS stylesheet
   (such as labelinput_blue.css) in the same directory as your HTML file, or in
   the appropriate location within your project (for example, in a "public"
   directory).

3. Include protype.js and labelinput.js (and requiredinput.js if you want this
   feature, see below) in the <head> section of your HTML
   code, and optionally set some labelinput options:

    <script src="prototype.js"     type="text/javascript"></script>
    <script src="labelinput.js"    type="text/javascript"></script>
    <script src="requiredinput.js" type="text/javascript"></script>

    <script type="text/javascript">
      LabelInput.options={"hideUponFocus":true};
      RequiredInput.options={"className":"required"};
    </script>

   Fix the paths if these files are not in the same directory as the HTML file.

4. Also include your prefered css stylesheet to your HTML code:
     <link href="labelinput_blue.css" rel="stylesheet" type="text/css" />

   You may tweak the CSS to your liking, of course.


= Usage =

Create a <div> which contains a <label> with the "labelinput" class,
followed by an input or a textarea.  The label content will appear inside
the field.

   <div>
     <label for="login" class="labelinput">Your login</label>
     <input id="login" name="login"></input>
   </div>
   <div>
     <label for="password" class="labelinput">Your password</label>
     <input id="password" name="password"></input>
   </div>
   <div>
     <label for="password" class="labelinput">Your password</label>
     <textarea id="comment" name="comment"></textarea>
   </div>

You can modify the styles as you like by taking example on the CSS files
located in the css directory.


= Required inputs =

You can set the "requiredinput" class on any input or textarea: if the form
containing this input is submitted and the field is empty, then the submit
event is stopped, the requiredinput_error class is added on all such empty and
required fields, and the first one of these fields is automatically focused.
As soon as the user presses a key inside one of these fields, the
requiredinput_error class is removed.


= Available options =

For LabelInput:
  className: [string] the name of the class used to identify labelinput labels.
   Default: "labelinput"
   Note: The other class names are derived from this class name:
       =>  labelinput_parent: the <div> containing the labelinput label.
       =>  labelinput_for: the input or textarea that the label points to.
  setParentDivStyle: [boolean] automatically set the labelinput_parent class
    on the <div> containing the labelinput label.
    Default: true
  setForElementStyle: [boolean] automatically set the labelinput_for class on
    the input or textarea that the label points to.
    Default: true
  hideUponFocus: [boolean] automatically hide the label upon focus (instead of
    hiding the label only when the field is not empty).
      Small note: if you set this option to true, you can still focus one of
      the fields *before* the document is fully loaded and the label will then
      only disappear when you type a key.  This might be useful if you want a
      field to be automatically focused but you want the label to be displayed.
    Default: false
  checkInterval: [int] number of milliseconds between automatic checks to hide
    labels when the related inputs are not empty.
      This is used as a workaround for the display bug found in most browsers
      with automatic completion.  Just could not find the events to catch.
    Default: 100

For RequiredInput:
  className: [string] the name of the class used to identify required inputs
    or textareas.
    Default: "requiredinput"
    Note: the name of the error class is based on this class name.

= Known issues and future enhancements =

- Testing is needed in many browsers
- When you saved a field value inside your browser, if you select it only with
  your mouse, the event will not be detected and you might end up with a
  label floating over the value. Any idea, anyone?