Todos sabemos (o deberíamos) que HTML5, es por decirlo de alguna manera, el futuro. Una parte para demostrarlo es en los formularios, en los que disponemos de un montón de nuevas herramientas muy sencillas y que nos ahorran tiempo (y código extra sobretodo!). En este post vamos a repasar algunos de los nuevos tipos que usar en un formulario, si falta alguno (probablemente falte!!) os agradecería que lo comentaráis y lo añadimos al post
numberDebe usarse para trabajar con campos de texto en los que sólamente se ingresarán números (nada de letras). Si abrimos la página con un navegador móvil, en vez de abrir el teclado normal (que incluye todos los cáracteres: números, letras, símbolos...) abrirá un teclado numérico.
Además, si el visitante utiliza Google Chrome, se muestran dos flechas en el lado derecho del input para aumentar/reducir el número del input. Y si utilizamos el atributo step, podemos modificar la cantidad en la que las flechas aumentan/diminuyen un número (de 1 en 1, de 2 en 2, de 3 en 3...). También se le pueden añadir los atributos min y max para determinar el número mínimo y máximo que podrá tener el input.
Código HTML:
<input type="number">

<!-- Con el atributo step (para aumentar la cifra de 2 en 2) y sin límite -->
<input type="number" step="2">

<!-- Con los atributos min y max -->
<input type="number" step="5" min="0" max="100">
telDebe usarse para trabajar con campos de texto en los que sólamente se ingresarán números de teléfono. Si abrimos la página con un navegador móvil, se abrirá un teclado numérico para ingresar un número de teléfono.
Código HTML:
<input type="tel">
searchDebe usarse para trabajar con campos de texto en los que ingresaremos una cadena a buscar. Con este input, el navegador revisará nuestro historial para buscar similitudes a lo introducido en el campo y nos dará "sugerencias" con la función de autocompletado. Además añade una "x" al final del input para borrar su contenido.
Código HTML:
<input type="search">
urlDebe usarse para trabajar con campos de texto en los que se ingresará una dirección a una página. Si lo que el usuario introdujo no tiene el formato de una URL, mostrará un aviso y el formulario no se enviará.
Código HTML:
<input type="url">
dateDebe usarse para trabajar con campos de texto en los que se introducirá una fecha. Al hacer click sobre él, se desplegará una pequeña ventana con un calendario (también llamado datepicker) para elegir la fecha que queremos introducir (o la ponemos nosotros en formato día/mes/año).
Código HTML:
<input type="date">
colorAl hacer click sobre este tipo de campo, se abrirá el típico selector de color para seleccionar un color y poder enviarlo.
Código HTML:
<input type="color">
timeDebe usarse para trabajar con campos de texto en los que se introducirá una hora determinada. En él se puede escribir una hora determinada (con formato hora : minutos : segundos) y muestra dos flechas para aumentarla/reducirla.
Código HTML:
<input type="time">
emailDebe usarse para trabajar con campos de texto en los que se introducirá una dirección de correo electrónico (email) con su estructura (dirección@dominio.xxx). Además en un móvil añade la tecla @ al teclado.
Código HTML:
<input type="email">