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 [:)]
number
Debe 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.
Debe 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.
Debe 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.
url
Debe 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á.
date
Debe 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).
color
Al hacer click sobre este tipo de campo, se abrirá el típico selector de color para seleccionar un color y poder enviarlo.
time
Debe 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.
Debe usarse para trabajar con campos de texto en los que se introducirá una dirección de correo electrónico (email) con su estructura ([correo eliminado]). Además en un móvil añade la tecla @ al teclado.
Con este tipo podremos seleccionar una cifra entre las que el programador defina con una flecha deslizante. Para definir la cifra mínima y máxima se utilizan los atributos min y max.
number
Debe 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.
<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">Debe 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.
<input type="tel">Debe 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.
<input type="search">url
Debe 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á.
<input type="url">date
Debe 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).
<input type="date">color
Al hacer click sobre este tipo de campo, se abrirá el típico selector de color para seleccionar un color y poder enviarlo.
<input type="color">time
Debe 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.
<input type="time">Debe usarse para trabajar con campos de texto en los que se introducirá una dirección de correo electrónico (email) con su estructura ([correo eliminado]). Además en un móvil añade la tecla @ al teclado.
<input type="email">Con este tipo podremos seleccionar una cifra entre las que el programador defina con una flecha deslizante. Para definir la cifra mínima y máxima se utilizan los atributos min y max.
<input type="range" min="0" max="10">