1. HTML5 Tutorial
2. HTML5 DOCTYPE
3. HTML5 Language
4. HTML5 Character Encoding
5. HTML5 Form Fields
6. HTML5 Local Storage
7. HTML5 Geo Location
8. HTML5 Messaging
9. HTML5 Drag and Drop
10. HTML5 Web Workers
11. HTML5 Semantic Elements
12. HTML5 header Element
13. HTML5 hgroup Element
14. HTML5 Footer
15. HTML5 nav Element
16. HTML5 article element
17. HTML5 time Element
18. HTML5 File API
19. HTML5 History API

• Email Field
• URL Field
• Number Field
  • Number Field Attributes
• Range Fields
  • Range Field Attributes
• Tel Fields
• Search Fields
• Date Field
• Time Field
• Datetime Field
• Month Field
• Week Field
• Color Field
• Combo Box Fields
• New Attributes
  • autofocus
  • placeholder
  • required
  • multiple
  • pattern
  • autocomplete
  • min + max
  • step
  • form

Jakob Jenkov Last update: 2014-07-16

In HTML5 several new form fields have been added to the existing form fields in HTML4. These form fields are targeted at receiving special type of data, e.g. email addresses, URL's, dates etc., and come with built-in browser validation. That means you no longer have to use JavaScript to validate them, or to generate them.

HTML5 form fields also have a set of new attributes. These attributes are covered at the end of this text.

By the way, I also have a tutorial about how to style forms with CSS.

Browser Support

Not all of these form fields are supported in all browsers yet. Each form field is shown with a live example. If your browser doesn't yet support this form field, it will display as an ordinary text field.

Email Field

The email input field can take text input and validate that the input is a valid email address. You specify that an input field is an email field using the type="email" attribute, like this:

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

Here is a live example. Try typing in an email address or non-email address, press enter, and see what the browser says.

URL Field

The URL field can take text input and validate that the input is a valid URL. You specify that an input field is a URL field using the type="url" attribute, like this:

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

Here is a live example. Try typing in a URL, press enter, and see what the browser says.

Number Field

The number field can take text input and validate that the input is a valid number. The browser may assist the user by showing a numeric keyboard, e.g. on a mobile phone.

You specify that an input field is a number field using the type="number" attribute, like this:

<input type="number" name="numberField"/>

Here is a live example. Try typing in a number, press enter, and see what they browser says.

Number Field Attributes

Number fields have three attributes extra they can use which affect what numbers that can be chosen. These attributes are:

• min
• max
• step

The min attribute sets the minimum number accepted by the field. The max similarly sets the maximum accepted number. The step attribute sets the number of steps the number i the number field should increase when clicking the arrow up and down in the field. Here is a code example:

<input type="number" name="numberField"
    min="10" max="20" step="2" />

Here is a live example. Try clicking the arrows and see what happens.

Range Fields

The range fields are used like number fields, but instead of having an arrow up and down to select the value, you have a slider.

You specify that an input field is a range field using the type="range" attribute, like this:

<input type="range" name="rangeField"/>

Here is a live example. Try moving the slider, and click the button to see the value of the range field.

As you can see, the value of the range field spans from 0 to 100.

Range Field Attributes

Range fields have three attributes extra they can use which affect what numbers that can be chosen by the slider. These attributes are:

• min
• max
• step

The min attribute sets the minimum number you can select. The max similarly sets the maximum number of the range. The step attribute sets the increment of the value in the range field when the slider is moved. Here is a code example:

<input type="range" name="rangeField"
    min="100" max="200" step="2"/>

Here is a live example. Try moving the slider, and click the button to see the value of the range field.

As you can see, the values of the range field now vary between 100 and 200, in increments of 2.

Tel Fields

The tel fields are used for telephone numbers. Unlike the number field, a tel field can contain spaces in between the numbers, but still no letters.

You specify that an input field is a tel field using the type="tel" attribute, like this:

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

Here is a live example. Try typing in a telephone number, press enter, and see what they browser says.

Search Fields

The search fields are used for input to website searches. The search fields can show a history of previous search terms, to make searching easier.

You specify that an input field is a search field using the type="search" attribute, like this:

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

Here is a live example. Try typing in a search term, press enter, and see what they browser says.

Note: the browser may refresh the page when you click enter. But, then scroll down to the search field, try typing in the first letter of your previous search term, and see what suggestions the browser gives you.

Date Field

The date field can take text input and validate that the input is a valid date. You specify that an input field is a date field using the type="date" attribute, like this:

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

Here is a live example. Try typing in a date, press enter, and see what the browser says.

Time Field

The time field can take text input and validate that the input is a valid time. Time fields allow input hours between 0 and 23, and minutes between 0 and 59. You specify that an input field is a time field using the type="time" attribute, like this:

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

