Tutorial Topics
Meta tags Forms : Search Box & Range
Forms : Text Box - HTML 5
3409    Arnab De    07/05/2017


<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.


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.


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.


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>



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">


 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.
Meta tags Forms : Search Box & Range
Author Details
Arnab De
I have over 16 years of experience working as an IT professional, ranging from teaching at my own institute to being a computer faculty at different leading institute across Kolkata. I also work as a web developer and designer, having worked for renowned companies and brand. Through tutorialathome, I wish to share my years of knowledge with the readers.
Enter New Comment
Comment History
No Comment Found Yet.
Albert Einstein
Education is not the learning of facts. It is rather the training of the mind to think
Albert Einstein
Today So Far
Total View (Lakh)
26/05/2018     41743
01/01/2018     35913
28/06/2017     33955
25/06/2018     33203
02/08/2017     32306
06/07/2017     26716
01/08/2017     26706
15/05/2017     26325
14/07/2017     21730
21/04/2018     20623