HTML5 input types Tutorial

HTML5 introduces new input types for forms. We are going to take a look at each of them and explain why you should be using them right now.
These new input types of HTML5 have dual benefits: using them means less development time and an improved user experience.These new features allow better input control and validation.
The html5 input types are following:

Search:

Search seems like an appropriate place to start our foray into HTML5 input types.

Example:

<form action=”example_form.php”> Search:<input type=”search” name=”search”><br> </form>

Output:

Search:

Range:

The range type is employed for input fields that ought to contain a value from a range of numbers. The range input type is similar to number but more specific. It represents a numerical value within a given range.
The following code shows how we might mark up our skill level on a scale of 0 to 100 by setting the min and max attributes:

Example:

<form action=”example_form.php” method=”get”> Skills: 0<input type=”range” name=”points” min=”0″ max=”100″>100 </form>

Output:

Points: 0

100

Color:

The color input type is pretty self-explanatory: it allows the user to select a color and returns the hex value for that color.

Example:

<form action=”example_form.php”> Choose color: <input id=”color” name=”color” type=”color”> </form>

Output:

Choose color:

Datetime:

We can combine the date and time by using type=”datetime” for specifying a precise time on a given day.

Example:

<form action=”example_form.php”>Date and Time: <input id=”entry-day-time” name=”entry-day-time” type=”datetime”> </form>

Output:

Date and Time:

Number:

The number type is employed for input fields that ought to contain a  numeric value.

Example:

<form action=”example_form.php”> Sliper size: <input type=”number” name=”sliper size” min=”4″ max=”11″> </form>

Output:

Sliper size:

Email:

The email input type is no different than a standard text input type and allows for one or more e-mail addresses to be entered. Combined with the required attribute, the browser is then able to look for patterns to ensure a valid e-mail address has been entered.

Example:

<form action=”example_form.php”> E-mail: <input type=”email” name=”email”> </form>

Output:

E-mail:

tel:

The tel type is employed for input fields that tel is differs from email or other html5 input types tutorial in that no particular syntax is enforced.

Example:

<form action=”example_form.php”> Telephone: <input type=”tel” name=”tel” id=”tel”> </form>

Output:

Telephone:

URL:

The url type is employed for input fields that ought to contain a URL address.

Example:

<form action=”example_form.php”> Telephone: <input type=”url” name=”url”> </form>

Output:

Telephone: