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 display messages like “Enter subject here” and “Enter Message here“.

I found that we can do this by using the “value” attribute of the text box, is this the best way ??..
What alternatives do I have to achieve this ?

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)