The native form widgets

Estás leyendo la versión en inglés del artículo porque aún no existe una traducción para este idioma. ¡Ayúdanos a traducir este artículo!

We now look at the functionality of the different form widgets in detail, looking at what options are available to collect different types of data. This guide is somewhat exhaustive, covering all of the available native form widgets.

Prerequisites: Basic computer literacy, and a basic understanding of HTML.
Objective: Entender que tipos de widgets nativos están disponibles en los navegadores para capturar datos y como implementarlos usando HTML.

Here we will focus on the form widgets built in to browsers. Because HTML form control appearance may be quite different from a designer's specifications, web developers sometimes build their own form widgets — see How to build custom form widgets later in the module for more ideas about this.

Note: Most of the features discussed in this article have wide support across browsers; we'll note exceptions to this. If you want more exact details, you should consult our HTML forms element reference, and in particular our extensive <input> types reference.

Atributos Comunes

Many of the elements used to define form widgets have some of their own attributes. However, there is a set of attributes common to all form elements that give you some control over those widgets. Here is a list of those common attributes:

Attribute name Default value Description
autofocus (false) This Boolean attribute lets you specify that the element should automatically have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form-associated element in a document can have this attribute specified.
disabled (false) This Boolean attribute indicates that the user cannot interact with the element. If this attribute is not specified, the element inherits its setting from the containing element, for example, <fieldset>; if there is no containing element with the disabled attribute set, then the element is enabled.
form The form element that the widget is associated with if not nested within that form. Omittable otherwise. The value of the attribute must be the id attribute of a <form> element in the same document. This lets you set a form widget outside of a <form> element or even inside a form with which it is not associated.
name The name of the element; this is submitted with the form data.
value The element's initial value.

Cajas de entrada de texto

Text <input> fields, are the most basic form widgets. They are a very convenient way to let the user enter any kind of data. Text fields can also be specialized with HTML attributes to achieve particular needs. We've already seen a few simple examples

Note: 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 you'll encounter out there are custom widgets created with HTML, CSS, and JavaScript.

