HTML5 forms input types

In previous posts, we came across the introduction  of html5 and semantics elements in html5.

Now, we will look at html5 new forms of input elements. HTML5 introduces 13 new input types –

• search
• email
• url
• tel
• number
• range
• date
• month
• week
• time
• datetime
• datetime-local
• color

Search –

The search input type is introduced for site search.

<input type=”search” name=”sitesearch”>

Search Site:

You can see here the input type is search. It looks as usual search text box but if your browser supports html5 then if you start typing text in the search box then you will see a cross sign on the right side to clear the text.

Email –  It’s looks not different from standard text box but it’s having required and email validation inbuilt. You can not fill wrong email address like without @ and (.) .

<input type=”email” name=”email”>

URL –   it is being used for url field submission. its also having validation for slashes, spaces and top level domain like .com , .co etc.

<input type=”url” name=”webpage”>

Telephone –  This input type being used for phone number.

<input type=”tel” name=”phonenumber”>

Number –  This input type is used only for numeric fields. It’s having some other attribute like min, max and step.

<input type=”number” name=”quantity” min=”1″ max=”5″>

  (between 1 and 5)

You can see if you clicks on arrow the number count increases  till 5 as its max is 5.

Range – The range input type is similar to number but more specific. It represents a numerical value within a given range.

<input type=”range” name=”points” min=”1″ max=”10″>

Range (1 to 10) : In IE10, its also shows the current value when we move to slider.


Date – It allows to select any date.

<input type=”date” name=”mybirthday”>

Select your joining date –

Month – It allows the user to select month and year like credit card expiry date.

<input type=”month” name=”mybirthmonth”>

Birth month –

Week – it allows the user to select week and year like 2014-week 12

<input type=”week” name=”week_year”>

Time – It allows the user to select a time.

<input type=”time” name=”usr_time”>

Select any time –

Date time – It allows the user to select date & time with  zone time.

<input type=”datetime” name=”bdaytime”>

Birthday –

Date time local – It allows the user to select date & time with no zone time.

<input type=”datetime-local” name=”bdaytime”>

Birthday (date and time):

Color – It fills the color in the field specified.

<input type=”color” name=”favcolor”>

Select your favorite color:

Some other common attributes –

Required – It’s a Boolean attribute, its specifies that text field must be filled before submitting the form.

What is your name :

 Placeholder – It hints the sample value to a field in a text box like for an email box – example@gmail.com etc.

<input name=”fname” type=”text” placeholder=”First name” />
Autofocus – It makes the input type automatically focus when the page loads.

<input name=”fname” type=”text” autofocus=”” />

Name:

Please let me know for any feedback. 

Reference-  Mozilla