inputLabel - use form inputs as their labels
Releases
| File / Release | Date Modified | Size | License | Link |
|---|---|---|---|---|
| inputLabel 1.1.1 | 04/05/2010 | 1.37 kB | MIT | Download |
| inputLabel 1.1.1 (packed) | 04/05/2010 | 1.19 kB | MIT | Download |
Resources
Update
This project has moved to GitHub and is completely rewritten from the source and documentation available here.
I'm sure you've seen it before: a form with text inputs that are using their input areas as the label of the input. Wether or not this is an usabilty issue or not; you see it on a lot of sites and sometimes a design calls for it. This jQuery plugin makes enabling this functionality much easier.
This plugin only works for input types of text and password, and the textarea element, for obvious reasons. Therefore this technique is only really useful on small forms, such as contact, or login. It also works quite well with a search input, as I have used it above for that reason.
Using this plugin is rather simple, you simply select the form elements you want to affect, and the plugin will do the rest. This plugin assumes a few things. That is, every input should should have a label element, or a label is specified on a per input basis. If you have labels set up correctly for your input elements, then the plugin will automatically grab those label nodes and inset them as the label of the input. Of course, if using this script, the label should be hidden with CSS. Because this plugin only affects certain input elements, a blanket display: none to all labels could give unexpected results. To fix this, all labels that are used are given a (configurable) class 'in-use' (see Example 1).
Example 1
#my-form label.in-use {
display: none;
}If for some reason you can't provide a label with your input (why?) or if you'd like it different, you can set up a new label on a input-by-input basis, as shown in example 2.
Example 2
$(document).ready(function() {
$('#my-form input.first-name').
inputLabel({ defaultLabel: 'enter your first name bozo' });
};Another handy function of this script, is that it will apply a class to the input when it is in its default label state or not. I hope that makes sense! Best to view the demonstration to understand what I mean. This is useful to differentiate the input when it is acting as a label, as opposed to holding actual user input. The default class is 'dulled', but may be changed as per example 3.
Example 3
$(document).ready(function() {
$('#my-form input').inputLabel({ dullClass: 'dull-as-dishwater' });
};It is then trivial to set up some basic CSS to give the input a dulled appearance when not actually holding data. See example 4.
Example 4
input.dull-as-dishwater {
color: #ccc;
}I hope you enjoy this plugin! I will gratefully accept any help with trying to make the config names and default values any better. I had a hard time trying to come up with simple succinct phrases which tried to convey their intended meaning.
Comments
KW
Posted on Tuesday, 4th January 2011 @ 11:56am.Nice one.. However I did discover some issues. If the text entered by the user is the SAME as the default label (e.g. First Name), it will be 'erased' upon clicking or focused the next time.
Leave a Comment
Note: Your comment may require approval before it is posted to the site.