Veteasabertu

Formularios, nuevos tipos de input en HTML5

19 de Mayo 2013
Formularios, nuevos tipos de input en HTML5

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.

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.

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.

time

Con este tipo conseguiremos un selector de hora para que el usuario pueda  introducir horas y minutos.

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.

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.

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’.

month

Este nuevo input sirve para seleccionar un mes entero dentro del calendario, similar al anterior en formato ‘mes x del año x’.

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.

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.

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.

Advertiros que cada navegador ha incorporado los nuevos input a su arbitrio, por lo que no todos funcionarán en todos los navegadores.

< ir al índice

Publicado por Jesús Tovar

Categorías: HTML

Etiquetas: ,

Deja un comentario

Este sitio web utiliza cookies para mejorar la experiencia de usuario, si continúas navegando estás dando tu consentimiento. Para más información pincha aquí.

ACEPTAR
Aviso de cookies