HTML: Formularios en HTML5 1/2

En una entrada anterior dejé escrito un enlace para conocer qué compatibilidad tienen los navegadores con las nuevas opciones de HTML5 para los formularios. Si ya conoces las opciones básicas para construir formularios es el momento de actualizarlos con la quinta edición del lenguaje HTML.

Ventajas de HTML5

Antiguamente podíamos usar JavaScript para mejorar nuestros formularios consiguiendo detectar valores incorrectos (como no escribir un correo electónico) o no rellenar campos obligatorios (como la contraseña de acceso).

Actualmente HTML5 ha suplantado la necesidad del uso de JavaScript para algunos conceptos, con nuevos atributos para la etiqueta <input/> que nos permiten poder conseguir los mismos efectos trabajando desde el lado del usuario.

Poder utilizar elementos nativos nos permite no tener que ampliar nuestro ancho de banda para tener que hacer calculos en el servidor en los casos de dar error, y nos permite avisar al usuario de que alguno de sus valores no siguen los requisitos necesarios.

En las dos entradas sobre formularios en HTML5 hago un resumen de los elementos más importantes. Si quieres profundizar más dejo aquí un enlace de Formularios en HTML5.

Nuevos valores para el atributo type

Es posible que no puedas notar las diferencias de los siguientes tipos de campo de texto de los ejemplos que hay a continuación. Si sucede es porque usas un navegador que no está preparado aún para leer todos los nuevos elementos de HTML5 (o que no lo has actualizado lo suficiente).

type="url"

Nos permite crear un campo de texto en el que solo se pueden introducir una dirección de página web. Si el formato del texto no es de una URL avisará al usuario de no haber completado correctamente el campo.

Algunos teléfonos móviles actualizados permiten introducir el texto en una interfaz de teclado táctil con opciones diseñadas para escribir una URL, como teclas de acceso rápido a la barra inclinada "/" o a finales de dominio ".com".

type="tel"

En este tipo de campo solo podemos escribir números de teléfono. El problema es que como existen tantos tipos diferentes de números de teléfono por todo el planeta, este valor no exige una sintaxis de por sí y deberás combinarlo con el atributo pattern para definir qué tipo de número de teléfono (ver en la segunda entrada del tema).

Algunos teléfonos móviles actualizados permiten introducir el número de teléfono en una interfaz de teclado táctil numérico con opciones diseñadas para escribir un número de teléfono, como autocompletado o acceso a la agenda.

type="email"

Con este valor podemos restringir el campo de texto para solo escribir direcciones de correo electrónico.

Algunos teléfonos móviles actualizados permiten introducir la dirección de correo electrónico en una interfaz de teclado táctil diseñada para correos electrónicos, con opciones como acceso rápido a la arroba "@".

type="number"

Gracias a este nuevo valor podemos conseguir un controlador en el que solo puedan introducirse valores numéricos. Muy útil combinado con otros atributos como min, max, value o step (ver en la segunda entrada del tema).

type="color"

Con este nuevo tipo de control podemos crear un botón que abra a una paleta de colores y dar la oportunidad del usuario a escoger un color. Con el atributo value podemos conseguir tener otro color que no sea el negro como predeterminado.

type="search"

Con este valor podemos dar a un campo de texto el diseño de un campo de búsqueda, añadiéndole una crucecita "X" que permita borrar todo lo que quede escrito por el usuario.

type="range"

Ahora podemos crear un controlador numérico que en este caso sea una pieza que se desplace horizontalmente para señalar un valor numérico dentro de un rango específico. Éste debe quedar completado con los atributos min y max.

type="datetime"

Aún no apto para todos los navegadores, con este valor podemos crear un campo de texto específico para insertar hora, fecha, año y zona horaria.

type="datetime-local"

Aún no apto para todos los navegadores, con este valor podemos crear un campo de texto específico para insertar hora, fecha y año, pero en este caso no podemos insertar la zona horaria.

type="date"

Aún no apto para todos los navegadores. Controlador muy útil para insertar fechas completas.

type="month"

Aún no apto para todos los navegadores. Controlador para definir tan solo un mes y un año específicos.

type="week"

Aún no apto para todos los navegadores. En este caso solo podemos escoger una semana y un año específicos.

type="time"

Bueno... supongo que te lo imaginas. Útil para definir tan solo una hora en formato de horas y minutos.

Y ahora...

Ahora a probarlos todos. Sí, abre tu editor de textos y crea un formulario con cada una de las opciones. Luego comprueba como funcionan con todos los navegadores posibles. Y cuando hayas terminado podrás leer la siguiente entrada.