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
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
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.
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.
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.
Control del 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 utilizando el <input>element con su atributo type establecido en el valor :colorcolor
<input type="color" name="color" id="color">Cuando sea compatible, hacer clic en un control de color tenderá a mostrar la funcionalidad de selección de color predeterminada del sistema operativo para que pueda elegir realmente.
