Tipos de input de HTML5

En el art铆culo anterior vimos el elemento <input> y los valores de su atributo type, disponibles desde los inicios de HTML. Ahora veremos en detalle la funcionalidad de los controles de formulario m谩s recientes, incluyendo algunos tipos de input nuevos, los cuales fueron a帽adidos en HTML5 para permitir la recolecci贸n de tipos de datos espec铆ficos

Requisitos previos: Formaci贸n b谩sica en inform谩tica, y una comprensi贸n b谩sica de HTML.
Objetivo: Entender los valores de tipo input disponibles m谩s recientes para crear controles de formulario nativos, y c贸mo implementarlos utilizando HTML.

Nota: La mayor铆a de las caracter铆sticas discutidas en este art铆culo tienen un amplio soporte en todos los navegadores, anotaremos cualquier excepci贸n. Si quieres m谩s detalles referente al soporte de navegadores, deber铆as consultar nuestra refer茅ncia de elementos de formulario HTML, y en particular nuestra refer茅ncia extensiva de Tipos de <input>.

Debido a que la apari茅ncia de un control de formulario puede ser algo distinta con respecto a unas especificaciones del dise帽ador, los desarrolladores web a veces construyen sus propios controles de formulario personalizados. Cubrimos este aspecto en un tutorial avanzado: C贸mo construir widgets de formulario personalizados.

Campo de direcci贸n de correo electr贸nico

Este tipo de campo se define utilizando el valor  email en el atributo type del elemento <input>:

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

Cuando se utiliza este valor type , se le obliga al usuario a escribir dentro del campo una direcci贸n de correo electr贸nico v谩lida. Cualquier otro contenido ocasiona que el navegador muestre un mensaje de error cuando se env铆a el formulario. Puedes verlo en acci贸n en la siguiente captura de pantalla

锘緼n invalid email input showing the message "Please enter an email address."

Puedes utilizar tambi茅n el atributo multiple en combinaci贸n con el tipo inputemail para permitir que sean introducidas varias direcciones de correo electr贸nico separadas por comas en el mismo input:

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

En algunos dispositivos, en particular dispositivos t谩ctiles con teclados din谩micos como los smart phones, deber铆a presentarse un teclado virtual que es m谩s adecuado para introducir direcciones de correo electr贸nico, incluyendo la tecla @. Mira como ejemplo la siguiente captura de pantalla del teclado de Firefox para Android:

firefox for android email keyboard, with ampersand displayed by default.

Nota: Puedes encontrar ejemplos sobre los tipos de entrada de texto b谩sicos en Ejemplos input b谩sicos (Consulta tambi茅n el c贸digo fuente).

Mejorar la experi茅ncia del usuario para usuarios con estos dispositivos, es otra buena raz贸n para utilizar estos tipos de input m谩s recientes.

Validaci贸n del lado cliente

Como puedes haber visto anteriormente, email, junto con otros tipos de input m谩s recientes, proporciona la validaci贸n de errores en el lado cliente de forma predeterminada, realizados por el navegador antes de que los datos obtenidos se env铆en al servidor. Es una ayuda 煤til guiar a los usuarios a rellenar un formulario de forma precisa y puede ahorrar tiempo: es 煤til saber de inmediato que tu dato no es correcto, en vez de tener que esperar el viaje de ida y vuelta al servidor.

Pero no deber铆a ser considerado una medida de seguridad exhaustiva! Tus aplicaciones siempre deben realizar comprobaciones de seguridad en cada dato, tanto en el lado servidor como en el lado cliente debido a que la validaci贸n en el lado cliente es muy f谩cil desactivarla, por lo que usuarios malintencionados pueden enviar f谩cilmente datos incorrectos al servidor. Lee Seguridad en el sitio web para tener una idea de lo que podr铆a ocurrir; Implementar validaci贸n en el lado servidor est谩 m谩s all谩 del alcance de este m贸dulo-gu铆a, pero deber铆a tenerlo en cuenta.

Ten en cuenta que a@b es una direcci贸n de correo electr贸nico v谩lida de acuerdo a las restricciones proporcionadaas por defecto. Esto es debido a que el tipo de input email, permite por defecto direcciones de correo electr贸nico de una intranet. Para implementar un comportamiento diferente de validaci贸n puedes utilizar el atributo pattern, y tambi茅n puedes utilizar mensajes de error personalizados; Hablaremos de c贸mo utilizar estas caracter铆sticas en Validaci贸n de formularios en el lado cliente en un art铆culo posterior.

Nota: Si los datos introducidos no son una direcci贸n de correo electr贸nico, habr谩 coincid茅ncia con la pseudo clase :invalid, y la propiedad validityState.typeMismatch devolver谩 true.

Campo de b煤squeda

