The input element and new input types (<input type="" />)

The <input> element is not a new element in HTML5, but deserves a special page because the HTML 5 has introduced new input types. The original input types were explained in the HTML 4.01 tutorial, while here we will briefly go through new types and enforce it with an example at the end of the chapter.

The list below shows all new types allowed to be assigned to an input element:

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

Input type - color

The type="color" is used to allow user inputs that contain a color. If a browser supports this type, it may show a color picker for a user to choose from.

Syntax:

<input type="color" name="incolor" />

Input type - number

The type="number" is used to allow user inputs to enter a number to the input field; all other characters should be rejected by the browser. A cool thing about this type is that, if browser supports it, we can put a restriction on the user's input. More about the input tag's attributes in the next topics, but here is the list of those restrictions that may be interesting to apply to an input type number:

• min
• max
• step

The attribute min sets the minimum number to be entered, the attribute max a maximum number, and the attribute step sets the step increment (interval) of the number.

Syntax:

<input type="number" name="innumber" min="1" />

Input type - range

The type="range" is used to set the range in which a user's value should be (could be) inserted. Browsers that support this type, usually present in in a form of a slider.

Syntax:

<input type="range" name="inrange" min="1" max="10" />

Input type - tel

The type="tel" is used to allow only telephone numbers.

Syntax:

<input type="tel" name="intel" />

Input type - email

The type="email" is used to prevent a user entering anything but an e-mail format input.

Syntax:

<input type="email" name="inemail" />

Input type - url

The type="url" allows users to enter an url valid input, while preventing them from entering other formats.

Syntax:

<input type="url" name="inurl" />

Input type - search

The type="search" is a text field that may be used as a regular search form. However as it is not well supported, we still need to use other search scripts or engines.

Syntax:

<input type="search" name="insearch" />

Input type - date

The type="date" is used to enter a date only into an input field. A standard day picker may be shown instead of the standard text field, depending of the browser being used.

Syntax:

<input type="date" name="indate" />

Input type - time

The type="time" is used to select a regular time (without time zone). As before, depending on the browser, a time picker may be shown in the place of the text field.

Syntax:

<input type="time" name="intime" />

Input type - datetime

The type="datetime" is used to select a date and time, with the time zone included.

Syntax:

<input type="datetime" name="indatetime" />

Input type - datetime-local

The type="datetime-local" does everything the same as a datetime with exception that it is in a local format not including the time zone.

Syntax:

<input type="datetime-local" name="indatetimelocal" />

Input type - week

The type="week" allows us to select a week and a year. Depending of a browser, it too may show some sort of a date picker in the place of the input field.

Syntax:

<input type="week" name="inweek" />

Input type - month

The type="month" allows us to select a month and a year. Again, depending of a browser it may show a date picker instead of a regular text field.

Syntax:

‎input type="month" name="inmonth" />

Example

The example with all HTML5 input types:

›› go to examples ››