Introduction

<input type="text" name="t1" value="tutorial At Home" width="100">

Above syntax of textbox we learn in HTML4. Now in HTML5, Four new attribute are added along with the above mentioned.

Placeholder:

Value of this attribute show in the textbox (in gray color) when it is empty but not focused. If the textbox gets focus the value of the placeholder is automatically vanish. And the control turns into an empty the textbox. If we write something on it and lost focus from it, then the given value is accepted by the textbox. But if we lost the focus without typing anything on it then the placeholder value will return in gray color. This attribute basically used to decrease the importance of the Label control.

<input type="text" placeholder="Enter Your Name" name="stu_name">

Note: If browser Not support placeholder attribute, then we can do it using Javscript.

Autofocus:

This attribute sets the focus on a textbox when the page is loaded on the browser. Autofocus is a Boolean attribute.

 <input type="text" placeholder="Enter Your Name" name="stu_name" autofocus>

Note: Using This Attribute we can create a live serch.

Required:

This also a Boolean attribute of the textbox. If we set this attribute on a textbox, after then if the user try to exit from this textbox without something write in it then the browser will give an error. That is, we cannot leave an field empty after declaring it “required”. This attribute is supported by Opera & Firefox only.

 <input type="text" name="stu_name" required>

DataList:

In the Google search box we have found an auto search box. Now we can create the “same like” search box on our page using the datalist attribute. In this case when a user input some data in the textbox, then textbox automatically suggests the user from a given list. User can freely write anything on this textbox.

<input id="country_name" placeholder="Enter Country" name="country_name" type="text" list="country" />
<datalist id="country">
<option value="India">
<option value="Pakistan">
<option value="Srilanka">
<option value="Australia">
<option value="Bangladesh">
<option value="West Indies">
<option value="South Africa">
<option value="New Zealand">
<option value="Zimbabay">
<option value="England">
</datalist>

 Note: Programmer should notice that value of the list attribute in input tag and value of the id attribute of the datalist tag is the same.