Tipos de input de HTML5

Campo de dirección de correo electrónico

Este tipo de campo se establece usando el valor email en el atributo type:

<label for="email">Introduce tu dirección de correo electrónico:</label><br />

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

Cuando se usa este type, el valor debe ser una dirección de correo electrónico para ser válido. Cualquier otro contenido hace que el navegador muestre un error cuando se envía el formulario. Puedes ver esto en acción en la siguiente captura de pantalla.

Puedes usar el atributo multiple en combinación con el tipo de input email para permitir que se introduzcan varias direcciones de correo electrónico separadas por comas en el mismo input:

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

En algunos dispositivos —especialmente los dispositivos táctiles con teclados dinámicos como los teléfonos inteligentes— puede mostrarse un teclado virtual distinto, más adecuado para introducir direcciones de correo electrónico, incluyendo la tecla @:

Esta es otra buena razón para usar estos tipos de input más recientes, mejorando la experiencia de usuario para quienes utilizan estos dispositivos.

Validación del lado del cliente

Como puedes ver arriba, email —junto con otros tipos de input más recientes— proporciona validación de errores integrada del lado del cliente, realizada por el navegador antes de que los datos se envíen al servidor. Es una ayuda útil para guiar a los usuarios a completar un formulario correctamente, y puede ahorrar tiempo: es útil saber de inmediato que tus datos no son correctos, en lugar de tener que esperar un viaje de ida y vuelta al servidor.

Pero no debería considerarse una medida de seguridad exhaustiva. Tus aplicaciones siempre deben realizar comprobaciones de seguridad sobre cualquier dato enviado por un formulario, tanto en el lado del servidor como en el lado del cliente, porque la validación del lado del cliente es demasiado fácil de desactivar, por lo que los usuarios malintencionados aún pueden enviar fácilmente datos incorrectos a tu servidor. Lee Seguridad en sitios web para hacerte una idea de lo que podría ocurrir; implementar la validación del lado del servidor está algo fuera del alcance de este módulo, pero deberías tenerlo en cuenta.

Ten en cuenta que a@b es una dirección de correo electrónico válida según las restricciones predeterminadas. Esto se debe a que el tipo de input email permite direcciones de correo electrónico de intranet por defecto. Para implementar un comportamiento de validación diferente, puedes usar el atributo pattern. También puedes personalizar los mensajes de error. Hablaremos de cómo usar estas características en el artículo Validación de formularios del lado del cliente, más adelante.

Campo de búsqueda

Los campos de búsqueda están pensados para crear cajas de búsqueda en páginas y aplicaciones. Este tipo de campo se establece usando el valor search en el atributo type:

<label for="search">Introduce un término de búsqueda:</label><br />

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

La diferencia principal entre un campo text y un campo search es la forma en que el navegador da estilo a su apariencia. En algunos navegadores, los campos search se renderizan con esquinas redondeadas. En algunos navegadores, se muestra un icono de borrado "Ⓧ", que borra el valor del campo al hacer clic en él. Este icono de borrado solo aparece si el campo tiene un valor y, aparte de Safari, solo se muestra cuando el campo tiene el foco. Además, en dispositivos con teclados dinámicos, la tecla intro del teclado puede mostrar "search", o un icono de lupa.

Otra característica que vale la pena mencionar es que los valores de un campo search pueden guardarse automáticamente y reutilizarse para ofrecer autocompletado en varias páginas del mismo sitio web; esto suele ocurrir automáticamente en la mayoría de los navegadores modernos.

Campo de número de teléfono

Se puede crear un campo especial para introducir números de teléfono usando tel como valor del atributo type:

<label for="tel">Introduce un número de teléfono:</label><br />

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

Cuando se accede desde un dispositivo táctil con teclado dinámico, la mayoría de los dispositivos mostrarán un teclado numérico cuando se encuentre type="tel", lo que significa que este tipo es útil siempre que un teclado numérico sea útil, y no tiene que usarse solo para números de teléfono.

-

Debido a la amplia variedad de formatos de números de teléfono en todo el mundo, este tipo de campo no impone ninguna restricción sobre el valor introducido por un usuario (esto significa que puede incluir letras, etc.).

Como mencionamos antes, el atributo pattern puede usarse para imponer restricciones, lo cual aprenderás en Validación de formularios del lado del cliente.

