The Placeholder and Required Attributes

The PLACEHOLDER attribute

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.

The REQUIRED attribute

If you want a text box to be filled in, you can use the REQUIRED attribute:

<FORM>

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

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

</FORM>

You just type the word REQUIRED, with no equal sign or text after it.
Test it out in your browser. Don't click inside of your text box, but just click your submit button. In the latest editions of Firefox, you should see something like this:

In Google's Chrome, you'll see this:

So the browser has not submitted the form, but displayed a popup box asking the user to fill out the text box. Opera, Internet Explorer and Safari don't recognize the REQUIRED attribute, however, and just submit the form. So you shouldn't rely on it. Internet Explorer versions 9 and lower don't even recognise the PLACEHOLDER attribute, the only one of the big five browsers not to do so!

In the next lesson, you'll learn about Email, URL and Search boxes.

Posted in: Tips,Trick,Tutorial,Web Design,Web Design 9 (HTML5 and Forms)