El tema de los formularios es uno de los puntos que han sufrido mejoras considerables con la llegada de HTML5. Se han incorporado nuevos tipos de input y nuevos atributos que permiten un mayor nivel de personalización y funcionalidad, por no hablar de sencillez en algunos puntos.
Aunque se han añadido campos de gran utilidad, como los relacionados con las fechas, quizá el punto más importante sea el haber incorporado una validación propia para poder verificar los datos que el usuario introduce. Hasta ahora, esta verificación había que hacerla usando algún lenguaje de programación como JavaScript, sin embargo ahora es posible hacerlo sin escribir una sola línea de código.
Los nuevos input type que se han añadido en HTML5 son: number, range, date, time, datetime, datetime-local, week, month, color, search, email, tel y url. Vamos a verlos uno a uno junto con un pequeño ejemplo de uso.
number
Este nuevo input se utiliza para indicar que los datos a introducir en este campo serán números y por tanto quedará fuera cualquier otro tipo. Además podemos limitar los valores a introducir fijando un máximo y un mínimo. Dependiendo del navegador y su versión, este input aparecerá como un campo con un controlador de incremento/decremento del número.
<input type="number" min="1" max="20">range
El tipo range vamos a emplearlo cuando tenemos que establecer un rango numérico y queremos que al usuario le sea sencillo elegir. Se mostrará una sencilla barra de desplazamiento.
<input type="range" min="1" max="10">date
Date pertenece al grupo de inputs destinados a introducir datos relacionados con el tiempo. En este caso nos proporciona un calendario mediante el cual, el usuario puede introducir una fecha concreta. Dependiendo del navegador, su visualización será de un tipo u otro.
<input type="date" name="fecha">time
Con este tipo conseguiremos un selector de hora para que el usuario pueda introducir horas y minutos.
<input type="time" name="hora">datetime-local
Se trata de una mezcla de las anteriores, le damos la posibilidad al usuario para que selecciones una fecha y hora determinados, sin zona horaria.
<input type="datetime-local" name="fechahora-local">datetime
Como en el anterior, le damos la posibilidad al usuario para que selecciones una fecha y hora determinados, pero en este caso con la posibilidad de elegir zona horaria.
<input type="datetime" name="fechahora">Ahora mismo este tipo no está soportado por los navegadores principales, pero será cuestión de tiempo que lo hagan.
week
Week sirve para que se pueda seleccionar una semana entera en un calendario, en formato ‘semana nº x, año x’.
<input type="week" name="semana">month
Este nuevo input sirve para seleccionar un mes entero dentro del calendario, similar al anterior en formato ‘mes x del año x’.
<input type="month" name="mes">color
El tipo de input color es también una de las novedades destacadas. Se trata de un selector para que el usuario pueda elegir un color de una paleta o introducir los valores deseados.
<input type="color" name="color">search
Con search definiríamos un campo de búsqueda. Su aspecto es similar a un input normal de texto, sin embargo, dependiendo del navegador tiene alguna funcionalidad extra, como un botón para borrar el texto introducido.
<input type="search" name="buscador">email, tel y url
Con estos últimos crearemos campos para que el usuario pueda introducir direcciones email, teléfonos y enlaces. Se producirá una validación de los datos cuando se vayan a enviar sin necesidad de programar nada.
<input type="email" name="correo">
<input type="tel" name="telefono">
<input type="url" name="enlace">Advertiros que cada navegador ha incorporado los nuevos input a su arbitrio, por lo que no todos funcionarán en todos los navegadores.
Índice del manual
- Introducción a HTML5
- ¿Cuáles son las diferencias de HTML5?
- Cambio de doctype
- Etiquetas semánticas header, hgroup, nav, section, article, aside y footer
- Etiquetas audio, video, source, track, embed y canvas
- Los formularios: nuevos tipos de input en HTML5
- Los formularios: nuevos elementos en HTML5
- Etiquetas en obsoletas en HTML5
- Ventajas e inconvenientes de usar HTML5
Deja una respuesta