Tutorial Topics
Meta tags Forms : Search Box & Range
Forms : Text Box - HTML 5
3163    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.
Swami Vivekananda
You cannot believe in God until you believe in yourself.
Swami Vivekananda
Today So Far
Total View (Lakh)
26/05/2018     36643
01/01/2018     34919
28/06/2017     32371
02/08/2017     30444
25/06/2018     30139
15/05/2017     25394
01/08/2017     24683
06/07/2017     24582
14/07/2017     20190
21/04/2018     19829