Los campos de b煤squeda est谩n destinados a ser utilizados para crear cajas de b煤squeda en p谩ginas y aplicaciones. Este tipo de campo se define utilizando el valor search en su atributo type:

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

La difer茅ncia principal entre un campo text y un campo search, es la forma en que el navegador aplica estilo a su apari茅ncia. A menudo los campos search se muestran con bordes redondeados; y a veces tambi茅n muestran una "鈸", el cual despeja el campo de cualquier valor cuando se pulsa sobre 茅l. Adicionalmente, en dispositivos con teclado din谩mico, la tecla enter del teclado puede leer "search" o mostrar un icono de lupa.

La captura de pantalla siguiente muestra un campo de b煤squeda con contenido, en Firefox 71, Safari 13, y Chrome 79 en macOS, y Edge 18 y Chrome 79 en Windows 10. Ten en cuenta que el icono de reseteo s贸lo aparece si el campo tiene un valor y, aparte de Safari, s贸lo se muestra cuando el campo tiene el foco.

Screenshots of search fields on several platforms.

Otra caracter铆stica que vale la pena se帽alar es que se puede guardar los valores de un campo search autom谩ticamente y reutilizarse en m煤ltiples p谩ginas del mismo sitio web para ofrecer autocompletado. Esta caracter铆stica suele ocurrir de forma autom谩tica en la mayor铆a de navegadores modernos.

Campo n煤mero de tel茅fono

Se puede crear un campo especial para introducir n煤meros de tel茅fono utilizando tel como valor del atributo type:

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

Cuando se accede desde un dispositivo t谩ctil con teclados din谩micos, muchos de ellos mostrar谩n un teclado num茅rico cuando se encuentren con type="tel", lo que significa que este tipo es 煤til no s贸lo para ser utilizado para n煤meros de tel茅fono, sino tambi茅n cuando sea 煤til un teclado num茅rico.

La siguiente captura de pantalla del teclado de Firefox para Android proporciona un ejemplo:

firefox for android email keyboard, with ampersand displayed by default.

Debido a la gran variedad de formatos de n煤mero de tel茅fono existentes, este tipo de campo no cumple con ning煤n tipo de restricci贸n sobre el valor introducido por el usuario. (Esto significa que puede incluir letras, etc...).

Como mencionamos anteriormente, se puede utilizar el atributo pattern para que asuma restricciones, sobre el cu谩l aprenderemos en Validaci贸n de formulario en el lado cliente.

Campo URL

Se puede crear un tipo especial de campo para introducir URLs utilizando el valor url para el atributo type:

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

Este tipo a帽ade restricciones de validaci贸n en el campo. El navegador informar谩 de un error si no se introdujo el protocolo (como http:), o si de alg煤n modo el URL est谩 mal formado. En dispositivos con teclados din谩micos a menudo mostrar谩 por defecto algunas o todas las teclas como los dos puntos, el punto, y la barra inclinada.

Mira el siguiente ejemplo tomado de Firefox para Android:

firefox for android email keyboard, with ampersand displayed by default.

Nota: Solo porque el URL est茅 bien formado no significa necesariamente que la direcci贸n al que hace refer茅ncia exista!

Campo num茅rico

Se pueden crear controles para introducir n煤meros con el type number de <input>. Este control se parece a un campo de texto pero solo permite n煤meros de punto flotante, y normalmente proporciona botones deslizadores para incrementar o reducir el valor del control. En dispositivos con teclados din谩micos generalmente se muestra el teclado num茅rico.

La siguiente captura de pantalla tomada de Firefox para Android proporciona un ejemplo:

firefox for android email keyboard, with ampersand displayed by default.

Con el tipo de input number  puedes limitar los valores m铆nimo y m谩ximo permitidos definiendo los atributos min y  max.

Tambi茅n puedes utilizar el atributo step para cambiar el incremento y decremento causado por los botones deslizadores. Por defecto, el tipo de input number s贸lo valida si el n煤mero es un entero. Para permitir n煤meros decimales, especifica step="any". Si se omite, su valor por defecto es 1, lo que significa que solo son v谩lidos n煤meros enteros.

Miremos algunos ejemplos. El primero de los siguientes crea un control num茅rico cuyo valor est谩 restringido a cualquier valor entre 1 y 10, y sus botones cambian su valor en incrementos o decrementos de 2.

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

El segundo crea un control num茅rico cuyo valor est谩 restringido a cualquier valor entre el 0 y 1 ambos inclusive, y sus botones cambian su valor en incrementos o decrementos de 0.01.

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

