HTML5 New Input Types

In this article I am going to describes the implementation and use of new input types in HTML5.

New Input Types in HTML5

In HTML5 several new input types have been added and these new input types are: sliders, number spinners, popup calendars, color choosers, autocompleting suggestion boxes, and more.

This article covers the new input types:

  • color
  • date
  • datetime
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • URL
  • week

In order to define all these new input types the "<input>" Tag is used.

1. Input type Color            

Description

This input type allows collection of a color of the form. If a browser supports this input type then the intention is that clicking in the textfield will result in a color chooser popping up.

The input element with a type attribute whose value is "color" represents a color-well control, for setting the element's value to a string representing a simple color.

Note : Color keywords (for example, strings such as "red" or "green") are not allowed.

Syntax

<input type="color" name="some-name"/> 

Browser Support

The Color input type is supported in Chrome and Opera only. It is not supported by Internet Explorer, Safari and Firefox.

Attribute

  • value : The initial value. The intention is that if a browser pops up a color chooser, the initial selection will match the current value.

Example of color input type

<!DOCTYPE html>

 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title>Color</title>

</head>

<body>

    <h2>Implementation Of color as New Input Type</h2>

    <form action="form.asp">

        Choose your favorite color:

        <input type="color" name="favcolor"><br>

        <br>

        <input type="submit">

    </form>

</body>

</html>

 

Output

color.jpg

2. Input type Date            

Description

The date type allow the user to select a date. The input element with a type attribute whose value is "date" represents a control for setting the element's value to a string representing a date. Or in simple words we can say that this input type allows collection of a date.

Syntax

<input type="date" name="some-name"/> 

Browser Support

The Date input type is supported in Chrome, Safari and Opera only. It is not supported by Internet Explorer and Firefox.

Attribute

In Opera and other future browsers that pop-up calendars, the calendar selection defaults to the current date. So, value, step, min, and max can all be omitted. However, in the current version of Chrome, selecting the up/down arrows starts at 0001-01-01 unless you supply a value. The Chrome behavior is not helpful, since you will need JavaScript to calculate the current date at run time. Also, if you have two related date input fields (e.g., start date and end date), you might want to use JavaScript to change the second field when the first field changes (e.g., set the end date to one day after the start date).
  • value: The initial value. The format is "yyyy-mm-dd".
  • step: The step size in days. The default is 1.
  • min, max: The smallest and largest dates that can be selected, formatted as date strings of the form "yyyy-mm-dd".

 

Example of date input type

<!DOCTYPE html>

 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title>Date</title>

</head>

<body>

    <h2>Implementation Of date as New Input Type</h2>

    <form action="form.asp">

        Choose Your Joining Date:

        <input type="date" name="jdate"><br>

        <br>

        <input type="submit">

    </form>

</body>

</html>

Output

date.jpg

3. Input type DateTime           

Description

The datetime type allows the user to choose a date and time (with time zone).The input element with a type attribute whose value is "datetime" represents a control for setting the element's value to a string representing a global date and time (with timezone information).

Syntax

<input type="datetime" name="some-name"/> 

Browser Support

The DateTime input type is supported in Safari and Opera only. It is not supported by Internet Explorer , Chrome and Firefox.

Example of datetime input type

<!DOCTYPE html>

 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title>DateTime</title>

</head>

<body>

    <h2>Implementation Of datetime as New Input Type</h2>

    <form action="form.asp">

        Choose Your Joining Date and Time:

        <input type="datetime" name="jdatetime"><br>

        <br>

        <input type="submit">

    </form>

</body>

</html>

 

Output

datetime.jpg

4. Input type Email           

Description

The email type is used for input fields that should contain an e-mail address. A field for entering e-mail address(es).This input type allows collection of an email address. If the "list" attribute is not specified, then the intention is that the browser supplies some help in entering a legal email address (e.g., the iPhone browser uses an email-optimized keyboard) and/or validation on submission.

If the "list" attribute is specified, then the intention is that the browser lets the user choose among a set of email addresses defined separately with the "datalist" element. Your browser (Firefox 16 on Windows) does support this input element.
 

Syntax

<input type="email" name="some-name"/>
<input type="email" list="email-choices" name="some-name"/>