Campo URL

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

<label for="url">Introduce una URL:</label><br />

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

Agrega restricciones de validación especiales al campo. El navegador informará un error si no se introduce ningún protocolo (como http:), o si la URL está mal formada de alguna otra manera. En dispositivos con teclados dinámicos, el teclado predeterminado a menudo mostrará algunos o todos los dos puntos, el punto y la barra inclinada como teclas predeterminadas.

Campo numérico

Se pueden crear controles para introducir números con un type de <input> igual a number. Este control se parece a un campo de texto, pero solo permite números de punto flotante, y generalmente proporciona botones en forma de selector giratorio para aumentar y disminuir el valor del control. En dispositivos con teclados dinámicos, generalmente se muestra el teclado numérico.

<label for="number">Introduce un número:</label><br />

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

Con el tipo de input number, puedes restringir los valores mínimo y máximo permitidos configurando los atributos min y max.

También puedes usar el atributo step para establecer el incremento de aumento y disminución que provocan los botones del selector giratorio. Por defecto, el tipo de input number solo valida si el número es un entero, ya que el atributo step tiene por defecto el valor 1. Para permitir números decimales, especifica step="any" o un valor específico, como step="0.01" para restringir el punto flotante. Si se omite, como el valor de step es 1 por defecto, solo son válidos los números enteros.

Veamos algunos ejemplos:

Este ejemplo crea un control numérico cuyo valor válido está restringido a un valor impar entre 1 y 10. Los botones de aumento y disminución cambian el valor en 2, comenzando por el valor de min.

<label for="number">Introduce un número impar entre 1 y 10:</label><br />

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

Este ejemplo crea un control numérico cuyo valor está restringido a cualquier valor entre 0 y 1 inclusive, y cuyos botones de aumento y disminución cambian su valor en 0.01.

<label for="number">Introduce un número entre 0 y 1, inclusive:</label><br />

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

El tipo de input number tiene sentido cuando el rango de valores válidos es limitado, como la edad o la estatura de una persona. Si el rango es demasiado grande para que los incrementos tengan sentido (como los códigos postales de EE. UU., que van de 00001 a 99999), el tipo tel podría ser una mejor opción; proporciona el teclado numérico sin incluir la función de selector giratorio de los números.

Controles deslizantes

Otra forma de elegir un número es usando un control deslizante. Los ves con bastante frecuencia en sitios como los de compras, donde quieres establecer un precio máximo de propiedad para filtrar. Veamos un ejemplo en vivo para ilustrar esto:

En cuanto al uso, los controles deslizantes son menos precisos que los campos de texto. Por eso se utilizan para elegir un número cuyo valor preciso no es necesariamente importante.

Un control deslizante se crea usando <input> con su atributo type establecido en el valor range. El control deslizante se puede mover con el ratón o el tacto, o con las flechas del teclado.

Es importante configurar correctamente tu control deslizante. Para ello, se recomienda encarecidamente establecer los atributos min, max y step, que establecen los valores mínimo, máximo e incremental, respectivamente.

Veamos el código detrás del ejemplo anterior, para que puedas ver cómo se hace. En primer lugar, el HTML básico:

<label for="price">Elige un precio máximo de vivienda: </label>
<input
  type="range"
  name="price"
  id="price"
  min="50000"
  max="500000"
  step="1000"
  value="250000" />
<output class="price-output" for="price"></output>

Este ejemplo crea un control deslizante cuyo valor puede oscilar entre 50000 y 500000, con incrementos/decrementos de 1000 a la vez. Le hemos dado un valor predeterminado de 250000, usando el atributo value.

Un problema con los controles deslizantes es que no ofrecen ningún tipo de retroalimentación visual sobre cuál es el valor actual. Por eso hemos incluido un elemento <output> para contener el valor actual. Podrías mostrar un valor de input o el resultado de un cálculo dentro de cualquier elemento, pero <output> es especial —al igual que <label>— y puede tomar un atributo for que te permite asociarlo con el elemento o elementos de los que proviene el valor de salida.

Para mostrar realmente el valor actual, y actualizarlo a medida que cambia, debes usar JavaScript, lo cual se puede lograr con algunas instrucciones:

const price = document.querySelector("#price");
const output = document.querySelector(".price-output");