El tipo de input number tiene sentido cuando est茅 limitado el rango de valores v谩lidos, por ejemplo la edad de una persona o su altura. Si el rango es demasiado grande para que los cambios de incremento tengan sentido ( por ejemplo los c贸digos postales de USA, cuyo rango va de 00001 a 99999), entonces ser铆a una mejor opci贸n utilizar el tipo tel: proporciona el teclado num茅rico mientras que omite el componente de interfaz de usuario de los deslizadores de n煤mero.

Ten en cuenta que: En versiones inferiores a la 10 de Internet Explorer no se soportan las entradas number

Slider controls

Otra forma de tomar un n煤mero es usando un slider. Podr谩s observar c贸mo son bastantes parecidas a los sitios inmobiliarios, d贸nde quieres determinar un m谩ximo de precio por propiedad y filtrar tu b煤squeda en el. Observaremos un ejemplo en vivo.

Usage-wise, sliders are less accurate than text fields. Therefore, they are used to pick a number whose precise value is not necessarily important.

A slider is created using the <input> with its type attribute set to the value range. The slider-thumb can be moved via mouse or touch, or with the arrows of the keypad.

It's important to properly configure your slider. To that end, it's highly recommended that you set the min, max, and step attributes which set the minimum, maximum and increment values, respectively.

Let's look at the code behind the above example, so you can see how its done. First of all, the basic HTML:

<label for="price">Choose a maximum house price: </label>
<input type="range" name="price" id="price" min="50000" max="500000" step="100" value="250000">
<output class="price-output" for="price"></output>

This example creates a slider whose value may range between 50000 and 500000, which increments/decrements by 100 at a time. We've given it default value of 250000, using the value attribute.

One problem with sliders is that they don't offer any kind of visual feedback as to what the current value is. This is why we've included an <output> element 鈥 to contain the current value (we'll also look at this element in the next article). You could display an input value or the output of a calculation inside any element, but <output> is special 鈥 like <label>, it can take a for attribute that allows you to associate it with the element or elements that the output value came from.

To actually display the current value, and update it as it changed, you must use JavaScript, but this is relatively easy to do:

const price = document.querySelector('#price')
const output = document.querySelector('.price-output')

output.textContent = price.value

price.addEventListener('input', function() {
  output.textContent = price.value
});

Here we store references to the range input and the output in two variables. Then we immediately set the output's textContent to the current value of the input. Finally, an event listener is set to ensure that whenever the range slider is moved, the output's textContent is updated to the new value.

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

Date and time pickers

Gathering date and time values has traditionally been a nightmare for web developers. For good user experience, it is important to provide a calendar selection UI, enabling users to select dates without necessating context switching to a native calendar application or potentially entering them in differing formats that are hard to parse. The last minute of the previous millenium can be expressed in the following different ways, for example: 1999/12/31, 23:59 or 12/31/99T11:59PM.

HTML date controls are available to handle this specific kind of data, providing calendar widgets and making the data uniform.

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. Here's a live example that falls back to <select> elements in non-supporting browsers:

Let's look at the different available types in brief. Note that the usage of these types is quite complex, especially considering browser support (see below); to find out the full details, follow the links below to the reference pages for each type, including detailed examples.

datetime-local

<input type="datetime-local"> 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">

month

<input type="month"> creates a widget to display and pick a month with a year.

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

time

<input type="time"> 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">

week

<input type="week"> creates a widget to display and pick a week number and its year.

Weeks start on Monday and run to Sunday. Additionally, the first week 1 of each year contains the first Thursday of that year鈥攚hich may not include the first day of the year, or may include the last few days of the previous year.

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

Constraining date/time values

All date and time controls can be constrained using the min and max attributes, with further constraining possible via the step attribute (whose value varies according to input type).

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

Browser support for date/time inputs

You should be warned that the date and time widgets don't have the best browser 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 no desktop support), and Firefox supports time and date only.

The reference pages linked to above provide suggestions on how to program fallbacks for non-supporting browsers; another option is to consider using a JavaScript library to provide a date picker. Most modern frameworks have good components available to provide this functionality, and there are standalone libraries available to (see Top date picker javascript plugins and libraries for some suggestions).

Color picker control

Colors are always a bit difficult to handle. There are many ways to express them: RGB values (decimal or hexadecimal), HSL values, keywords, etc.

A color control can be created using the <input> element with its type attribute set to the value color:

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

When supported, clicking a color control will tend to display the operating system's default color picking functionality for you to actually make your choice with. The following screenshot taken on Firefox for macOS provides an example:

firefox for android email keyboard, with ampersand displayed by default.

And here is a live example for you to try out:

The value returned is always a lowercase 6-value hexidecimal color.

Note: color inputs are not supported in Internet Explorer.

Summary

That brings us to the end of our tour of the HTML5 form input types. There are a few other control types that cannot be easily grouped together due to their very specific behaviors, but which are still essential to know about. We cover those in the next article.

In this module

Advanced Topics