I like to have accessible code while enhancing user experience with jQuery.

Suppose the following markup:

<label for="password" class="label">Type your password</label>
<input type="text" id="password" name="password" />

I would like to gain space by writing « Type your password » into the text input. However this would create hassle for the user without Javascript: they would need to manually delete my indication.

I could propose this to a user with Javascript, by adding onclick= »this.value= »; » to the input. However, this alters the markup. And also, everytime they click outside of the input, then click again in the input, it will delete the contents which may be annoying.

That is why I came up with this function:

jQuery(document).ready(function() {
    $('.label').each(function(){
        var labelText = $(this).text();
        var correspondingInput = $(this).attr('for');
        $('#'+correspondingInput).attr('value', labelText);
        $('#'+correspondingInput).click(function(){
            if ($(this).attr('value') == labelText) {
                $(this).attr('value', '');
            }
        });
        $(this).hide();
    });
});

Basically, every label of the class « label » will be hidden and its text will be shown in the corresponding text input.
This method only supposes clean markup:

• attribute « for » on the label
• attribute « id » on the input