Mastering HTML5

Tipos de input

by Álvaro Castillo

HTML

<h3>
Recoger información tipeada por el usuario
</h3>Permite recoger texto en una sola línea.<br>
<input type="text">
<br>
Recuadro ajustable de texto en el que se puede visualizar lo escrito en múltiples líneas. <br>
<textarea></textarea>
<br>
Campo tipo input que tiene una validación que no permite al usuario enviar la información si no inserta una dirección mail válida. <br>
<input type="email">
<br>
Elemento del formulario que permite verificar si la URL introducida es correcta, sin embargo, en aquellos navegadores que no soporten este campo se tornará en un input tipo texto.<br>
<input type="url">
<br>
Campo tipo text con opciones adicionales como un icono con el que se puede eliminar lo previamente escrito además de soportar (según el navegador) un pequeño historial de búsqueda realizada.<br>
<input type="search">
<br>
Elemento del formulario en un navegador de escritorio no se aprecia la diferencia, pero si utilizamos un smartphone o un dispositivo móvil. A la hora de escribir, el teclado se alternará mostrando únicamente el "dial pad".<br>
<input type="tel">
<br>
<h3>
Fecha y hora
</h3>
Si queremos recoger campos de fecha y de hora, utilizaremos:
* Permite establecer una fecha.<br>
<input type="date">
<br>
* Permite escoger un mes del año y muestra el año del mes seleccionado.<br>
<input type="month">
<br>
Muestra la semana seleccionada y muestra el año de la semana seleccionada.<br>
<input type="week">
<br>
Permite seleccionado una fecha (MM/DD/YYYY) y además, hora (HH:MM:SS):<br>
<input type="datetime-local">
<br>
Muestra la hora en formato 12H y la hora asignada.<br>
  <input type="time">
<br>
<h3>
Opciones y/o elecciones
</h3>
Los siguientes elementos a nuestra disposición para seguir recolectando datos de usuario:<br>
* Representa una casilla para marcar múltiples opciones, muy útil para representar las famosas casillas de "Acepto..." o múltiples subscripciones.<br>
<input type="checkbox">
<br>
Opción única dentro de un conjunto de opciones...