<datalist id="email-choices">
<option label="First Person" value="abc@example.com">
<option label="Second Person" value="xyz@example.com">
<option label="Third Person" value="pqr@example.com">
...
</datalist>

Browser Support

The Email input type is supported in Firefox, Chrome and Opera only. It is not supported by Internet Explorer and Safari.

Attributes

If you supply the "list" attribute, you must also supply a separate "datalist" entry.
  • value: The initial value (a legal email address).
  • list: The id of a separate "datalist" element that defines a list of email addresses for the user to choose among.

Example of email input type

<!DOCTYPE html>

 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title>Email</title>

</head>

<body>

    <h2>Implementation Of email as New Input Type</h2>

    <form action="form.asp">

        Your E-mail :

        <input type="email" name="user-email"><br>

        <br>

        <input type="submit">

    </form>

</body>

</html>

 

 Output

email.jpg

5. Input type number          

Description

The number type is for input fields that should contain a numeric value. This input type allows collection of a number (either integer or floating point). In other words input type number means picking a number.

The input element with a type attribute whose value is "number" represents a precise control for setting the element's value to a string representing a number.
 

Syntax

<input type="number" min="0" max="20" step="2" value="10" name="some-name"/>

Browser Support

Email input type is supported in Safari, Chrome and Opera only. It is not supported by Internet Explorer and Firefox.

Attributes

You should normally supply all of value, min, and max. Browsers that support this input type provide inconsistent behavior when these attributes are omitted. If you want to collect floating point numbers, use a non-integer for min or step.
  • value: The initial value. If omitted, the field is initially blank, but the internal value is not consistent across browsers.
  • step: How much to change the value when you click on the up or down arrows of the control. The default is 1.
  • min, max: The smallest and largest values that can be selected with the up/down arrows.

Example of number input type

<!DOCTYPE html>

 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title>Number</title>

</head>

<body>

    <h2>Implementation Of number as New Input Type</h2>

    <form action="form.asp">

        Select any even no :

        <input type="number" min="0" max="20" step="2" value="10" name="num" /><br>

        <br>

        <input type="submit">

    </form>

</body>

</html>

 

 Output

number.jpg


6. Input type month           

Description

The month type allows the user to choose a full month and year.

The input element with a type attribute whose value is "month" represents a control for setting the element's value to a string representing a month.

Syntax

<input type="month" name="some-name"/>

Browser Support

Month input type is supported in Safari, Chrome and Opera only. It is not supported by Internet Explorer and Firefox.

Example of month input type

<!DOCTYPE html>

 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title>Month</title>

</head>

<body>

    <h2>Implementation Of month as New Input Type</h2>

    <form action="form.asp">

        Joining (month and year):

        <input type="month" name="jmonth"><br>

        <br>

        <input type="submit">

    </form>

</body>

</html>

 Output

 month.jpg

 

7. Input type range           

Description

This input type allows collection of a number (either integer or floating point). All known browsers that support this use a slider. The exact value is not displayed to the user unless you use JavaScript.

So, use the number (spinner) input type if you want to let the user choose an exact value. Browsers are supposed to use a horizontal slider unless you attach CSS that specifies a smaller width than height, in which case they are supposed to use a vertical slider

Offers a slider to set to a certain value/position.

Syntax

<input type="range" name="some-name"/>  

Browser Support

Range input type is supported in Safari, Chrome and Opera only. It is not supported by Internet Explorer and Firefox.

Attributes

  • value: The initial value. The default is halfway between the min and the max.
  • step: How much to change the value when you click on the up or down arrows of the control. The default is 1.
  • min, max: The smallest and largest values that can be selected. The default for min is 0, and the the default for max is 100.

 Example of range input type

<!DOCTYPE html>

 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title>Range</title>

</head>

<body>

    <h2>Implementation Of range as New Input Type</h2>

    <form action="form.asp">

        Range of points:

        <input type="range" name="points" min="1" max="10"><br>

        <br>

        <input type="submit">

    </form>

</body>

</html>

 Output

 range.jpg

 

8. Input type tel          

Description

It is used for entering a telephone number.

This input type is intended to help you collect a telephone number. However, since the format of telephone numbers is not specified, it is not clear how a normal browser would help you with this. However, a cell phone might use an on-screen keyboard that is optimized for phone number input.