Here is a live example. Try typing in a time, press enter, and see what they browser says.

Datetime Field

The datetime field can take text input and validate that the input is a valid date and time. You specify that an input field is a date field using the type="datetime" attribute, like this:

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

Here is a live example. Try typing in a date and time, press enter, and see what they browser says.

Month Field

The month field can take text input and validate that the input is a valid month. Months can be be between 1 and 12. The browser may also assist the user in picking a month, by showing a list of months in a textual representation, localized to the users own language.

You specify that an input field is a date field using the type="month" attribute, like this:

<input type="month" name="monthField"/>

Here is a live example. Try typing in a month, press enter, and see what they browser says.

Week Field

The week field can take text input and validate that the input is a valid week. Weeks can be be between 1 and 53. The browser may also assist the user in picking a valid week by showing a calendar widget of some kind. Some years have 52 weeks and some years have 53. The browser could assure that the chosen week number actually exists in the given year.

You specify that an input field is a date field using the type="week" attribute, like this:

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

Here is a live example. Try typing in a week, press enter, and see what they browser says.

Color Field

The color fields are used to select colors, for instance in a drawing program.

You specify that an input field is a color field using the type="color" attribute, like this:

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

Here is a live example.

Combo Box Fields

The combo box field is really just a text field where you can associate a list of options to. Here is how you write it:

<input type="text" name="comboBoxField" list="comboBoxList">

<datalist id="comboBoxList">
    <option label="Anna">
    <option label="John">
    <option label="Xavier">
</datalist>
    

Notice the list attribute of the input field. The value of the list attribute is the id of the datalist element. This way, the browser knows that the datalist element should be associated with the input field, and used as options for auto completion of the text written in the text field.

The datalist element contains a list of option elements which each contain a label attribute. The label attribute is the value of that option used in auto completion option when the user types text into the text field.

You can also use the list attribute and datalist element with input field of type email and url too.

Here is the example code from above as a live example. Try typing in one of the names Anna, John or Xavier, and see what happens as you type.

New Attributes

A set of new form field attributes have been added in HTML5 too. Each of them are covered in the sections below.

autofocus

The autofocus attribute enables you to specify which field should be given focus automatically when the page is loaded. You should have only one such field on any given page. For instance, a search field, or one of the fields in a login box.

The autofocus attribute can be used with any type of form field. Here is an example:

    <input type="text" name="comboBoxField" autofocus>

placeholder

The placeholder attribute provides a way to specify a value to show in a form field before the user types anything into the field. Once the user starts typing, the place holder value disappears.

The placeholder attribute can be used with any form field that takes text input. Here is an example:

    <input type="text" name="textField" placeholder="Type in here">

And live:

required

The required attribute specifies that a given attribute is required. The means, that the form cannot be submitted until a value has been entered into the given field. Here is an example:

    <input type="text" name="textField" required>

Notice that you don't have to provide a value for the attribute. Its presence is enough.

multiple

The multiple attribute signals that multiple values are allowed in this field. For instance, an email field could then contain multiple email addresses, separated by commas.

The multiple attribute also works with file upload fields (type="file"), allowing the user to upload multiple files.

pattern

The pattern attributes enables you to specify a regular expression pattern that a text type into a given input field must match. I will not explain regular expressions here. Here is an example:

    <input type="text" name="textField" pattern="[A-Z][0-9]">

This example sets a pattern that matches one character between A and Z, and number between 0 and 9.

The regular expression syntax used is the same as for JavaScript, but with an implicit ^ at the beginning, and a $ at the end. These two characters match the beginning and end of the input, but now you don't need to add them every time.

autocomplete

The autocomplete attribute can be used to signal to the browser that it is okay to auto complete the given input field. This is most likely not an attribute you will use a lot.

min + max

The min and max attributes restrict the input allowed for an input field. You can use these attributes to e.g. set the minimum and maximum number allowed for a number field, or the minimum and maximum date allowed in a date field.

You do not need to have both a min and a max attribute. You can also just one of them - either the min or max attribute.

step

The step attribute is used to set how much e.g. number or range fields increment with each click on the arrow buttons, or movement of the slider.

The step attribute can also be used with date fields with the value any, to specify that the time can be set with very fine granularity (e.g. milliseconds).

form

The form attribute is used to associate form fields with a form element they are not nested inside. Here is an example:

<form id="theForm">
    <input type="text" >
</form>
    
<input type="range" form="theForm">    

Notice the last range field. It is placed outside the form element. The form attribute of the range field is pointing to the id of the form element. That way the browser knows that this input field belongs to that form, even if the input field is not nested inside the form element.

Next: HTML5 Local Storage

All Trails

Trail TOC

Page TOC

Previous

Next