Dwight Jack Workroom

Recent moods on input fields presentation tend to insert as initial value of an empty form field its label value.

An example of this can be found on the Facebook Homepage.

Facebook Input Label

Though this is a space saving way to show labels and a much more focused way to point out the expected field value, addressing it by the value attribute introduces a semantic issue, since that’s not at all an initial value, not counting that pulling apart the label tag is an accessibility fault.

To overcome this problem we can rely on the powerfull JavaScript framework jQuery, to build an unobtrusive plugin mantaining both accessibility and usability. Let’s see:

1) Link the script in the head section:

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.inputLabel.js" type="text/javascript"></script>

2) Semantically correct XHTML:

<label for="myInput">Email here<label><nput type="text" name="myInput" id="myInput" />

3) Run the plugin on document load (place this in a script tag before the end of head):

$(function () {
      $("#myInput").inputLabel();
});

That’s all. You can pass an options’ object to change, for example, the inserted value, or to prevent the plugin for running on already filled or pre-filled fields:

• color: initial text color (default : “#666″)
• e: event which triggers label text clearing (default: “focus”)
• force: execute this script even if input value is not empty (default: false)
• keep: if value of field is empty on blur, re-apply label text (default: true)

Check the demo page to see the script in action or download the source code below:
jQuery inputLabel Plugin (2.18 KB)