HTML 5 Forms : Text Box
softetechnologies
07-05-2017    666 times
HTML Text Box

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

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>

Tutorial at home
Tutorial at home

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.
softetechnologies
softetechnologies
    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.
    Related Post
  Query About the post