How to create a label inside an <input> element?

If you're using HTML5, you can use the placeholder attribute.

<input type="text" name="user" placeholder="Username">

<input name="searchbox" onfocus="if (this.value=='search') this.value = ''" type="text" value="search">

A better example would be the SO search button! That's where I got this code from. Viewing page source is a valuable tool.

In my opinion, the best solution involves neither images nor using the input's default value. Rather, it looks something like David Dorward's solution.

It's easy to implement and degrades nicely for screen readers and users with no javascript.

Take a look at the two examples here: http://attardi.org/labels/

I usually use the second method (labels2) on my forms.

The common approach is to use the default value as a label, and then remove it when the field gains the focus.

I really dislike this approach as it has accessibility and usability implications.

Instead, I would start by using a standard element next to the field.

Then, if JavaScript is active, set a class on an ancestor element which causes some new styles to apply that:

• Relatively position a div that contains the input and label
• Absolutely position the label
• Absolutely position the input on top of the label
• Remove the borders of the input and set its background-color to transparent

Then, and also whenever the input loses the focus, I test to see if the input has a value. If it does, ensure that an ancestor element has a class (e.g. "hide-label"), otherwise ensure that it does not have that class.

Whenever the input gains the focus, set that class.

The stylesheet would use that classname in a selector to hide the label (using text-indent: -9999px; usually).

This approach provides a decent experience for all users, including those with JS disabled and those using screen readers.