The native form widgets

  • Revision slug: HTML/Forms/The_native_form_widgets
  • Revision title: The native form widgets
  • Revision id: 328689
  • Created:
  • Creator: Jeremie
  • Is current revision? No
  • Comment

Revision Content

HTML forms are made of widgets. Those widgets are built-in controls supported by each browser. In this article we will dig into each of them, see how they work, and learn how well various browsers support them.

We will focus on the built-in form widgets, but because HTML forms remain quite limited and the quality of the implementations can be very different from one browser to another, web developers sometimes build their own form widgets. This will be detailed in the article: How to build custom form widgets.

Text input fields

Text input fields are the most basic form widgets. They are a very convenient way to let the user enter any kind of data. However, some text fields can be specialized to achieve particular needs.

It's worth noting that HTML form text fields are simple plain text input controls. This means that you cannot use them to perform rich editing (bold, italic, etc.). All rich text editors out there are custom widgets.

All text fields share some common behaviors:

  • They can be marked as {{htmlattrxref("readonly","input")}} (the user cannot modify the input value) or even {{htmlattrxref("disabled","input")}} (the input value is never sent with the rest of the form data).
  • They can have a {{htmlattrxref("placeholder","input")}}; this is text that appears inside the text input box that describes the purpose of the box briefly.
  • They can be constrained in {{htmlattrxref("size","input")}} (the physical size of the box) and length (the maximum number of characters that can be entered into the box).
  • They can benefit from spell checking, if the browser supports it.
Compatibility table
Feature Desktop Chrome Firefox (Gecko) Internet Explorer Opera Safari
{{HTMLElement("input")}}.{{htmlattrxref("readonly","input")}} 1.0 {{CompatGeckoDesktop("1.0")}} 6 1.0 1.0
{{HTMLElement("input")}}.{{htmlattrxref("disabled","input")}} 1.0 {{CompatGeckoDesktop("1.0")}} 6 1.0 1.0
{{HTMLElement("input")}}.{{htmlattrxref("placeholder","input")}} 10.0 {{CompatGeckoDesktop("4.0")}} 10 11.10 4.0
{{HTMLElement("textarea")}}.{{htmlattrxref("placeholder","textarea")}} 10.0 {{CompatGeckoDesktop("4.0")}} 10 11.50 5.0
{{HTMLElement("input")}}.{{htmlattrxref("size","input")}} 1.0 {{CompatGeckoDesktop("1.0")}} 2 1.0 1.0
{{HTMLElement("input")}}.{{htmlattrxref("maxlength","input")}} 1.0 {{CompatGeckoDesktop("1.0")}} 2 1.0 1.0
{{HTMLElement("input")}}.{{htmlattrxref("spellcheck","input")}} 10.0 {{CompatGeckoDesktop("3.6")}} 10 11.0 4.0
Feature Mobile Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
{{HTMLElement("input")}}.{{htmlattrxref("readonly","input")}} {{CompatVersionUnknown()}} {{CompatGeckoMobile("4.0")}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("disabled","input")}} {{CompatVersionUnknown()}} {{CompatGeckoMobile("4.0")}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("placeholder","input")}} 2.3 {{CompatGeckoMobile("4.0")}} {{CompatUnknown()}} 11.10 4
{{HTMLElement("textarea")}}.{{htmlattrxref("placeholder","textarea")}} {{CompatUnknown()}} {{CompatGeckoMobile("4.0")}} {{CompatUnknown()}} 11.50 4
{{HTMLElement("input")}}.{{htmlattrxref("size","input")}} {{CompatVersionUnknown()}} {{CompatGeckoMobile("4.0")}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("maxlength","input")}} {{CompatVersionUnknown()}} {{CompatGeckoMobile("4.0")}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("spellcheck","input")}} {{CompatUnknown()}} {{CompatGeckoMobile("4.0")}} {{CompatUnknown()}} 11.0 {{CompatUnknown()}}

Single line text fields

A single line text field is created using an {{HTMLElement("input")}} element whose {{htmlattrxref("type","input")}} attribute value is set to text (also, if you don't provide the {{htmlattrxref("type","input")}} attribute, text is the default value). The value text for this attribute is also the the fallback value if the value you specify for the {{htmlattrxref("type","input")}} attribute is unknown by the browser.

<input type="text">

Single line text fields have only one true constraint: if you type text with line breaks, the browser removes those line breaks before sending the data.

Screenshots of single line text fields on several platforms.

That said, it's possible to add some "on demand" constraints to a single line text field. To do this, you use the {{htmlattrxref("pattern","input")}} attribute; this tells the browser to check the validity of the value against a regular expression of your choice.

<input type="text" pattern="^cherry|banana$">

But HTML5 enhances the basic single line text field by adding special values for the {{htmlattrxref("type","input")}} attribute. Those values still turn an {{HTMLElement("input")}} element into a single line text field but they add a few extra constraints and features to the field.

E-mail address field

This type of field is set with the value email for the {{htmlattrxref("type","input")}} attribute:

<input type="email" multiple>

It adds this special validation constraint on the field: the user is required to type a valid e-mail address; any other content causes the field to be declared in error. It's also possible to let the user type several e-mail addresses by using the {{htmlattrxref("multiple","input")}} attribute.

Password field

This type of field is set using the value password for the {{htmlattrxref("type","input")}} attribute:

<input type="password">

It doesn't add any special constraints to the entered text, but it obscures the value of the field so it can't be read.

Note: Keep in mind this is just a user interface feature; unless you encode the text yourself using JavaScript code, it gets sent in plain text.

Search field

This type of field is set by using the value search for the {{htmlattrxref("type","input")}} attribute:

<input type="search" autosave>

The main difference between a text field and a search field is one of look-and-feel (often, search fields are rendered with rounded corners). However, there is also one added feature to search fields: their values can be automatically saved to be auto completed across multiple pages on the same site.

Screenshots of search fields on several platforms.

Phone number field

This type of field is set using tel as the value of the {{htmlattrxref("type","input")}} attribute:

<input type="tel">

Due to the wide variety of phone number formats around the world, this type of field does not enforce any constraints on the value entered by a user. This is primarily a semantic difference, although on some devices (especially on mobile), a different virtual keypad might be presented.

URL field

This type of field is set using the value url for the {{htmlattrxref("type","input")}} attribute:

<input type="url">

It adds special validation constraints on the field, ensuring that only valid URLs are entered; if a value is entered that isn't a well-formed URL, the form is considered to be in an error state.

Note: Just because the URL is well-formed doesn't necessarily mean that the URL refers to a location that actually exists.

Fields that have special constraints and are in error prevent the form from being sent; in addition, they can be styled so as to make the error clear. We will discuss this in detail in the article: Data form validation.

Compatibility table
Feature Desktop Chrome Firefox (Gecko) Internet Explorer Opera Safari
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="text" 1.0 {{CompatGeckoDesktop("1.0")}} 2 1.0 1.0
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="email" 10.0 {{CompatGeckoDesktop("4.0")}} 10 10.62 {{CompatUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="password" 1.0 {{CompatGeckoDesktop("1.0")}} 2 1.0 1.0
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="search" 5.0 {{CompatGeckoDesktop("4.0")}} 10 11.01 5.0
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="tel" 5.0 {{CompatGeckoDesktop("4.0")}} 10 11.01 5.0
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="url" 10.0 {{CompatGeckoDesktop("4.0")}} 10 10.62 {{CompatUnknown()}}
Feature Mobile Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="text" {{CompatVersionUnknown()}} {{CompatGeckoMobile("4.0")}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}} 1.0
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="email" {{CompatNo()}} {{CompatGeckoMobile("4.0")}} {{CompatNo()}} {{CompatVersionUnknown()}} {{CompatUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="password" {{CompatUnknown()}} {{CompatGeckoMobile("4.0")}} {{CompatUnknown()}} {{CompatUnknown()}} {{CompatUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="search" {{CompatNo()}} {{CompatGeckoMobile("4.0")}} {{CompatUnknown()}} {{CompatVersionUnknown()}} 4.0
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="tel" 2.3 {{CompatGeckoMobile("4.0")}} {{CompatUnknown()}} {{CompatVersionUnknown()}} 3.1
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="url" {{CompatNo()}} {{CompatGeckoMobile("4.0")}} {{CompatUnknown()}} {{CompatVersionUnknown()}} 3.1

Multi-line text fields

A multi-line text field is specified using a {{HTMLElement("textarea")}} element, rather than using the {{HTMLElement("input")}} element.

<textarea cols="20" rows="10"></textarea>

The main difference between a textarea and a regular single line text field is that users are allowed to type text that includes hard line break (meaning it allows the characters carriage return [CR] and line feed [LF]).

It's also worth noting that, thanks to the CSS property {{cssxref("resize")}}, users can resize multi-line text boxes directly if you want to let them do so.

Screenshots of multi-lines text fields on several platforms.

Compatibility table
Feature Desktop Chrome Firefox (Gecko) Internet Explorer Opera Safari
{{HTMLElement("textarea")}} {{CompatVersionUnknown()}} {{CompatGeckoDesktop("1.0")}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}}
Feature Mobile Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
{{HTMLElement("textarea")}} {{CompatVersionUnknown()}} {{CompatGeckoMobile("4.0")}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}}

Drop-down widgets are a simple way to let the user select one of many options. HTML has two forms of drop down content: the select box and autocomplete content. In both cases the interaction is the same. Once the control is activated, the browser displays a list of values the user can select among. This list of values is displayed on top of the page content.

Select box

A select box is created with a {{HTMLElement("select")}} element with one or more {{HTMLElement("option")}} elements as its children, each of which specifies one of its possible values.

<select>
  <option>Banana</option>
  <option>Cherry</option>
  <option>Lemon</option>
</select>

If needed, the default value for the select box can be set using the {{htmlattrxref("selected","option")}} attribute on the desired {{HTMLElement("option")}} element. The {{HTMLElement("option")}} elements can also be nested inside some {{HTMLElement("optgroup")}} elements to create visual groups of values:

<select>
  <optgroup label="fruits">
    <option>Banana</option>
    <option selected>Cherry</option>
    <option>Lemon</option>
  </optgroup>
  <optgroup label="vegetables">
    <option>Carrot</option>
    <option>Eggplant</option>
    <option>Potatoe</option>
  </optgroup>
</select>
Compatibility table
Feature Desktop Chrome Firefox (Gecko) Internet Explorer Opera Safari
{{HTMLElement("select")}} 1.0 {{CompatGeckoDesktop("1.0")}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}}
{{HTMLElement("option")}} 1.0 {{CompatGeckoDesktop("1.0")}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}}
{{HTMLElement("optgroup")}} 1.0 {{CompatGeckoDesktop("1.0")}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}}
Feature Mobile Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
{{HTMLElement("select")}} {{CompatVersionUnknown()}} {{CompatGeckoMobile("4.0")}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}}
{{HTMLElement("option")}} {{CompatVersionUnknown()}} {{CompatGeckoMobile("4.0")}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}}
{{HTMLElement("optgroup")}} {{CompatVersionUnknown()}} {{CompatGeckoMobile("4.0")}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}}