Syntax

<input type="tel" name="some-name"/>

Browser Support

As of January 2013, Firefox, Chrome, Safari, and Opera claim to support telephone input, but show no difference when entering values and perform no validation when submitting values. Your browser (Firefox 16 on Windows) does support this input element.

Attributes

  • value: The initial value as a phone number.

Example of tel input type

<!DOCTYPE html>

 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title>Telephone</title>

</head>

<body>

    <h2>Implementation Of telephone as New Input Type</h2>

    <form action="form.asp">

        Telephone:

        <input type="tel" name="usertel"><br>

        <br>

        <input type="submit">

    </form>

</body>

</html>

 

 Output

tel.jpg 

 

9. Input type time          

Description

It allows the user to select a time. The input element with a type attribute whose value is "time" represents a control for setting the element's value to a string representing a time (with no timezone information).

Syntax

<input type="time" name="some-name"/>

Browser Support

Input type Time is supported in Safari, Chrome and Opera only. It is not supported by Internet Explorer and Firefox.

Example of time input type

<!DOCTYPE html>

 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title>Time</title>

</head>

<body>

    <h2>Implementation Of Time as New Input Type</h2>

    <form action="form.asp">

        Choose Your Joining Time:

        <input type="time" name="jointime"><br>

        <br>

        <input type="submit">

    </form>

</body>

</html>

 

 Output

 time.jpg

 

10. Input type week         

Description

The week type allows the user to select a week and year. Or it means picking up a specific week.

Syntax

<input type="week" name="some-name"/>

Browser Support

Input type Week is supported in Safari, Chrome and Opera only. It is not supported by Internet Explorer and Firefox.

Example of week input type

<!DOCTYPE html>

 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title>Week</title>

</head>

<body>

    <h2>Implementation Of week as New Input Type</h2>

    <form action="form.asp">

        Select the Joining week:

        <input type="week" name="joinweek"><br>

        <br>

        <input type="submit">

    </form>

</body>

</html>

 

Output

week.jpg


11. Input type Search         

Description

This input type is intended to help you collect a string for a search. Since search queries are free-form text, there is never any help in inputting characters, and never any validation on submission. However, on some platforms, search fields should look slightly different than regular textfields (e.g., with rounded corners instead of with square corners).

Define a search field (like a site search, or Google search).

Syntax

<input type="search" name="some-name"/> 

Browser Support

Input type Search is supported in Safari and Chrome only. It is not supported by Internet Explorer, Opera and Firefox.

Attribute

value: The initial value.

Example of search input type

<!DOCTYPE html>

 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title>Search</title>

</head>

<body>

    <h2>Implementation Of search as New Input Type</h2>

    <form action="form.asp">

        Search Site:

        <input type="search" name="googlesearch"><br>

        <br>

        <input type="submit">

    </form>

</body>

</html>

 

Output

search.jpg 

 

12. Input type URL         

Description

This input type allows collection of an absolute URL. If the "list" attribute is not specified, then the intention is that the browser supplies some help in entering a legal URL (e.g., the iPhone browser uses a URL-optimized keyboard) and/or validation on submission.

If the "list" attribute is specified, then the intention is that the browser lets the user choose among a set of URLs defined separately with the "datalist" element. 

Syntax

<input type="url" name="some-name"/>
<input type="url" list="url-choices" name="some-name"/>
<datalist id="url-choices">
<option label="HTML5 Spec" value="http://dev.w3.org/html5/spec/">
<option label="Some other URL" value="http://example.com/blah.html">
<option label="Yet Another URL" value="http://foo.bar.com/baz.html">
...
</datalist>

Browser Support

Input type URL is supported in Firefox, Opera and Chrome only. It is not supported by Internet Explorer, Opera and Safari.

Attribute

  • value: The initial value, as an absolute URL.
  • list: The id of a separate "datalist" element that defines a list of URLs for the user to choose among.

Example of URL input type

<!DOCTYPE html>

 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title>URL</title>

</head>

<body>

    <h2>Implementation Of URL as New Input Type</h2>

    <form action="form.asp">

        Add homepage of website:

        <input type="url" name="homepage"><br>

        <br>

        <input type="submit">

    </form>

</body>

</html>

 

Output

url.jpg