How to add PLACEHOLDER attribute in HTML5 Forms

There's quite a neat new attribute you can add to your text boxes called PLACEHOLDER. This is default text that disappears when you click inside a text box. Try the following:

<FORM>

<INPUT TYPE="Text" PLACEHOLDER="Enter your first name">

<P>
<INPUT TYPE="Submit" VALUE="Contact Us">

</FORM>

The word PLACEHOLDER does not have to be in capitals, as like just about every HTML element it is not case sensitive. After an equal sign, you type the text you want to appear in your text box, surrounded by quotation marks.

Save your work and test the form out in a browser (preferably Opera). When the form first loads you'll see this:



Click inside the text box and the placeholder text immediately disappears:



The PLACEHOLDER attribute works on all the new text boxes you are about to see. If your user has an older browser they either won't see the placeholder text at all, or it just won't disappear when they click inside the box.