Multi-choice select box

By default, a select box only lets the user select a single value. By adding the {{htmlattrxref("multiple","select")}} attribut to the {{HTMLElement("select")}} element, the user becomes able to select several values. In that case, however, the select box no longer displays the values as dropdown content; instead, it's displayed as a regular list box.

<select multiple>
  <option>Banana</option>
  <option>Cherry</option>
  <option>Lemon</option>
</select>
Note: All browsers that support the {{HTMLElement("select")}} element also support the {{htmlattrxref("multiple","select")}} attribute on it.

Auto-complete content

You can provide suggested, automatically-completed values for form widgets using the {{HTMLElement("datalist")}} element with some child {{HTMLElement("option")}} elements to specify the values to display. Once set, the data list is bound to another widget using the {{htmlattrxref("list","input")}} attribute.

Once a data list is affiliated with a form widget, its options are used to auto-complete text entered by the user; typically, this is done by presenting a drop-down box listing possible matches.

<label for="myFruit">What's your favorite fruit?</label>
<input type="text" id="myFruit" list="mySuggestion" />
<datalist id="mySuggestion">
  <option>Apple</option>
  <option>Banana</option>
  <option>Blackberry</option>
  <option>Blueberry</option>
  <option>Lemon</option>
  <option>Lychee</option>
  <option>Peach</option>
  <option>Pear</option>
</datalist>
Note: According to the HTML specification, the {{htmlattrxref("list","input")}} attribute and the {{HTMLElement("datalist")}} element can be used with any kind of widget requiring a user input. However, it is unclear how it should work with controls other than text (color or date for example), and different browsers behave differently from case to case. Because of that, be cautious using this feature with anything but text fields
Compatibility table
Feature Desktop Chrome Firefox (Gecko) Internet Explorer Opera Safari
{{HTMLElement("datalist")}} 20.0 {{CompatGeckoDesktop("4.0")}} 10 9.6 {{CompatNo()}}
{{HTMLElement("input")}}.{{htmlattrxref("list","input")}} 20.0 {{CompatGeckoDesktop("4.0")}} 10 9.6 {{CompatNo()}}
Feature Mobile Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
{{HTMLElement("datalist")}} {{CompatNo()}} {{CompatGeckoMobile("4.0")}} {{CompatNo()}} {{CompatVersionUnknown()}} {{CompatNo()}}
{{HTMLElement("input")}}.{{htmlattrxref("list","input")}} {{CompatNo()}} {{CompatGeckoMobile("4.0")}} {{CompatNo()}} {{CompatVersionUnknown()}} {{CompatNo()}}

Checkable items

Checkable items are widgets whose state you can change by clicking on them. There are two kinds of checkable item: the check box and the radio button. Both use the {{htmlattrxref("checked","input")}} attribute to indicate whether the widget is checked by default or not.

It worth noting that these widgets do not behave exactly like other form widgets. For most form widgets, once the form is sent, all widgets that have a {{htmlattrxref("name","input")}} attribute are sent, even if there is no value. In the case of checkable items, their values are sent only if they are checked. If they are not checked, nothing is sent, not even their name.

Check box

A check box is created by using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value checkbox.

<input type="checkbox" checked>

The checkbox created by the preceding HTML is checked by default.

Compatibility table
Feature Desktop Chrome Firefox (Gecko) Internet Explorer Opera Safari
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="checkbox" 1.0 {{CompatGeckoDesktop("1.0")}} 2 1.0 1.0
Feature Mobile Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="checkbox" 1.0 {{CompatGeckoMobile("1.0")}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}}

Radio button

A radio button is created by using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value radio.

<input type="radio" checked>

Several radio buttons can be tied together. If they share the same value for their {{htmlattrxref("name","input")}} attribute, they will be considered to be in the same group of buttons. Only one button in a given group may be checked at the same time; this means that when one of them is checked all the others automatically get unchecked. When the form is sent, only the value of the checked radio button is sent. If none of them are checked, the whole pool of radio buttons is considered to be in an unknown state and no value is sent with the form.

<fieldset>
  <legend>What gender are you?</legend>
  <p><label for="g1"><input type="radio" name="g" id="g1" value="M"> Male</label></p>
  <p><label for="g2"><input type="radio" name="g" id="g2" value="F"> Female</label></p>
  <p><label for="g3"><input type="radio" name="g" id="g3" value="B"> Both</label></p>
  <p><label for="g4"><input type="radio" name="g" id="g4" value="N"> None</label></p>
  <p><label for="g5"><input type="radio" name="g" id="g5" value="!"> This is not your concern!</label></p>
  <p><label for="g6"><input type="radio" name="g" id="g6" value="?"> Who cares?</label></p>
  <p><label for="g7"><input type="radio" name="g" id="g7" value="\o/"> Obi-Wan Kenobi</label></p>
</fieldset>
Compatibility table
Feature Desktop Chrome Firefox (Gecko) Internet Explorer Opera Safari
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="radio" 1.0 {{CompatGeckoDesktop("1.0")}} 2 1.0 1.0
Feature Mobile Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="radio" 1.0 {{CompatGeckoMobile("1.0")}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}}

Buttons

Within HTML forms, there are three kinds of button:

Submit
Sends the form data to the server.
Reset
Resets all form widgets to their default values.
Anonymous
Buttons that have no automatic effect but can be customized using JavaScript code.

A button is created using a {{HTMLElement("button")}} element or an {{HTMLElement("input")}} element. It's the value of the {{htmlattrxref("type","input")}} attribute that specifies what kind of button is displayed:

submit

<button type="submit">
    This a <br><strong>submit button</strong>
</button>

<input type="submit" value="This is a submit button">

reset

<button type="reset">
    This a <br><strong>reset button</strong>
</button>

<input type="reset" value="This is a reset button">

anonymous

<button type="button">
    This an <br><strong>anonymous button</strong>
</button>

<input type="button" value="This is an anonymous button">

