Two of my favourite new attributes to input tags are “autofocus” and “placeholder”.

AUTOFOCUS

The “autofocus” attribute causes the cursor to advance to a control when the page loads. This serves as a great convenience to the user, who can begin entering data into a form immediately. Previously, I would write JavaScript to accomplish this. Obviously, you should have only one “autofocus” attribute on a page. Below is an example:

<input type="text" 
    name="First" 
    autofocus  />

PLACEHOLDER

The “placeholder” attribute displays text within a control without modifying the value of that control. Placeholder text disappears when a user starts typing in an input control. This is useful for offering helpful advice about what to enter in a textbox. Below is an example of an INPUT tag with the PLACEHOLDER attribute set.

<input type="text" 
    name="First" 
    placeholder="Enter First Name"  />

In Internet Explorer 11, the markup above renders like the image below:

image

In some browsers (such as IE 11), the placeholder text disappears as soon as the user selects the input element; in other browsers, the text remains until the user begins typing.

In all cases, the placeholder text is never submitted with the form values. It is only for display.

 

CONCLUSION

In this article, we reviewed how to use two new attributes introduced in HTML 5.