All text fields share some common behaviors:

  • They can be marked as readonly (the user cannot modify the input value but it is sent with the rest of the form data) or even disabled (the input value can't be modified and is never sent with the rest of the form data).
  • They can have a placeholder; this is text that appears inside the text input box that should be used to briefly describe the purpose of the box.
  • They can be constrained in size (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.

Note: The <input> element is special because it can be almost anything. By simply setting its type attribute, it can change radically, and it is used for creating most types of form widget including single line text fields, time and date controls, controls without text input like checkboxes, radio buttons and color pickers, and buttons.

Cajas de texto de una sola linea

A single line text field is created using an <input> element whose type attribute value is set to text, or ommitting the  type attribute, as text is the default value. The value text for this attribute is also the fallback value if the value you specify for the type attribute is unknown by the browser (for example if you specify type="color" and the browser doesn't support native color pickers).

Note: You can find examples of all the single line text field types on GitHub at single-line-text-fields.html (see it live also).

Here is a basic single line text field example:

<input type="text" id="comment" name="comment" value="I'm a text field">

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.

HTML5 enhanced the basic original single line text field by adding special values for the type attribute. These values enable the addition of extra features and constraints to a field.

E-mail address field

This type of field is set with the value email for the type attribute:

<input type="email" id="email" name="email" multiple>

When this type is used, the user is required to type a valid e-mail address into the field; any other content causes the browser to display an error when the form is submitted. Note that this is client-side error validation, performed by the browser:

An invalid email input showing the message Please enter an email address.

Note that a@b is a valid email address according to the default constraints, as the email input type by default allows for intranet email address values. The pattern attribute, described later, can be used to require a TLD, providing client side constraints without the use of JavaScript.

The email input type allow for several e-mail addresses in the same input (separated by commas) by including the multiple attribute.

On some devices, notably touch devices with dynamic keyboards like smart phones, a different virtual keypad might be presented that is more suitable for entering email addresses.

Note: You can find out more about form validation in the article Form data validation.

Caja de contraseña

This type of field is set using the value password for the type attribute:

<input type="password" id="pwd" name="pwd">

It doesn't add any special constraints to the entered text, but it does obscure the value entered into the field (e.g. with dots or asterisks) so it can't be read by others.

Keep in mind this is just a user interface feature; unless you submit your form securely, it will get sent in plain text, which is bad for security — a malicious party could intercept your data and steal passwords, credit card details, or whatever else you've submitted. The best way to protect users from this is to host any pages involving forms over a secure connection (i.e. at an https:// ... address), so the data is encrypted before it is sent.

Browsers recognize the security implications of sending form data over an insecure connection, and have warnings to deter users from using insecure forms. For more information on what Firefox implements, see Insecure passwords.

Search field

This type of field is set by using the value search for the type attribute:

<input type="search" id="search" name="search">

The main difference between a text field and a search field is how the browser styles it — often, search fields are rendered with rounded corners, and/or given an "x" to press to clear the entered value. However, there is another added feature worth noting: their values can be automatically saved to be auto completed across multiple pages on the same site.

Screenshots of search fields on several platforms.

On devices with dynamic keyboards, the keyboard's enter key may read 'search' or display the magnifying glass icon.

Phone number field

This type of field is set using tel as the value of the type attribute:

<input type="tel" id="tel" name="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 can include letters, etc.). The pattern attribute, described later, can be used to enforce constraints. This is primarily a semantic difference, although on devices with dynamic keyboards, a digital keypad might be presented that is more suitable for entering numbers.

URL field

This type of field is set using the value url for the type attribute:

<input type="url" id="url" name="url">

It adds special validation constraints to the field, with the browser reporting an error if no protocol, such as http:, is entered or if the URL is otherwise malformed.

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

Note: 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.

There are several other values of the type attribute that provide user interface widgets that aren't single line text fields and don't allow for free-form data entry. They will be covered in a bit.

Multi-line text fields

A multi-line text field is specified using a <textarea> element, rather than using the <input> element.

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

The main difference between a textarea and a regular single line text field is that users are allowed to include hard line breaks (i.e. pressing return) that will be included what the data is submitted. Visually, the text entered wraps and the form control is by default resizable.

Screenshots of multi-lines text fields on several platforms.

Note: You can find an example of a multi-line text field on GitHub at multi-line-text-field.html (see it live also). Have a look at it, and notice how in most browsers, the text area is given a drag handle on the bottom right to allow the user to resize it.

The ability to wrap is controlled with the wrap attribute. This resizing ability can be turned off by setting the text area's resize property to none using CSS.

<textarea> accepts three attributes to control its rendering across several lines (in addition to several others attributes):

Attributes for the <textarea> element
Attribute name Default value Description
cols 20 The visible width of the text control, in average character widths.
rows The number of visible text lines for the control.
wrap soft Indicates how the control wraps text. Possible values are: hard or soft

Note that the <textarea> element is written a bit differently from the <input> element. The <input> element is an empty element, which means that it cannot contain any child elements. The <textarea> element is a regular element, with opening and closing tags, that can contain text content children.

There are two key related points to note here:

  • If you want to define a default value for an <input> element, you have to use the value attribute; for a <textarea> element on the other hand you put the default text between the starting tag and the closing tag of the <textarea>.
  • Because of its nature, the <textarea> element only accepts text content; this means that any HTML content put inside a <textarea> is rendered as if it was plain text content.

Drop-down widgets are a simple way to let users select one of many options without taking up much space in the user interface. HTML has two forms of drop down content: the select box, and autocomplete box. In both cases the interaction is the same — once the control is activated, the browser displays a list of values the user can select between.

Note: You can find examples of all the drop-down box types on GitHub at drop-down-content.html (see it live also).

Select box

A select box is created with a <select> element with one or more <option> elements as its children, each of which specifies one of its possible values.

<select id="simple" name="simple">

If required, the default value for the select box can be set using the selected attribute on the desired <option> element — this option is then preselected when the page loads. The <option> elements can also be nested inside <optgroup> elements to create visually associated groups of values:

<select id="groups" name="groups">
  <optgroup label="fruits">
    <option selected>Cherry</option>
  <optgroup label="vegetables">

Screenshots of single line select box on several platforms.

On the <optgroup> element, the value of the label attribute is displayed before the values of the nested options, but even if it looks somewhat like an option, it is not selectable.

If an <option> element is set with a value attribute, that attribute's value is sent when the form is submitted. If the value attribute is omitted, the content of the <option> element is used as the select box's value.

Caja de selección multiple

By default, a select box only lets the user select a single value. By adding the multiple attribute to the <select> element, you can allow users to select several values, by using the default mechanism provided by the operating system (e.g. holding down Cmd/Ctrl and clicking multiple values).

Note: In the case of multiple choice select boxes, the select box no longer displays the values as drop-down content — instead, they are all displayed at once in a list.

<select multiple id="multi" name="multi">

Screenshots of multi-lines select box on several platforms.

Note: All browsers that support the <select> element also support the multiple attribute on it.

Caja de autocompletado

You can provide suggested, automatically-completed values for form widgets using the <datalist> element with some child <option> elements to specify the values to display.

The data list is then bound to a text field (usually an <input> element) using the list 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 presented to the user as a drop-down box listing possible matches for what they've typed into the input.

<label for="myFruit">What's your favorite fruit?</label>
<input type="text" name="myFruit" id="myFruit" list="mySuggestion">
<datalist id="mySuggestion">
Note: According to the HTML specification, the list attribute and the <datalist> element can be used with any kind of widget requiring a user input. Some browsers support datalist defined color palettes for the color input type, tick along the slider for range input types, etc. Different browsers behave differently from case to case, so be cautious using this feature with anything but text fields.
Screenshots of datalist on several platforms.

Datalist support and fallbacks

If you are still supporting older browsers, such as IE versions below 10,  <datalist> element may not always be supported. To handle lack of support, here is a little trick to provide a nice fallback for those browsers:

<label for="myFruit">What is your favorite fruit? (With fallback)</label>
<input type="text" id="myFruit" name="fruit" list="fruitList">
<datalist id="fruitList">
  <label for="suggestion">or pick a fruit</label>
  <select id="suggestion" name="altFruit">

Browsers that support the <datalist> element will ignore all the elements that are not <option> elements and will work as expected. On the other hand, browsers that do not support the <datalist> element will display the label and the select box. Of course, there are other ways to handle the lack of support for the <datalist> element, but this is the simplest (others tend to require JavaScript).

Safari 6 Screenshot of the datalist element fallback with Safari on Mac OS
Firefox 18 Screenshot of the datalist element with Firefox on Mac OS

Checkable items

Checkable items are widgets whose state you can change by clicking on them or their associated labels. There are two kinds of checkable item: the check box and the radio button. Both use the checked attribute to indicate whether the widget is checked by default or not.

It's worth noting that these widgets do not behave exactly like other form widgets. For most form widgets, once the form is submitted all widgets that have a name attribute are sent, even if no value has been filled out. 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.

Note: You can find the examples from this section on GitHub as checkable-items.html (see it live also).

For maximum usability/accessibility, you are advised to surround each list of related items in a <fieldset>, with a <legend> providing an overall description of the list.  Each individual pair of <label>/<input> elements should be contained in its own list item (or similar). This is shown in the examples. 

You must provide values for these kinds of inputs inside the value attribute if you want them to be meaningful — if no value is provided, check boxes and radio buttons are given a value of on.

Check box

A check box is created using the <input> element with its type attribute set to the value checkbox.

<input type="checkbox" checked id="carrots" name="carrots" value="carrots">

Including the checked attribute makes the checkbox checked automatically when the page loads.

Screenshots of check boxes on several platforms.

Note: Any checkboxes and radio buttons with the checked attribute on load match the :default pseudo class. Any currently checked match the :checked pseudoclass.

Radio button

A radio button is created using the <input> element with its type attribute set to the value radio.

<input type="radio" checked id="soup" name="meal">

Several radio buttons can be tied together. If they share the same value for their name attribute, they will be considered to be in the same group of buttons. Only one button in a given group may be checked at a 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.

  <legend>What is your favorite meal?</legend>
      <label for="soup">Soup</label>
      <input type="radio" checked id="soup" name="meal" value="soup">
      <label for="curry">Curry</label>
      <input type="radio" id="curry" name="meal" value="curry">
      <label for="pizza">Pizza</label>
      <input type="radio" id="pizza" name="meal" value="pizza">

Screenshots of radio buttons on several platforms.


Within HTML forms, there are three kinds of button:

Sends the form data to the server. For <button> elements, omitting the type attribute (or an invalid value of type) results in a submit button.
Resets all form widgets to their default values.
Buttons that have no automatic effect but can be customized using JavaScript code.

Note: You can find the examples from this section on GitHub as button-examples.html (see it live also).

Buttons can be created using either a <button> element or an <input> element. For input buttons, it's the value of the type attribute that specifies what kind of button is displayed:


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

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


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

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


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

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

Buttons always behave the same whether you use a <button> element or an <input> element. There are, however, some notable differences:

  • As you can see from the examples, <button> elements let you use HTML in their content, which are inserted between the opening and closing <button> tags. <input> elements on the other hand are empty elements; their displayed content is inserted inside the value attribute, and therefore only accepts plain text as content.

Screenshots of buttons on several platforms.

Technically speaking, there is almost no difference between a button defined with the <button> element or the <input> element. The only noticeable difference is the content of the button itself and styleability. Within an <input> element, the label can only be character data, whereas in a <button> element, the label can be HTML, so it can be styled accordingly.

Widgets avanzados

In this section we cover those widgets that let users input complex or unusual data. This includes exact or approximate numbers, dates and times, or colors.

Note: You can find the examples from this section on GitHub as advanced-examples.html (see it live also).


Widgets for numbers are created with the <input> element, with its type attribute set to the value number. This control looks like a text field but allows only floating-point numbers, and usually provides buttons in the form of a spinner to increase and decrease the value of the widget.

It's also possible to:

  • Constrain the value by setting the min and max attributes.
  • Specify the amount by which the increase and decrease buttons change the widget's value by setting the step attribute.

Ejemplo 1

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

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

Ejemplo 2

<input type="number" name="change" id="pennies" min="0" max="1" step="0.01">

This creates a number widget whose value is restricted to any value between 0 and 1 inclusive, and whose increase and decrease buttons change its value by 0.01.

If omitted, the step value defaults to 1, meaning only whole numbers are valid.

On devices with dynamic keypads, the numeric keypad, similar to or the same as the tel type keyboard, will be displayed. The number input type makes sense when the range of valid values is limited. If the range is to large for incremental increases to make sense, such as USA zip codes which range in value from 00001 to 99999, the tel type might be a better option: providing the numeric keypad while forgoing the number's spinner UI feature.

number inputs are not supported in versions of Internet Explorer below 10.


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

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


<input type="range" name="beans" id="beans" min="0" max="500" step="10">

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

One problem with sliders is that they don't offer any kind of visual feedback as to what the current value is. You need to add this yourself with JavaScript, but this is relatively easy to do. In this example we add an empty <span> element, in which we will write the current value of the slider, updating it as it is changed.

<label for="beans">How many beans can you eat?</label>
<input type="range" name="beans" id="beans" min="0" max="500" step="10">
<output class="beancount"></output>

This can be implemented using some simple JavaScript:

var beans = document.querySelector('#beans');
var count = document.querySelector('.beancount');

count.textContent = beans.value;

beans.oninput = function() {
  count.textContent = beans.value;

Here we store references to the range input and the span in two variables, then we immediately set the output's textContent to the current value of the input. Finally, we set up an oninput event handler so that every time the range slider is moved, the span textContent is updated to the new input value.

In browsers that support <datalist> on range input types, a small tic mark will be displayed above the range for each datalist <option> value.

range inputs are not supported in versions of Internet Explorer below 10.

Selector de fecha y hora

Gathering date and time values has traditionally been a nightmare for web developers. HTML5 forms provide special controls to handle this specific kind of data.

A date and time control is created using the <input> element and an appropriate value for the type attribute, depending on whether you wish to collect dates, times, or both.


This creates a widget to display and pick a date with time with no specific time zone information.

<input type="datetime-local" name="datetime" id="datetime">


This creates a widget to display the date. While the date picker may display the current value as mm/dd/yyyy, the value returned will be in the format  yyyy-mm-dd

<input type="date" name="date" id="date">


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

<input type="month" name="month" id="month">


This creates a widget to display and pick a time value. While time may display in 12 hour format, the value returned is in 24-hour format.

<input type="time" name="time" id="time">


This creates a widget to display and pick a week number and its year. Weeks are Monday to Sunday, and week 1 of each year contains the first Thursday of the year, which may not include the first of the year or may include the last few days of the previous year.

<input type="week" name="week" id="week">

All date and time control can be constrained using the min and max attributes.

<label for="myDate">When are you available this summer?</label>
<input type="date" name="myDate" min="2013-06-01" max="2013-08-31" id="myDate">

Warning — The date and time widgets don't have the deepest support. At the moment, Chrome, Edge, and Opera support them well, but there is no support in Internet Explorer, Safari has some mobile support but not on desktop, and Firefox supports time and date only.

Selector de color

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, when supported, returns a lowercase 6-value hexidecimal color.

A color widget is created using the <input> element with its type attribute set to the value color.

<input type="color" name="color" id="color">

Browsers that support datalists with colors will display a customized palette of colors as the default, while still making the full color palette available.

color inputs are not supported in Internet Explorer.

Otros widgets

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

Note: You can find the examples from this section on GitHub as other-examples.html (see it live also).

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 <input> element with its type attribute set to file. The types of files that are accepted can be constrained using the accept attribute. In addition, if you want to let the user pick more than one file, you can do so by adding the multiple attribute.


In this example, a file picker is created that requests graphic image files. The user is allowed to select multiple files in this case.

<input type="file" name="file" id="file" accept="image/*" multiple>

On some mobile devices, the file picker can access photos, videos, and audio captured directly by the device's camera and microphone by adding capture to the accept attribute.

<input type="file" accept="image/*;capture=camera">
<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

Contenido oculto

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. Use an <input> with its type 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" id="timestamp" name="timestamp" value="1286705410">

Image button

The image button control is one which is displayed exactly like an <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 <input> element with its type attribute set to the value image. This element supports exactly the same set of attributes as the <img> element, plus all the attributes supported by other 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; instead the X and Y coordinates of the click on the image are submitted (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 name attribute followed by the string ".x".
  • The Y value key is the value of the name attribute followed by the string ".y".

So for example when you click on the image of this widget, you are sent to a URL like the following:

This is a very convenient way to build a "hot map". How these values are sent and retrieved is detailed in the Sending and retrieving form data article.

Medidores y barras de progreso

Medidores y barras de progreso son representaciones visuales de valores numéricos.


A progress bar represents a value that changes over time up to a maximum value specified by the max attribute. Such a bar is created using a <progress> element.

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

This is for implementing anything requiring progress reporting, such as the percentage of total files downloaded, or the number of questions filled in on a questionnaire.

The content inside the <progress> element is a fallback for browsers that don't support the element and for screen readers to vocalize it.


A meter bar represents a fixed value in a range delimited by a min and a max value. This value is visualy rendered as a bar, and to know how this bar looks, we compare the value to some other set values:

  • The low and high values divide the range in three parts:
    • The lower part of the range is between the min and low values, inclusive.
    • The medium part of the range is between the low and high values, exclusive.
    • The higher part of the range is between the high and max values, inclusive.
  • The optimum value defines the optimum value for the <meter> element. In conjuction with the low and high value, it defines which part of the range is prefered:
    • If the optimum 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 optimum value is in the medium part of the range, the lower range is considered to be an average part, the medium range is considered to be the prefered part and the higher range is considered to be average as well.
    • If the optimum 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 <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 <meter> element. This is for implementing any kind of meter, for example a bar showing total space used on a disk, which turns red when it starts to get full.

<meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter>

The content inside the <meter> element is a fallback for browsers that don't support the element and for assistive technologies to vocalize it.

Support for progress and meter is fairly good — there is no support in Internet Explorer, but other browsers support it well.


Como ya habrás visto arriba, hay diferentes de elementos disponibles para formularios — No necesitas recordar todos los detalles de cada uno. Puedes volver a leer articulo cada cierto tiempo para recordar detalles no vistos antes.

Ver también

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

In this module