what the best way to display a default text in textbixes and textareas

Question

A form on my website\'s contact -us HTML page has two fields

1) subject

2) message

When the page loads for the first time I want these two boxes to displ

Answer 1

Oh, I really need to finish writing my article on this subject. Here's the unpolished version:

First — a message describing what to enter into a field is not a default value. Default values are things which could be conceivably submitted (such as a country being entered based on GeoIP, or a delivery address from customer records).

Second — using the default value as a fake label and then wiping it when the user focuses it (presumably you don't want the user to have to manually delete the message) causes accessibility problems. Screen readers read out the content that is focused, if you delete it when it becomes focused, they can't get the information.

The best option, in my opinion, is to place a <label> next to the control. Webpages aren't typically short on space — scrollbars are not evil.

If you really want it to look like it is in the control then:

1. Put the <label> and <input> in a <div>
2. Set a class on that <div> using JavaScript (so you don't have a crap experience is JS isn't available)
3. Apply CSS to set the <div> to position: relative and give it a size.
4. Make the background of the <input> transparent and style it to fill the div
5. Position the <label> under the <input>
6. Write a function that checks to see if the value of the input is an empty string or not. Toggle a class on the div on and off depending on the answer.
7. When that class is set on the div, set text-indent to a high negative length (such as -999em) so that the text is hidden off screen (but still available to screen readers)

Answer 2

Yes, that is the best way. You can then use JavaScript to empty the text input/area when the element gains focus. Remember to consider how you want to handle the case where the user submits the default text. I.e, is "Enter username" a valid username or not?