The buttons always behave the same whether you use a {{HTMLElement("button")}} element or an {{HTMLElement("input")}} element. There are, however, some minor differences:

  • As you can see in the previous examples, {{HTMLElement("button")}} elements let you use HTML content as their label, while {{HTMLElement("input")}} elements only accept plain text content.
  • With {{HTMLElement("button")}} elements, it's possible to have a value different than the button's label (this isn't reliable in versions of Internet Explorer prior to IE 8, however).
Compatibility table
Feature Desktop Chrome Firefox (Gecko) Internet Explorer Opera Safari
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="submit" 1.0 {{CompatGeckoDesktop("1.0")}} 2 1.0 1.0
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="reset" 1.0 {{CompatGeckoDesktop("1.0")}} 2 1.0 1.0
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="button" 1.0 {{CompatGeckoDesktop("1.0")}} 3 1.0 1.0
{{HTMLElement("button")}} 1.0 {{CompatGeckoDesktop("1.0")}} {{CompatVersionUnknown()}}
(Buggy before IE8)
{{CompatVersionUnknown()}} {{CompatVersionUnknown()}}
Feature Mobile Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="number" 1.0 {{CompatGeckoMobile("1.0")}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="reset" 1.0 {{CompatGeckoMobile("1.0")}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="button" 1.0 {{CompatGeckoMobile("1.0")}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}}
{{HTMLElement("button")}} 1.0 {{CompatGeckoMobile("1.0")}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}}

Advanced form widgets

Those widgets are form controls that let user input some complex or highly structured data. This includes exact or approximate numbers, date and time, or colors.

Numbers

Widgets for numbers are created with the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value number. This control looks like a text field but allows only floating-point numbers, and usually provides some buttons to increase or decrease the value of the widget.

It's also possible to constrain the value by setting the {{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} attributes. You can also specify the amount by which the increase and decrease buttons change the widget's value by setting the {{htmlattrxref("step","input")}} attribute.

Example

<input type="number" min="1" max="10" step="2">

This creates a number widget whose value is restricted to be between 1 and 10 whose increase and decrease buttons change its value by 2.

Compatibility table
Feature Desktop Chrome Firefox (Gecko) Internet Explorer Opera Safari
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="number" 11.0 {{CompatNo()}} {{bug('344616')}} 10
(recognized but no UI)
{{CompatVersionUnknown()}} 5.2
Feature Mobile Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="number" 2.3 {{CompatNo()}} {{CompatNo()}} {{CompatVersionUnknown()}} 4.0

Sliders

Another way to pick a number is to use a slider. Because, visually speaking, these are less accurate than text fields, sliders are used to pick a number whose exact value is not necessarily important.

A slider is created by using the {{HTMLElement("input")}} with its {{htmlattrxref("type","input")}} attribute set to the value range. It's important to properly configure it your slider; to that end, it's highly recommended that you set the {{htmlattrxref("min","input")}}, {{htmlattrxref("max","input")}}, and {{htmlattrxref("step","input")}} attributes.

Example

<input type="range" min="1" max="5" step="1">

This example creates a slider whose value may range between 1 and 5, and whose increment/decrement buttons change the value by +1 and -1.

Compatibility table
Feature Desktop Chrome Firefox (Gecko) Internet Explorer Opera Safari
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="range" 5.0 {{CompatNo()}} {{bug('344618')}} 10 10.62 4.0
Feature Mobile Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="range" {{CompatNo()}} {{CompatNo()}} {{CompatNo()}} 10.62 5.0

Date and time picker

Gathering date and time values has traditionally been a nightmare for web developers. HTML5 brings some enhancements here by providing a special control to handle this specific kind of data.

A date and time control is created using the {{HTMLElement("input")}} element and the proper value for the {{htmlattrxref("type","input")}} attribute. Because you may wish to collect a date, a time, or both, there are several different available values for the type attribute:

date

This creates a widget to display and pick a date but without any time.

<input type="date">

datetime

This creates a widget to display and pick a date with time in the UTC time zone.

<input type="datetime">

datetime-local

This creates a widget to display and pick a date with time in any specific time zone.

<input type="datetime-local">

month

This creates a widget to display and pick a month with a year.

<input type="month">

time

This creates a widget to display and pick a time value.

<input type="time">

week

This creates a widget to display and pick a week number and its year.

<input type="time">

All date and time control can be constrained using the {{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} attributes.

<label for="myDate">When are you available this summer?</label>
<input type="date" min="2013-06-01" max="2013-08-31" id="myDate">
Compatibility table
Feature Desktop Chrome Firefox (Gecko) Internet Explorer Opera Safari
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="date" 20.0 {{CompatNo()}} {{bug('446510')}} {{CompatNo()}} 10.62 {{CompatVersionUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="datetime" {{CompatNo()}} {{CompatNo()}} {{bug('446510')}} {{CompatNo()}} 10.62 {{CompatVersionUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="datetime-local" {{CompatNo()}} {{CompatNo()}} {{bug('446510')}} {{CompatNo()}} 10.62 {{CompatVersionUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="month" {{CompatNo()}} {{CompatNo()}} {{bug('446510')}} {{CompatNo()}} 10.62 {{CompatVersionUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="time" {{CompatNo()}} {{CompatNo()}} {{bug('446510')}} {{CompatNo()}} 10.62 {{CompatVersionUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="week" {{CompatNo()}} {{CompatNo()}} {{bug('446510')}} {{CompatNo()}} 10.62 {{CompatVersionUnknown()}}
Feature Mobile Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="date" {{CompatNo()}} {{CompatNo()}} {{CompatNo()}} 10.62 5.0
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="datetime" {{CompatNo()}} {{CompatNo()}} {{CompatNo()}} 10.62 {{CompatVersionUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="datetime-local" {{CompatNo()}} {{CompatNo()}} {{CompatNo()}} 10.62 {{CompatVersionUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="month" {{CompatNo()}} {{CompatNo()}} {{CompatNo()}} 10.62 {{CompatVersionUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="time" {{CompatNo()}} {{CompatNo()}} {{CompatNo()}} 10.62 {{CompatVersionUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="week" {{CompatNo()}} {{CompatNo()}} {{CompatNo()}} 10.62 {{CompatVersionUnknown()}}
Warning: The date and time widgets are very new, and even browsers that claim to support them often have significant user interface problems that make them difficult to use. Test your content thoroughly with different browsers before you deploy it!

Color picker

Colors are always a bit difficult to handle. There are many ways to express them: RGB values (decimal or hexadecimal), HSL values, keywords, etc. The color widget lets users pick a color in both textual and visual ways.

A color widget is created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value color.

<input type="color">
Compatibility table
Feature Desktop Chrome Firefox (Gecko) Internet Explorer Opera Safari
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="color" 21.0 {{CompatNo()}} {{bug('547004')}} {{CompatNo()}} 11.01 {{CompatNo()}}
Feature Mobile Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="color" {{CompatNo()}} {{CompatNo()}} {{CompatNo()}} {{CompatUnknown()}} {{CompatNo()}}

Other widgets

There are a few other widgets that cannot be easily classified due to their very specific behaviors, but which are still very useful.

File picker

HTML forms are able to send files to a server; this specific action is detailed in the article: Sending and retrieving form data. The file picker widget is how the user can choose one or more files to send.

To create a file picker widget, you use the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to file. The types of files that are accepted can be constrained using the {{htmlattrxref("accept","input")}} attribute. In addition, if you want to let the user pick more than one file, you can do so by adding the {{htmlattrxref("multiple","input")}} attribute.

Example

In this example, a file picker is created requesting graphic image files. The user is allowed to select multiple files.

<input type="file" accept="image/*" multiple>
Compatibility table
Feature Desktop Chrome Firefox (Gecko) Internet Explorer Opera Safari
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="file" 1.0 {{CompatGeckoDesktop("1.0")}} 3.02 1.0 1.0
Feature Mobile Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="file" {{CompatUnknown()}} {{CompatUnknown()}} {{CompatUnknown()}} {{CompatUnknown()}} {{CompatUnknown()}}

Hidden content

It's sometimes convenient for technical reasons to have pieces of data that are sent with a form but not displayed to the user. To do this, you can add an invisible element in your form. To do this, use an {{HTMLElement("input")}} with its {{htmlattrxref("type","input")}} attribute set to the value hidden.

If you create such an element, it's required to set its name and value attributes:

<input type="hidden" name="timestamp" value="1286705410">
Compatibility table
Feature Desktop Chrome Firefox (Gecko) Internet Explorer Opera Safari
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="hidden" 1.0 {{CompatGeckoDesktop("1.0")}} 2 1.0 1.0
Feature Mobile Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="hidden" {{CompatVersionUnknown()}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}}

Image button

The image button control is one which is displayed exactly like an {{HTMLElement("img")}} element, except that when the user clicks on it, it behaves like a submit button (see above).

An image button is created using an {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value image. This element supports exactly the same set of attributes as the {{HTMLElement("img")}} element, plus all the attributes supported by any form buttons.

<input type="image" alt="Click me!" src="my-img.png" width="80" height="30" />

If the image button is used to submit the form, this widget doesn't submit its value but instead the X and Y coordinates of the click on the image (the coordinates are relative to the image, meaning that the upper-left corner of the image represents the coordinate 0, 0). The coordinates are sent as two key/value pairs. The X value key is the value of the {{htmlattrxref("name","input")}} attribute followed by the string ".x" and the Y value key is the value of the {{htmlattrxref("name","input")}} attribute followed by the string ".y". This is a very convenient way to build a "hot map".

Let's see an example:

<form action="http://foo.com" method="get">
  <input type="image" value="pos" alt="" src="map.png" />
</form>

When you click on the image of this form, you are sent to the following URL:

http://foo.com?pos.x=123&pos.y=456

The value of the pos.x and pos.y parameters depends on where you click on the image. How those value are sent and retrieve is detailed on the Sending and retrieving form data article.

Compatibility table
Feature Desktop Chrome Firefox (Gecko) Internet Explorer Opera Safari
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="image" 1.0 1.0 2 1.0 1.0
Feature Mobile Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="image" {{CompatVersionUnknown()}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}}

Meters and progress bars

Meters and progress bars are visual representations of numeric values.

A progress bar represents a value that changes over time up to a maximum value specified by the {{htmlattrxref("max","progress")}} attribute. Such a bar is created using a {{ HTMLElement("progress")}} element. The content inside the {{HTMLElement("progress")}} element is a fallback for browsers that don't support the element and for assistive technologies to vocalize it.

<progress max="100" value="75">75/100</progress>

A meter bar represents a fixed value in a range delimited by a {{htmlattrxref("min","meter")}} and a {{htmlattrxref("max","meter")}} value. This value is visualy renderd as a bar, and to know how this bar looks, we compare the value to some others values:

  • the {{htmlattrxref("low","meter")}} and {{htmlattrxref("high","meter")}} values divide the range in three parts:
    • The lower part of the range is between the {{htmlattrxref("min","meter")}} and {{htmlattrxref("low","meter")}} values (including those values)
    • The medium part of the range is between the {{htmlattrxref("low","meter")}} and {{htmlattrxref("high","meter")}} values (excluding those values)
    • The higher part of the range is between the {{htmlattrxref("high","meter")}} and {{htmlattrxref("max","meter")}} values (including those values)
  • The {{htmlattrxref("optimum","meter")}} value define the optimum value for the {{HTMLElement("meter")}} element. In conjuction with the {{htmlattrxref("low","meter")}} and {{htmlattrxref("high","meter")}} value, it defines which part of the range is prefered:
    • If the {{htmlattrxref("optimum","meter")}} value is in the lower part of the range, the lower range is considered to be the prefered part, the medium range is considered to be the average part and the higher range is considered to be the worst part.
    • If the {{htmlattrxref("optimum","meter")}} value is in the medium part of the range, the lower range is considered to be the average part, the medium range is considered to be the prefered part and the higher range is considered to be the average part as well.
    • If the {{htmlattrxref("optimum","meter")}} value is in the higher part of the range, the lower range is considered to be the worst part, the medium range is considered to be the average part and the higher range is considered to be the prefered part.

All browsers that implement the {{HTMLElement("meter")}} element use those values to change the color of the meter bar:

  • If the current value is in the prefered part of the range, the bar is green.
  • If the current value is in the average part of the range, the bar is yellow.
  • If the current value is in the worst part of the range, the bar is red.

Such a bar is created using a {{HTMLElement("meter")}} element. The content inside the {{HTMLElement("meter")}} element is a fallback for browsers that don't support the element and for assistive technologies to vocalize it.

<meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter>
Compatibility table
Feature Desktop Chrome Firefox (Gecko) Internet Explorer Opera Safari
{{HTMLElement("progress")}} 6.0 {{CompatGeckoDesktop("6.0")}} 10 10.6 5.2
{{HTMLElement("meter")}} 6.0 {{CompatGeckoDesktop("16.0")}} {{CompatNo()}} 11.0 5.2
Feature Mobile Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
{{HTMLElement("progress")}} {{CompatNo()}} {{CompatGeckoMobile("6.0")}} {{CompatNo()}} 11.0 {{CompatUnknown()}}
{{HTMLElement("meter")}} {{CompatNo()}} {{CompatGeckoMobile("16.0")}} {{CompatNo()}} 11.0 {{CompatUnknown()}}

See also

To dig into the different form widgets, there are some useful external resources you should check out:

Revision Source

<p><a href="/en-US/docs/HTML/Forms" title="/en-US/docs/HTML/Forms">HTML forms</a> are made of widgets. Those widgets are built-in controls supported by each browser. In this article we will dig into each of them, see how they work, and learn how well various browsers support them.</p>
<p>We will focus on the built-in form widgets, but because HTML forms remain quite limited and the quality of the implementations can be very different from one browser to another, web developers sometimes build their own form widgets. This will be detailed in the article: <a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a>.</p>
<h2 id="Text_input_fields">Text input fields</h2>
<p>Text input fields are the most basic form widgets. They are a very convenient way to let the user enter any kind of data. However, some text fields can be specialized to achieve particular needs.</p>
<p>It's worth noting that HTML form text fields are simple plain text input controls. This means that you cannot use them to perform <a href="/en-US/docs/Rich-Text_Editing_in_Mozilla" title="/en-US/docs/Rich-Text_Editing_in_Mozilla">rich editing</a> (bold, italic, etc.). All rich text editors out there are custom widgets.</p>
<p>All text fields share some common behaviors:</p>
<ul>
  <li>They can be marked as {{htmlattrxref("readonly","input")}} (the user cannot modify the input value) or even {{htmlattrxref("disabled","input")}} (the input value is never sent with the rest of the form data).</li>
  <li>They can have a {{htmlattrxref("placeholder","input")}}; this is text that appears inside the text input box that describes the purpose of the box briefly.</li>
  <li>They can be constrained in {{htmlattrxref("size","input")}} (the physical size of the box) and <a href="/en-US/docs/HTML/Element/input#attr-maxlength" title="/en-US/docs/HTML/Element/input#attr-maxlength">length</a> (the maximum number of characters that can be entered into the box).</li>
  <li>They can benefit from <a href="/en-US/docs/HTML/Element/input#attr-spellcheck" title="/en-US/docs/HTML/Element/input#attr-spellcheck">spell checking</a>, if the browser supports it.</li>
</ul>
<table class="standard-table">
  <caption>
    Compatibility table</caption>
  <tbody>
    <tr>
      <th>Feature Desktop</th>
      <th>Chrome</th>
      <th>Firefox (Gecko)</th>
      <th>Internet Explorer</th>
      <th>Opera</th>
      <th>Safari</th>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}.{{htmlattrxref("readonly","input")}}</td>
      <td>1.0</td>
      <td>{{CompatGeckoDesktop("1.0")}}</td>
      <td>6</td>
      <td>1.0</td>
      <td>1.0</td>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}.{{htmlattrxref("disabled","input")}}</td>
      <td>1.0</td>
      <td>{{CompatGeckoDesktop("1.0")}}</td>
      <td>6</td>
      <td>1.0</td>
      <td>1.0</td>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}.{{htmlattrxref("placeholder","input")}}</td>
      <td>10.0</td>
      <td>{{CompatGeckoDesktop("4.0")}}</td>
      <td>10</td>
      <td>11.10</td>
      <td>4.0</td>
    </tr>
    <tr>
      <td>{{HTMLElement("textarea")}}.{{htmlattrxref("placeholder","textarea")}}</td>
      <td>10.0</td>
      <td>{{CompatGeckoDesktop("4.0")}}</td>
      <td>10</td>
      <td>11.50</td>
      <td>5.0</td>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}.{{htmlattrxref("size","input")}}</td>
      <td>1.0</td>
      <td>{{CompatGeckoDesktop("1.0")}}</td>
      <td>2</td>
      <td>1.0</td>
      <td>1.0</td>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}.{{htmlattrxref("maxlength","input")}}</td>
      <td>1.0</td>
      <td>{{CompatGeckoDesktop("1.0")}}</td>
      <td>2</td>
      <td>1.0</td>
      <td>1.0</td>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}.{{htmlattrxref("spellcheck","input")}}</td>
      <td>10.0</td>
      <td>{{CompatGeckoDesktop("3.6")}}</td>
      <td>10</td>
      <td>11.0</td>
      <td>4.0</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th>Feature Mobile</th>
      <th>Android</th>
      <th>Firefox Mobile (Gecko)</th>
      <th>IE Mobile</th>
      <th>Opera Mobile</th>
      <th>Safari Mobile</th>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}.{{htmlattrxref("readonly","input")}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatGeckoMobile("4.0")}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}.{{htmlattrxref("disabled","input")}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatGeckoMobile("4.0")}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}.{{htmlattrxref("placeholder","input")}}</td>
      <td>2.3</td>
      <td>{{CompatGeckoMobile("4.0")}}</td>
      <td>{{CompatUnknown()}}</td>
      <td>11.10</td>
      <td>4</td>
    </tr>
    <tr>
      <td>{{HTMLElement("textarea")}}.{{htmlattrxref("placeholder","textarea")}}</td>
      <td>{{CompatUnknown()}}</td>
      <td>{{CompatGeckoMobile("4.0")}}</td>
      <td>{{CompatUnknown()}}</td>
      <td>11.50</td>
      <td>4</td>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}.{{htmlattrxref("size","input")}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatGeckoMobile("4.0")}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}.{{htmlattrxref("maxlength","input")}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatGeckoMobile("4.0")}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}.{{htmlattrxref("spellcheck","input")}}</td>
      <td>{{CompatUnknown()}}</td>
      <td>{{CompatGeckoMobile("4.0")}}</td>
      <td>{{CompatUnknown()}}</td>
      <td>11.0</td>
      <td>{{CompatUnknown()}}</td>
    </tr>
  </tbody>
</table>
<h3 id="Single_line_text_fields">Single line text fields</h3>
<p>A single line text field is created using an {{HTMLElement("input")}} element whose {{htmlattrxref("type","input")}} attribute value is set to <code>text</code> (also, if you don't provide the {{htmlattrxref("type","input")}} attribute, <code>text</code> is the default value). The value <code>text</code> for this attribute is also the the fallback value if the value you specify for the {{htmlattrxref("type","input")}} attribute is unknown by the browser.</p>
<pre class="brush: html">
&lt;input type="text"&gt;</pre>
<p>Single line text fields have only one true constraint: if you type text with line breaks, the browser removes those line breaks before sending the data.</p>
<p><img alt="Screenshots of single line text fields on several platforms." src="/files/4267/all-single-line-text-field.png" style="width: 655px; height: 235px;" /></p>
<p>That said, it's possible to add some "on demand" constraints to a single line text field. To do this, you use the {{htmlattrxref("pattern","input")}} attribute; this tells the browser to check the validity of the value against a <a href="/en-US/docs/JavaScript/Guide/Regular_Expressions" title="/en-US/docs/JavaScript/Guide/Regular_Expressions">regular expression</a> of your choice.</p>
<pre class="brush: html">
&lt;input type="text" pattern="^cherry|banana$"&gt;</pre>
<p>But HTML5 enhances the basic single line text field by adding special values for the {{htmlattrxref("type","input")}} attribute. Those values still turn an {{HTMLElement("input")}} element into a single line text field but they add a few extra constraints and features to the field.</p>
<h4 id="E-mail_address_field">E-mail address field</h4>
<p>This type of field is set with the value <code>email</code> for the {{htmlattrxref("type","input")}} attribute:</p>
<pre class="brush: html">
&lt;input type="email" multiple&gt;</pre>
<p>It adds this special validation constraint on the field: the user is required to type a valid e-mail address; any other content causes the field to be declared in error. It's also possible to let the user type several e-mail addresses by using the {{htmlattrxref("multiple","input")}} attribute.</p>
<h4 id="Password_field">Password field</h4>
<p>This type of field is set using the value <code>password</code> for the {{htmlattrxref("type","input")}} attribute:</p>
<pre class="brush: html">
&lt;input type="password"&gt;</pre>
<p>It doesn't add any special constraints to the entered text, but it obscures the value of the field so it can't be read.</p>
<div class="note">
  <strong>Note:</strong> Keep in mind this is just a user interface feature; unless you encode the text yourself using JavaScript code, it gets sent in plain text.</div>
<h4 id="Search_field">Search field</h4>
<p>This type of field is set by using the value <code>search</code> for the {{htmlattrxref("type","input")}} attribute:</p>
<pre class="brush: html">
&lt;input type="search" autosave&gt;</pre>
<p>The main difference between a text field and a search field is one of look-and-feel (often, search fields are rendered with rounded corners). However, there is also one added feature to search fields: their values can be automatically saved to be auto completed across multiple pages on the same site.</p>
<p><img alt="Screenshots of search fields on several platforms." src="/files/4269/all-search-field.png" style="width: 655px; height: 235px;" /></p>
<h4 id="Phone_number_field">Phone number field</h4>
<p>This type of field is set using <code>tel</code> as the value of the {{htmlattrxref("type","input")}} attribute:</p>
<pre class="brush: html">
&lt;input type="tel"&gt;</pre>
<p>Due to the wide variety of phone number formats around the world, this type of field does not enforce any constraints on the value entered by a user. This is primarily a semantic difference, although on some devices (especially on mobile), a different virtual keypad might be presented.</p>
<h4 id="URL_field">URL field</h4>
<p>This type of field is set using the value <code>url</code> for the {{htmlattrxref("type","input")}} attribute:</p>
<pre class="brush: html">
&lt;input type="url"&gt;</pre>
<p>It adds special validation constraints on the field, ensuring that only valid URLs are entered; if a value is entered that isn't a well-formed URL, the form is considered to be in an error state.</p>
<div class="note">
  <strong>Note:</strong> Just because the URL is well-formed doesn't necessarily mean that the URL refers to a location that actually exists.</div>
<p>Fields that have special constraints and are in error prevent the form from being sent; in addition, they can be styled so as to make the error clear. We will discuss this in detail in the article: <a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">Data form validation</a>.</p>
<table class="standard-table">
  <caption>
    Compatibility table</caption>
  <tbody>
    <tr>
      <th>Feature Desktop</th>
      <th>Chrome</th>
      <th>Firefox (Gecko)</th>
      <th>Internet Explorer</th>
      <th>Opera</th>
      <th>Safari</th>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="text"</code></td>
      <td>1.0</td>
      <td>{{CompatGeckoDesktop("1.0")}}</td>
      <td>2</td>
      <td>1.0</td>
      <td>1.0</td>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="email"</code></td>
      <td>10.0</td>
      <td>{{CompatGeckoDesktop("4.0")}}</td>
      <td>10</td>
      <td>10.62</td>
      <td>{{CompatUnknown()}}</td>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="password"</code></td>
      <td>1.0</td>
      <td>{{CompatGeckoDesktop("1.0")}}</td>
      <td>2</td>
      <td>1.0</td>
      <td>1.0</td>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="search"</code></td>
      <td>5.0</td>
      <td>{{CompatGeckoDesktop("4.0")}}</td>
      <td>10</td>
      <td>11.01</td>
      <td>5.0</td>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="tel"</code></td>
      <td>5.0</td>
      <td>{{CompatGeckoDesktop("4.0")}}</td>
      <td>10</td>
      <td>11.01</td>
      <td>5.0</td>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="url"</code></td>
      <td>10.0</td>
      <td>{{CompatGeckoDesktop("4.0")}}</td>
      <td>10</td>
      <td>10.62</td>
      <td>{{CompatUnknown()}}</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th>Feature Mobile</th>
      <th>Android</th>
      <th>Firefox Mobile (Gecko)</th>
      <th>IE Mobile</th>
      <th>Opera Mobile</th>
      <th>Safari Mobile</th>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="text"</code></td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatGeckoMobile("4.0")}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>1.0</td>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="email"</code></td>
      <td>{{CompatNo()}}</td>
      <td>{{CompatGeckoMobile("4.0")}}</td>
      <td>{{CompatNo()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatUnknown()}}</td>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="password"</code></td>
      <td>{{CompatUnknown()}}</td>
      <td>{{CompatGeckoMobile("4.0")}}</td>
      <td>{{CompatUnknown()}}</td>
      <td>{{CompatUnknown()}}</td>
      <td>{{CompatUnknown()}}</td>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="search"</code></td>
      <td>{{CompatNo()}}</td>
      <td>{{CompatGeckoMobile("4.0")}}</td>
      <td>{{CompatUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>4.0</td>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="tel"</code></td>
      <td>2.3</td>
      <td>{{CompatGeckoMobile("4.0")}}</td>
      <td>{{CompatUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>3.1</td>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="url"</code></td>
      <td>{{CompatNo()}}</td>
      <td>{{CompatGeckoMobile("4.0")}}</td>
      <td>{{CompatUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>3.1</td>
    </tr>
  </tbody>
</table>
<h3 id="Multi-line_text_fields">Multi-line text fields</h3>
<p>A multi-line text field is specified using a {{HTMLElement("textarea")}} element, rather than using the {{HTMLElement("input")}} element.</p>
<pre class="brush: html">
&lt;textarea cols="20" rows="10"&gt;&lt;/textarea&gt;</pre>
<p>The main difference between a textarea and a regular single line text field is that users are allowed to type text that includes hard line break (meaning it allows the characters carriage return [CR] and line feed [LF]).</p>
<p>It's also worth noting that, thanks to the CSS property {{cssxref("resize")}}, users can resize multi-line text boxes directly if you want to let them do so.</p>
<p><img alt="Screenshots of multi-lines text fields on several platforms." src="/files/4271/all-multi-lines-text-field.png" style="width: 745px; height: 330px;" /></p>
<table class="standard-table">
  <caption>
    Compatibility table</caption>
  <tbody>
    <tr>
      <th>Feature Desktop</th>
      <th>Chrome</th>
      <th>Firefox (Gecko)</th>
      <th>Internet Explorer</th>
      <th>Opera</th>
      <th>Safari</th>
    </tr>
    <tr>
      <td>{{HTMLElement("textarea")}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatGeckoDesktop("1.0")}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th>Feature Mobile</th>
      <th>Android</th>
      <th>Firefox Mobile (Gecko)</th>
      <th>IE Mobile</th>
      <th>Opera Mobile</th>
      <th>Safari Mobile</th>
    </tr>
    <tr>
      <td>{{HTMLElement("textarea")}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatGeckoMobile("4.0")}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
    </tr>
  </tbody>
</table>
<h2 id="Drop-down_content">Drop-down content</h2>
<p>Drop-down widgets are a simple way to let the user select one of many options. HTML has two forms of drop down content: the select box and autocomplete content. In both cases the interaction is the same. Once the control is activated, the browser displays a list of values the user can select among. This list of values is displayed on top of the page content.</p>
<h3 id="Select_box">Select box</h3>
<p>A select box is created with a {{HTMLElement("select")}} element with one or more {{HTMLElement("option")}} elements as its children, each of which specifies one of its possible values.</p>
<pre class="brush: html">
&lt;select&gt;
  &lt;option&gt;Banana&lt;/option&gt;
  &lt;option&gt;Cherry&lt;/option&gt;
  &lt;option&gt;Lemon&lt;/option&gt;
&lt;/select&gt;</pre>
<p>If needed, the default value for the select box can be set using the {{htmlattrxref("selected","option")}} attribute on the desired {{HTMLElement("option")}} element. The {{HTMLElement("option")}} elements can also be nested inside some {{HTMLElement("optgroup")}} elements to create visual groups of values:</p>
<pre class="brush: html">
&lt;select&gt;
&nbsp; &lt;optgroup label="fruits"&gt;
&nbsp;&nbsp;&nbsp; &lt;option&gt;Banana&lt;/option&gt;
&nbsp;&nbsp;&nbsp; &lt;option selected&gt;Cherry&lt;/option&gt;
&nbsp;&nbsp;&nbsp; &lt;option&gt;Lemon&lt;/option&gt;
&nbsp; &lt;/optgroup&gt;
&nbsp; &lt;optgroup label="vegetables"&gt;
&nbsp;&nbsp;&nbsp; &lt;option&gt;Carrot&lt;/option&gt;
&nbsp;&nbsp;&nbsp; &lt;option&gt;Eggplant&lt;/option&gt;
&nbsp;&nbsp;&nbsp; &lt;option&gt;Potatoe&lt;/option&gt;
&nbsp; &lt;/optgroup&gt;
&lt;/select&gt;</pre>
<table class="standard-table">
  <caption>
    Compatibility table</caption>
  <tbody>
    <tr>
      <th>Feature Desktop</th>
      <th>Chrome</th>
      <th>Firefox (Gecko)</th>
      <th>Internet Explorer</th>
      <th>Opera</th>
      <th>Safari</th>
    </tr>
    <tr>
      <td>{{HTMLElement("select")}}</td>
      <td>1.0</td>
      <td>{{CompatGeckoDesktop("1.0")}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
    </tr>
    <tr>
      <td>{{HTMLElement("option")}}</td>
      <td>1.0</td>
      <td>{{CompatGeckoDesktop("1.0")}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
    </tr>
    <tr>
      <td>{{HTMLElement("optgroup")}}</td>
      <td>1.0</td>
      <td>{{CompatGeckoDesktop("1.0")}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th>Feature Mobile</th>
      <th>Android</th>
      <th>Firefox Mobile (Gecko)</th>
      <th>IE Mobile</th>
      <th>Opera Mobile</th>
      <th>Safari Mobile</th>
    </tr>
    <tr>
      <td>{{HTMLElement("select")}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatGeckoMobile("4.0")}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
    </tr>
    <tr>
      <td>{{HTMLElement("option")}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatGeckoMobile("4.0")}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
    </tr>
    <tr>
      <td>{{HTMLElement("optgroup")}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatGeckoMobile("4.0")}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
    </tr>
  </tbody>
</table>
<h3 id="Multi-choice_select_box">Multi-choice select box</h3>
<p>By default, a select box only lets the user select a single value. By adding the {{htmlattrxref("multiple","select")}} attribut to the {{HTMLElement("select")}} element, the user becomes able to select several values. In that case, however, the select box no longer displays the values as dropdown content; instead, it's displayed as a regular list box.</p>
<pre class="brush: html">
&lt;select multiple&gt;
  &lt;option&gt;Banana&lt;/option&gt;
  &lt;option&gt;Cherry&lt;/option&gt;
  &lt;option&gt;Lemon&lt;/option&gt;
&lt;/select&gt;</pre>
<div class="note">
  <strong>Note:</strong> All browsers that support the {{HTMLElement("select")}} element also support the {{htmlattrxref("multiple","select")}} attribute on it.</div>
<h3 id="Auto-complete_content">Auto-complete content</h3>
<p>You can provide suggested, automatically-completed values for form widgets using the {{HTMLElement("datalist")}} element with some child {{HTMLElement("option")}} elements to specify the values to display. Once set, the data list is bound to another widget using the {{htmlattrxref("list","input")}} attribute.</p>
<p>Once a data list is affiliated with a form widget, its options are used to auto-complete text entered by the user; typically, this is done by presenting a drop-down box listing possible matches.</p>
<pre class="brush: html">
&lt;label for="myFruit"&gt;What's your favorite fruit?&lt;/label&gt;
&lt;input type="text" id="myFruit" list="mySuggestion" /&gt;
&lt;datalist id="mySuggestion"&gt;
&nbsp; &lt;option&gt;Apple&lt;/option&gt;
&nbsp; &lt;option&gt;Banana&lt;/option&gt;
&nbsp; &lt;option&gt;Blackberry&lt;/option&gt;
&nbsp; &lt;option&gt;Blueberry&lt;/option&gt;
&nbsp; &lt;option&gt;Lemon&lt;/option&gt;
&nbsp; &lt;option&gt;Lychee&lt;/option&gt;
&nbsp; &lt;option&gt;Peach&lt;/option&gt;
&nbsp; &lt;option&gt;Pear&lt;/option&gt;
&lt;/datalist&gt;</pre>
<div class="note">
  <strong>Note:</strong> According to <a href="http://www.w3.org/TR/html5/common-input-element-attributes.html#attr-input-list" rel="external" title="http://www.w3.org/TR/html5/common-input-element-attributes.html#attr-input-list">the HTML specification</a>, the {{htmlattrxref("list","input")}} attribute and the {{HTMLElement("datalist")}} element can be used with any kind of widget requiring a user input. However, it is unclear how it should work with controls other than text (color or date for example), and different browsers behave differently from case to case. Because of that, be cautious using this feature with anything but text fields</div>
<table class="standard-table">
  <caption>
    Compatibility table</caption>
  <tbody>
    <tr>
      <th>Feature Desktop</th>
      <th>Chrome</th>
      <th>Firefox (Gecko)</th>
      <th>Internet Explorer</th>
      <th>Opera</th>
      <th>Safari</th>
    </tr>
    <tr>
      <td>{{HTMLElement("datalist")}}</td>
      <td>20.0</td>
      <td>{{CompatGeckoDesktop("4.0")}}</td>
      <td>10</td>
      <td>9.6</td>
      <td>{{CompatNo()}}</td>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("list","input")}}</td>
      <td>20.0</td>
      <td>{{CompatGeckoDesktop("4.0")}}</td>
      <td>10</td>
      <td>9.6</td>
      <td>{{CompatNo()}}</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th>Feature Mobile</th>
      <th>Android</th>
      <th>Firefox Mobile (Gecko)</th>
      <th>IE Mobile</th>
      <th>Opera Mobile</th>
      <th>Safari Mobile</th>
    </tr>
    <tr>
      <td>{{HTMLElement("datalist")}}</td>
      <td>{{CompatNo()}}</td>
      <td>{{CompatGeckoMobile("4.0")}}</td>
      <td>{{CompatNo()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatNo()}}</td>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("list","input")}}</td>
      <td>{{CompatNo()}}</td>
      <td>{{CompatGeckoMobile("4.0")}}</td>
      <td>{{CompatNo()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatNo()}}</td>
    </tr>
  </tbody>
</table>
<h2 id="Checkable_items">Checkable items</h2>
<p>Checkable items are widgets whose state you can change by clicking on them. There are two kinds of checkable item: the check box and the radio button. Both use the {{htmlattrxref("checked","input")}} attribute to indicate whether the widget is checked by default or not.</p>
<p>It worth noting that these widgets do not behave exactly like other form widgets. For most form widgets, once the form is sent, all widgets that have a {{htmlattrxref("name","input")}} attribute are sent, even if there is no value. In the case of checkable items, their values are sent only if they are checked. If they are not checked, nothing is sent, not even their name.</p>
<h3 id="Check_box">Check box</h3>
<p>A check box is created by using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value <code>checkbox</code>.</p>
<pre class="brush: html">
&lt;input type="checkbox" checked&gt;
</pre>
<p>The checkbox created by the preceding HTML is checked by default.</p>
<table class="standard-table">
  <caption>
    Compatibility table</caption>
  <tbody>
    <tr>
      <th>Feature Desktop</th>
      <th>Chrome</th>
      <th>Firefox (Gecko)</th>
      <th>Internet Explorer</th>
      <th>Opera</th>
      <th>Safari</th>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="checkbox"</code></td>
      <td>1.0</td>
      <td>{{CompatGeckoDesktop("1.0")}}</td>
      <td>2</td>
      <td>1.0</td>
      <td>1.0</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th>Feature Mobile</th>
      <th>Android</th>
      <th>Firefox Mobile (Gecko)</th>
      <th>IE Mobile</th>
      <th>Opera Mobile</th>
      <th>Safari Mobile</th>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="</code><code>checkbox</code><code>"</code></td>
      <td>1.0</td>
      <td>{{CompatGeckoMobile("1.0")}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
    </tr>
  </tbody>
</table>
<h3 id="Radio_button">Radio button</h3>
<p>A radio button is created by using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value <code>radio</code>.</p>
<pre class="brush: html">
&lt;input type="radio" checked&gt;</pre>
<p>Several radio buttons can be tied together. If they share the same value for their {{htmlattrxref("name","input")}} attribute, they will be considered to be in the same group of buttons. Only one button in a given group may be checked at the same time; this means that when one of them is checked all the others automatically get unchecked. When the form is sent, only the value of the checked radio button is sent. If none of them are checked, the whole pool of radio buttons is considered to be in an unknown state and no value is sent with the form.</p>
<pre class="brush: html">
&lt;fieldset&gt;
  &lt;legend&gt;What gender are you?&lt;/legend&gt;
  &lt;p&gt;&lt;label for="g1"&gt;&lt;input type="radio" name="g" id="g1" value="M"&gt; Male&lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label for="g2"&gt;&lt;input type="radio" name="g" id="g2" value="F"&gt; Female&lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label for="g3"&gt;&lt;input type="radio" name="g" id="g3" value="B"&gt; Both&lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label for="g4"&gt;&lt;input type="radio" name="g" id="g4" value="N"&gt; None&lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label for="g5"&gt;&lt;input type="radio" name="g" id="g5" value="!"&gt; This is not your concern!&lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label for="g6"&gt;&lt;input type="radio" name="g" id="g6" value="?"&gt; Who cares?&lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label for="g7"&gt;&lt;input type="radio" name="g" id="g7" value="\o/"&gt; Obi-Wan Kenobi&lt;/label&gt;&lt;/p&gt;
&lt;/fieldset&gt;</pre>
<table class="standard-table">
  <caption>
    Compatibility table</caption>
  <tbody>
    <tr>
      <th>Feature Desktop</th>
      <th>Chrome</th>
      <th>Firefox (Gecko)</th>
      <th>Internet Explorer</th>
      <th>Opera</th>
      <th>Safari</th>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="radio"</code></td>
      <td>1.0</td>
      <td>{{CompatGeckoDesktop("1.0")}}</td>
      <td>2</td>
      <td>1.0</td>
      <td>1.0</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th>Feature Mobile</th>
      <th>Android</th>
      <th>Firefox Mobile (Gecko)</th>
      <th>IE Mobile</th>
      <th>Opera Mobile</th>
      <th>Safari Mobile</th>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="radio"</code></td>
      <td>1.0</td>
      <td>{{CompatGeckoMobile("1.0")}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
    </tr>
  </tbody>
</table>
<h2 id="Buttons">Buttons</h2>
<p>Within HTML forms, there are three kinds of button:</p>
<dl>
  <dt>
    Submit</dt>
  <dd>
    Sends the form data to the server.</dd>
  <dt>
    Reset</dt>
  <dd>
    Resets all form widgets to their default values.</dd>
  <dt>
    Anonymous</dt>
  <dd>
    Buttons that have no automatic effect but can be customized using JavaScript code.</dd>
</dl>
<p>A button is created using a {{HTMLElement("button")}} element or an {{HTMLElement("input")}} element. It's the value of the {{htmlattrxref("type","input")}} attribute that specifies what kind of button is displayed:</p>
<h3 id="submit">submit</h3>
<pre class="brush: html">
&lt;button type="submit"&gt;
    This a &lt;br&gt;&lt;strong&gt;submit button&lt;/strong&gt;
&lt;/button&gt;

&lt;input type="submit" value="This is a submit button"&gt;</pre>
<h3 id="reset">reset</h3>
<pre class="brush: html">
&lt;button type="reset"&gt;
    This a &lt;br&gt;&lt;strong&gt;reset button&lt;/strong&gt;
&lt;/button&gt;

&lt;input type="reset" value="This is a reset button"&gt;</pre>
<h3 id="anonymous">anonymous</h3>
<pre class="brush: html">
&lt;button type="button"&gt;
    This an &lt;br&gt;&lt;strong&gt;anonymous button&lt;/strong&gt;
&lt;/button&gt;

&lt;input type="button" value="This is an anonymous button"&gt;</pre>
<p>The buttons always behave the same whether you use a {{HTMLElement("button")}} element or an {{HTMLElement("input")}} element. There are, however, some minor differences:</p>
<ul>
  <li>As you can see in the previous examples, {{HTMLElement("button")}} elements let you use HTML content as their label, while {{HTMLElement("input")}} elements only accept plain text content.</li>
  <li>With {{HTMLElement("button")}} elements, it's possible to have a value different than the button's label (this isn't reliable in versions of Internet Explorer prior to IE 8, however).</li>
</ul>
<table class="standard-table">
  <caption>
    Compatibility table</caption>
  <tbody>
    <tr>
      <th>Feature Desktop</th>
      <th>Chrome</th>
      <th>Firefox (Gecko)</th>
      <th>Internet Explorer</th>
      <th>Opera</th>
      <th>Safari</th>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="submit"</code></td>
      <td>1.0</td>
      <td>{{CompatGeckoDesktop("1.0")}}</td>
      <td>2</td>
      <td>1.0</td>
      <td>1.0</td>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="reset"</code></td>
      <td>1.0</td>
      <td>{{CompatGeckoDesktop("1.0")}}</td>
      <td>2</td>
      <td>1.0</td>
      <td>1.0</td>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="button"</code></td>
      <td>1.0</td>
      <td>{{CompatGeckoDesktop("1.0")}}</td>
      <td>3</td>
      <td>1.0</td>
      <td>1.0</td>
    </tr>
    <tr>
      <td>{{HTMLElement("button")}}</td>
      <td>1.0</td>
      <td>{{CompatGeckoDesktop("1.0")}}</td>
      <td>{{CompatVersionUnknown()}}<br />
        (Buggy before IE8)</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th>Feature Mobile</th>
      <th>Android</th>
      <th>Firefox Mobile (Gecko)</th>
      <th>IE Mobile</th>
      <th>Opera Mobile</th>
      <th>Safari Mobile</th>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="number"</code></td>
      <td>1.0</td>
      <td>{{CompatGeckoMobile("1.0")}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="reset"</code></td>
      <td>1.0</td>
      <td>{{CompatGeckoMobile("1.0")}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="button"</code></td>
      <td>1.0</td>
      <td>{{CompatGeckoMobile("1.0")}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
    </tr>
    <tr>
      <td>{{HTMLElement("button")}}</td>
      <td>1.0</td>
      <td>{{CompatGeckoMobile("1.0")}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
    </tr>
  </tbody>
</table>
<h2 id="Advanced_form_widgets">Advanced form widgets</h2>
<p>Those widgets are form controls that let user input some complex or highly structured data. This includes exact or approximate numbers, date and time, or colors.</p>
<h3 id="Numbers">Numbers</h3>
<p>Widgets for numbers are created with the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value <code>number</code>. This control looks like a text field but allows only floating-point numbers, and usually provides some buttons to increase or decrease the value of the widget.</p>
<p>It's also possible to constrain the value by setting the {{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} attributes. You can also specify the amount by which the increase and decrease buttons change the widget's value by setting the {{htmlattrxref("step","input")}} attribute.</p>
<h4 id="Example">Example</h4>
<pre class="brush: html">
&lt;input type="number" min="1" max="10" step="2"&gt;</pre>
<p>This creates a number widget whose value is restricted to be between 1 and 10 whose increase and decrease buttons change its value by 2.</p>
<table class="standard-table">
  <caption>
    Compatibility table</caption>
  <tbody>
    <tr>
      <th>Feature Desktop</th>
      <th>Chrome</th>
      <th>Firefox (Gecko)</th>
      <th>Internet Explorer</th>
      <th>Opera</th>
      <th>Safari</th>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="number"</code></td>
      <td>11.0</td>
      <td>{{CompatNo()}} {{bug('344616')}}</td>
      <td>10<br />
        (<em>recognized but no UI</em>)</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>5.2</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th>Feature Mobile</th>
      <th>Android</th>
      <th>Firefox Mobile (Gecko)</th>
      <th>IE Mobile</th>
      <th>Opera Mobile</th>
      <th>Safari Mobile</th>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="number"</code></td>
      <td>2.3</td>
      <td>{{CompatNo()}}</td>
      <td>{{CompatNo()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>4.0</td>
    </tr>
  </tbody>
</table>
<h3 id="Sliders">Sliders</h3>
<p>Another way to pick a number is to use a slider. Because, visually speaking, these are less accurate than text fields, sliders are used to pick a number whose exact value is not necessarily important.</p>
<p>A slider is created by using the {{HTMLElement("input")}} with its {{htmlattrxref("type","input")}} attribute set to the value <code>range</code>. It's important to properly configure it your slider; to that end, it's highly recommended that you set the {{htmlattrxref("min","input")}}, {{htmlattrxref("max","input")}}, and {{htmlattrxref("step","input")}} attributes.</p>
<h4 id="Example">Example</h4>
<pre class="brush: html">
&lt;input type="range" min="1" max="5" step="1"&gt;</pre>
<p>This example creates a slider whose value may range between 1 and 5, and whose increment/decrement buttons change the value by +1 and -1.</p>
<table class="standard-table">
  <caption>
    Compatibility table</caption>
  <tbody>
    <tr>
      <th>Feature Desktop</th>
      <th>Chrome</th>
      <th>Firefox (Gecko)</th>
      <th>Internet Explorer</th>
      <th>Opera</th>
      <th>Safari</th>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="range"</code></td>
      <td>5.0</td>
      <td>{{CompatNo()}} {{bug('344618')}}</td>
      <td>10</td>
      <td>10.62</td>
      <td>4.0</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th>Feature Mobile</th>
      <th>Android</th>
      <th>Firefox Mobile (Gecko)</th>
      <th>IE Mobile</th>
      <th>Opera Mobile</th>
      <th>Safari Mobile</th>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="range"</code></td>
      <td>{{CompatNo()}}</td>
      <td>{{CompatNo()}}</td>
      <td>{{CompatNo()}}</td>
      <td>10.62</td>
      <td>5.0</td>
    </tr>
  </tbody>
</table>
<h3 id="Date_and_time_picker">Date and time picker</h3>
<p>Gathering date and time values has traditionally been a nightmare for web developers. HTML5 brings some enhancements here by providing a special control to handle this specific kind of data.</p>
<p>A date and time control is created using the {{HTMLElement("input")}} element and the proper value for the {{htmlattrxref("type","input")}} attribute. Because you may wish to collect a date, a time, or both, there are several different available values for the <code>type</code> attribute:</p>
<h4 id="date"><code>date</code></h4>
<p>This creates a widget to display and pick a date but without any time.</p>
<pre class="brush: html">
&lt;input type="date"&gt;</pre>
<h4 id="datetime"><code>datetime</code></h4>
<p>This creates a widget to display and pick a date with time in the UTC time zone.</p>
<pre class="brush: html">
&lt;input type="datetime"&gt;</pre>
<h4 id="datetime-local"><code>datetime-local</code></h4>
<p>This creates a widget to display and pick a date with time in any specific time zone.</p>
<pre class="brush: html">
&lt;input type="datetime-local"&gt;</pre>
<h4 id="month"><code>month</code></h4>
<p>This creates a widget to display and pick a month with a year.</p>
<pre class="brush: html">
&lt;input type="month"&gt;</pre>
<h4 id="time"><code>time</code></h4>
<p>This creates a widget to display and pick a time value.</p>
<pre class="brush: html">
&lt;input type="time"&gt;</pre>
<h4 id="week"><code>week</code></h4>
<p>This creates a widget to display and pick a week number and its year.</p>
<pre class="brush: html">
&lt;input type="time"&gt;</pre>
<p>All date and time control can be constrained using the {{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} attributes.</p>
<pre class="brush: html">
&lt;label for="myDate"&gt;When are you available this summer?&lt;/label&gt;
&lt;input type="date" min="2013-06-01" max="2013-08-31" id="myDate"&gt;</pre>
<table class="standard-table">
  <caption>
    Compatibility table</caption>
  <tbody>
    <tr>
      <th>Feature Desktop</th>
      <th>Chrome</th>
      <th>Firefox (Gecko)</th>
      <th>Internet Explorer</th>
      <th>Opera</th>
      <th>Safari</th>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="date"</code></td>
      <td>20.0</td>
      <td>{{CompatNo()}} {{bug('446510')}}</td>
      <td>{{CompatNo()}}</td>
      <td>10.62</td>
      <td>{{CompatVersionUnknown()}}</td>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="datetime"</code></td>
      <td>{{CompatNo()}}</td>
      <td>{{CompatNo()}} {{bug('446510')}}</td>
      <td>{{CompatNo()}}</td>
      <td>10.62</td>
      <td>{{CompatVersionUnknown()}}</td>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="datetime-local"</code></td>
      <td>{{CompatNo()}}</td>
      <td>{{CompatNo()}} {{bug('446510')}}</td>
      <td>{{CompatNo()}}</td>
      <td>10.62</td>
      <td>{{CompatVersionUnknown()}}</td>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="month"</code></td>
      <td>{{CompatNo()}}</td>
      <td>{{CompatNo()}} {{bug('446510')}}</td>
      <td>{{CompatNo()}}</td>
      <td>10.62</td>
      <td>{{CompatVersionUnknown()}}</td>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="time"</code></td>
      <td>{{CompatNo()}}</td>
      <td>{{CompatNo()}} {{bug('446510')}}</td>
      <td>{{CompatNo()}}</td>
      <td>10.62</td>
      <td>{{CompatVersionUnknown()}}</td>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="week"</code></td>
      <td>{{CompatNo()}}</td>
      <td>{{CompatNo()}} {{bug('446510')}}</td>
      <td>{{CompatNo()}}</td>
      <td>10.62</td>
      <td>{{CompatVersionUnknown()}}</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th>Feature Mobile</th>
      <th>Android</th>
      <th>Firefox Mobile (Gecko)</th>
      <th>IE Mobile</th>
      <th>Opera Mobile</th>
      <th>Safari Mobile</th>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="date"</code></td>
      <td>{{CompatNo()}}</td>
      <td>{{CompatNo()}}</td>
      <td>{{CompatNo()}}</td>
      <td>10.62</td>
      <td>5.0</td>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="datetime"</code></td>
      <td>{{CompatNo()}}</td>
      <td>{{CompatNo()}}</td>
      <td>{{CompatNo()}}</td>
      <td>10.62</td>
      <td>{{CompatVersionUnknown()}}</td>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="datetime-local"</code></td>
      <td>{{CompatNo()}}</td>
      <td>{{CompatNo()}}</td>
      <td>{{CompatNo()}}</td>
      <td>10.62</td>
      <td>{{CompatVersionUnknown()}}</td>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="month"</code></td>
      <td>{{CompatNo()}}</td>
      <td>{{CompatNo()}}</td>
      <td>{{CompatNo()}}</td>
      <td>10.62</td>
      <td>{{CompatVersionUnknown()}}</td>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="time"</code></td>
      <td>{{CompatNo()}}</td>
      <td>{{CompatNo()}}</td>
      <td>{{CompatNo()}}</td>
      <td>10.62</td>
      <td>{{CompatVersionUnknown()}}</td>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="week"</code></td>
      <td>{{CompatNo()}}</td>
      <td>{{CompatNo()}}</td>
      <td>{{CompatNo()}}</td>
      <td>10.62</td>
      <td>{{CompatVersionUnknown()}}</td>
    </tr>
  </tbody>
</table>
<div class="warning">
  <strong>Warning:</strong> The date and time widgets are very new, and even browsers that claim to support them often have significant user interface problems that make them difficult to use. Test your content thoroughly with different browsers before you deploy it!</div>
<h3 id="Color_picker">Color picker</h3>
<p>Colors are always a bit difficult to handle. There are many ways to express them: RGB values (decimal or hexadecimal), HSL values, keywords, etc. The color widget lets users pick a color in both textual and visual ways.</p>
<p>A color widget is created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value <code>color</code>.</p>
<pre class="brush: html">
&lt;input type="color"&gt;</pre>
<table class="standard-table">
  <caption>
    Compatibility table</caption>
  <tbody>
    <tr>
      <th>Feature Desktop</th>
      <th>Chrome</th>
      <th>Firefox (Gecko)</th>
      <th>Internet Explorer</th>
      <th>Opera</th>
      <th>Safari</th>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="color"</code></td>
      <td>21.0</td>
      <td>{{CompatNo()}} {{bug('547004')}}</td>
      <td>{{CompatNo()}}</td>
      <td>11.01</td>
      <td>{{CompatNo()}}</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th>Feature Mobile</th>
      <th>Android</th>
      <th>Firefox Mobile (Gecko)</th>
      <th>IE Mobile</th>
      <th>Opera Mobile</th>
      <th>Safari Mobile</th>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="color"</code></td>
      <td>{{CompatNo()}}</td>
      <td>{{CompatNo()}}</td>
      <td>{{CompatNo()}}</td>
      <td>{{CompatUnknown()}}</td>
      <td>{{CompatNo()}}</td>
    </tr>
  </tbody>
</table>
<h2 id="Other_widgets">Other widgets</h2>
<p>There are a few other widgets that cannot be easily classified due to their very specific behaviors, but which are still very useful.</p>
<h3 id="File_picker">File picker</h3>
<p>HTML forms are able to send files to a server; this specific action is detailed in the article: <a href="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data">Sending and retrieving form data</a>. The file picker widget is how the user can choose one or more files to send.</p>
<p>To create a file picker widget, you use the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to <code>file</code>. The types of files that are accepted can be constrained using the {{htmlattrxref("accept","input")}} attribute. In addition, if you want to let the user pick more than one file, you can do so by adding the {{htmlattrxref("multiple","input")}} attribute.</p>
<h4 id="Example">Example</h4>
<p>In this example, a file picker is created requesting graphic image files. The user is allowed to select multiple files.</p>
<pre class="brush: html">
&lt;input type="file" accept="image/*" multiple&gt;</pre>
<table class="standard-table">
  <caption>
    Compatibility table</caption>
  <tbody>
    <tr>
      <th>Feature Desktop</th>
      <th>Chrome</th>
      <th>Firefox (Gecko)</th>
      <th>Internet Explorer</th>
      <th>Opera</th>
      <th>Safari</th>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="file"</code></td>
      <td>1.0</td>
      <td>{{CompatGeckoDesktop("1.0")}}</td>
      <td>3.02</td>
      <td>1.0</td>
      <td>1.0</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th>Feature Mobile</th>
      <th>Android</th>
      <th>Firefox Mobile (Gecko)</th>
      <th>IE Mobile</th>
      <th>Opera Mobile</th>
      <th>Safari Mobile</th>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="file"</code></td>
      <td>{{CompatUnknown()}}</td>
      <td>{{CompatUnknown()}}</td>
      <td>{{CompatUnknown()}}</td>
      <td>{{CompatUnknown()}}</td>
      <td>{{CompatUnknown()}}</td>
    </tr>
  </tbody>
</table>
<h3 id="Hidden_content">Hidden content</h3>
<p>It's sometimes convenient for technical reasons to have pieces of data that are sent with a form but not displayed to the user. To do this, you can add an invisible element in your form. To do this, use an {{HTMLElement("input")}} with its {{htmlattrxref("type","input")}} attribute set to the value <code>hidden</code>.</p>
<p>If you create such an element, it's required to set its <code>name</code> and <code>value</code> attributes:</p>
<pre class="brush: html">
&lt;input type="hidden" name="timestamp" value="1286705410"&gt;</pre>
<table class="standard-table">
  <caption>
    Compatibility table</caption>
  <tbody>
    <tr>
      <th>Feature Desktop</th>
      <th>Chrome</th>
      <th>Firefox (Gecko)</th>
      <th>Internet Explorer</th>
      <th>Opera</th>
      <th>Safari</th>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="hidden"</code></td>
      <td>1.0</td>
      <td>{{CompatGeckoDesktop("1.0")}}</td>
      <td>2</td>
      <td>1.0</td>
      <td>1.0</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th>Feature Mobile</th>
      <th>Android</th>
      <th>Firefox Mobile (Gecko)</th>
      <th>IE Mobile</th>
      <th>Opera Mobile</th>
      <th>Safari Mobile</th>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="hidden"</code></td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
    </tr>
  </tbody>
</table>
<h3 id="Image_button">Image button</h3>
<p>The <strong>image button</strong> control is one which is displayed exactly like an {{HTMLElement("img")}} element, except that when the user clicks on it, it behaves like a submit button (see above).</p>
<p>An image button is created using an {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value <code>image</code>. This element supports exactly the same set of attributes as the {{HTMLElement("img")}} element, plus all the attributes supported by any form buttons.</p>
<pre class="brush: html">
&lt;input type="image" alt="Click me!" src="my-img.png" width="80" height="30" /&gt;</pre>
<p>If the image button is used to submit the form, this widget doesn't submit its value but instead the X and Y coordinates of the click on the image (the coordinates are relative to the image, meaning that the upper-left corner of the image represents the coordinate 0, 0). The coordinates are sent as two key/value pairs. The X value key is the value of the {{htmlattrxref("name","input")}} attribute followed by the string "<em>.x</em>" and the Y value key is the value of the {{htmlattrxref("name","input")}} attribute followed by the string "<em>.y</em>". This is a very convenient way to build a "hot map".</p>
<p>Let's see an example:</p>
<pre class="brush: html">
&lt;form action="http://foo.com" method="get"&gt;
  &lt;input type="image" value="pos" alt="" src="map.png" /&gt;
&lt;/form&gt;
</pre>
<p>When you click on the image of this form, you are sent to the following URL:</p>
<pre>
http://foo.com?pos.x=123&amp;pos.y=456</pre>
<p>The value of the <code>pos.x</code> and <code>pos.y</code> parameters depends on where you click on the image. How those value are sent and retrieve is detailed on the <a href="https://developer.mozilla.org/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data"><span>Sending and retrieving form data</span></a> article.</p>
<table class="standard-table">
  <caption>
    Compatibility table</caption>
  <tbody>
    <tr>
      <th>Feature Desktop</th>
      <th>Chrome</th>
      <th>Firefox (Gecko)</th>
      <th>Internet Explorer</th>
      <th>Opera</th>
      <th>Safari</th>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="image"</code></td>
      <td>1.0</td>
      <td>1.0</td>
      <td>2</td>
      <td>1.0</td>
      <td>1.0</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th>Feature Mobile</th>
      <th>Android</th>
      <th>Firefox Mobile (Gecko)</th>
      <th>IE Mobile</th>
      <th>Opera Mobile</th>
      <th>Safari Mobile</th>
    </tr>
    <tr>
      <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="image"</code></td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
      <td>{{CompatVersionUnknown()}}</td>
    </tr>
  </tbody>
</table>
<h3 id="Meters_and_progress_bars">Meters and progress bars</h3>
<p>Meters and progress bars are visual representations of numeric values.</p>
<p>A progress bar represents a value that changes over time up to a maximum value specified by the {{htmlattrxref("max","progress")}} attribute. Such a bar is created using a {{ HTMLElement("progress")}} element. The content inside the {{HTMLElement("progress")}} element is a fallback for browsers that don't support the element and for assistive technologies to vocalize it.</p>
<pre class="brush: html">
&lt;progress max="100" value="75"&gt;75/100&lt;/progress&gt;</pre>
<p>A meter bar represents a fixed value in a range delimited by a {{htmlattrxref("min","meter")}} and a {{htmlattrxref("max","meter")}} value. This value is visualy renderd as a bar, and to know how this bar looks, we compare the value to some others values:</p>
<ul>
  <li>the {{htmlattrxref("low","meter")}} and {{htmlattrxref("high","meter")}} values divide the range in three parts:
    <ul>
      <li>The lower part of the range is between the {{htmlattrxref("min","meter")}} and {{htmlattrxref("low","meter")}} values (including those values)</li>
      <li>The medium part of the range is between the {{htmlattrxref("low","meter")}} and {{htmlattrxref("high","meter")}} values (excluding those values)</li>
      <li>The higher part of the range is between the {{htmlattrxref("high","meter")}} and {{htmlattrxref("max","meter")}} values (including those values)</li>
    </ul>
  </li>
  <li>The {{htmlattrxref("optimum","meter")}} value define the optimum value for the {{HTMLElement("meter")}} element. In conjuction with the {{htmlattrxref("low","meter")}} and {{htmlattrxref("high","meter")}} value, it defines which part of the range is prefered:
    <ul>
      <li>If the {{htmlattrxref("optimum","meter")}} value is in the lower part of the range, the lower range is considered to be the prefered part, the medium range is considered to be the average part and the higher range is considered to be the worst part.</li>
      <li>If the {{htmlattrxref("optimum","meter")}} value is in the medium part of the range, the lower range is considered to be the average part, the medium range is considered to be the prefered part and the higher range is considered to be the average part as well.</li>
      <li>If the {{htmlattrxref("optimum","meter")}} value is in the higher part of the range, the lower range is considered to be the worst part, the medium range is considered to be the average part and the higher range is considered to be the prefered part.</li>
    </ul>
  </li>
</ul>
<p>All browsers that implement the {{HTMLElement("meter")}} element use those values to change the color of the meter bar:</p>
<ul>
  <li>If the current value is in the prefered part of the range, the bar is green.</li>
  <li>If the current value is in the average part of the range, the bar is yellow.</li>
  <li>If the current value is in the worst part of the range, the bar is red.</li>
</ul>
<p>Such a bar is created using a {{HTMLElement("meter")}} element. The content inside the {{HTMLElement("meter")}} element is a fallback for browsers that don't support the element and for assistive technologies to vocalize it.</p>
<pre class="brush: html">
&lt;meter min="0" max="100" value="75" low="33" high="66" optimum="50"&gt;75&lt;/meter&gt;</pre>
<table class="standard-table">
  <caption>
    Compatibility table</caption>
  <tbody>
    <tr>
      <th>Feature Desktop</th>
      <th>Chrome</th>
      <th>Firefox (Gecko)</th>
      <th>Internet Explorer</th>
      <th>Opera</th>
      <th>Safari</th>
    </tr>
    <tr>
      <td>{{HTMLElement("progress")}}</td>
      <td>6.0</td>
      <td>{{CompatGeckoDesktop("6.0")}}</td>
      <td>10</td>
      <td>10.6</td>
      <td>5.2</td>
    </tr>
    <tr>
      <td>{{HTMLElement("meter")}}</td>
      <td>6.0</td>
      <td>{{CompatGeckoDesktop("16.0")}}</td>
      <td>{{CompatNo()}}</td>
      <td>11.0</td>
      <td>5.2</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th>Feature Mobile</th>
      <th>Android</th>
      <th>Firefox Mobile (Gecko)</th>
      <th>IE Mobile</th>
      <th>Opera Mobile</th>
      <th>Safari Mobile</th>
    </tr>
    <tr>
      <td>{{HTMLElement("progress")}}</td>
      <td>{{CompatNo()}}</td>
      <td>{{CompatGeckoMobile("6.0")}}</td>
      <td>{{CompatNo()}}</td>
      <td>11.0</td>
      <td>{{CompatUnknown()}}</td>
    </tr>
    <tr>
      <td>{{HTMLElement("meter")}}</td>
      <td>{{CompatNo()}}</td>
      <td>{{CompatGeckoMobile("16.0")}}</td>
      <td>{{CompatNo()}}</td>
      <td>11.0</td>
      <td>{{CompatUnknown()}}</td>
    </tr>
  </tbody>
</table>
<h2 id="See_also">See also</h2>
<p>To dig into the different form widgets, there are some useful external resources you should check out:</p>
<ul>
  <li><a href="http://wufoo.com/html5/" rel="external" title="http://wufoo.com/html5/">The Current State of HTML5 Forms</a> by Wufoo</li>
  <li><a href="http://www.quirksmode.org/html5/inputs.html" rel="external" title="http://www.quirksmode.org/html5/inputs.html">HTML5 Tests - inputs</a> on Quirksmode (also <a href="http://www.quirksmode.org/html5/inputs_mobile.html" rel="external" title="http://www.quirksmode.org/html5/inputs_mobile.html">available for mobile</a> browsers)</li>
</ul>
Revert to this revision