output.textContent = price.value;

price.addEventListener("input", () => {
  output.textContent = price.value;
});

body {
  text-align: center;
}
label,
output {
  display: block;
}

Aquí almacenamos referencias al input range y al output en dos variables. Luego establecemos inmediatamente el textContent del output con el value actual del input. Finalmente, se configura un detector de eventos para asegurar que, cada vez que se mueve el control deslizante, el textContent del output se actualice al nuevo valor.

Selectores de fecha y hora

Generalmente, para una buena experiencia de usuario al recopilar valores de fecha y hora, es importante proporcionar una interfaz de selección de calendario. Estas permiten a los usuarios seleccionar fechas sin necesidad de cambiar de contexto a una aplicación de calendario nativa, o de introducirlas en formatos distintos que son difíciles de interpretar. El último minuto del milenio anterior se puede expresar de las siguientes formas: 1999/12/31, 23:59, o 12/31/99T11:59PM.

Los controles de fecha de HTML están disponibles para manejar este tipo específico de datos, proporcionando widgets de calendario y uniformando los datos.

Un control de fecha y hora se crea usando el elemento <input> y un valor apropiado para el atributo type, dependiendo de si deseas recopilar fechas, horas, o ambas. Aquí tienes un ejemplo en vivo:

<label for="party">Elige una fecha y hora para tu fiesta:</label>
<input type="datetime-local" id="party" name="bday" />
<span class="validity"></span>

input:invalid + span::after {
  content: " ✖";
}

input:valid + span::after {
  content: " ✓";
}

Veamos brevemente los distintos tipos disponibles. Ten en cuenta que el uso de estos tipos es bastante complejo, especialmente si consideramos la compatibilidad con navegadores (ver más abajo); para conocer todos los detalles, sigue los enlaces de abajo a las páginas de referencia de cada tipo, que incluyen ejemplos detallados.

date

<input type="date"> crea un widget para mostrar y elegir una fecha (año, mes y día, sin hora).

<label for="date">Introduce la fecha:</label><br />

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

datetime-local

<input type="datetime-local"> crea un widget para mostrar y elegir una fecha con hora, sin información de zona horaria específica.

<label for="month">Introduce la fecha y hora:</label><br />

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

month

<input type="month"> crea un widget para mostrar y elegir un mes junto con un año.

<label for="month">Introduce el mes:</label><br />

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

time

<input type="time"> crea un widget para mostrar y elegir un valor de hora. Aunque la hora puede mostrarse en formato de 12 horas, el valor devuelto está en formato de 24 horas.

<label for="time">Introduce una hora:</label><br />

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

week

<input type="week"> crea un widget para mostrar y elegir un número de semana junto con su año.

Las semanas comienzan el lunes y terminan el domingo. Además, la primera semana del año contiene el primer jueves de ese año, lo cual puede no incluir el primer día del año, o puede incluir los últimos días del año anterior.

<label for="week">Introduce la semana:</label><br />

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

Restricción de valores de fecha y hora

Todos los controles de fecha y hora pueden restringirse usando los atributos min y max, con restricciones adicionales posibles mediante el atributo step (cuyo valor varía según el tipo de input).

<label for="myDate">¿Cuándo estás disponible este verano?</label><br />
<input
  type="date"
  name="myDate"
  min="2025-06-01"
  max="2025-08-31"
  step="7"
  id="myDate" />

Control de selector de color

Los colores siempre son un poco difíciles de manejar. Hay muchas formas de expresarlos: valores RGB (decimales o hexadecimales), valores HSL, palabras clave, etc.

Se puede crear un control color usando el elemento <input> con su atributo type establecido en el valor color:

<label for="color">Elige un color:</label><br />

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

Al hacer clic en un control de color, generalmente se muestra la funcionalidad predeterminada de selección de color del sistema operativo para que puedas elegir. El valor devuelto siempre es un color hexadecimal de 6 valores en minúsculas.

Resumen

Con esto llegamos al final de nuestro recorrido por los tipos de input de formularios de HTML5. Hay algunos otros tipos de control que no se pueden agrupar fácilmente debido a sus comportamientos muy específicos, pero que siguen siendo esenciales de conocer. Los veremos en el próximo artículo.

• Anterior
• Overview: Pilares de los formularios web
• Siguiente