La Web 2.0 está completamente enfocada en el usuario. Cuando el usuario es el centro de atención, todo está relacionado con interfaces, en cómo hacerlas más intuitivas, más naturales, más prácticas y más atractivas. Los formularios web son la interfaz más importante de todas, permiten a los usuarios insertar datos, tomar decisiones, comunicar información y cambiar el comportamiento de una aplicación.
Durante los últimos años, códigos personalizados y librerías fueron creados para procesar formularios en el ordenador del usuario. HTML5 vuelve a estas funciones estándar agregando nuevos atributos, elementos y una API completa. Ahora la capacidad de procesamiento de información insertada en formularios en tiempo real ha sido incorporada en los navegadores y completamente estandarizada.
El elemento < form >
Los formularios web en HTML, al margen de los formularios web en HTML5, no han cambiado mucho. La estructura sigue siendo la misma, pero HTML5 ha agregado nuevos elementos, tipos de campo y atributos para expandirlos tanto como sea necesario y proveer así las funciones actualmente implementadas en aplicaciones web.
<!DOCTYPE html> <html lang="es"> <head> <title>Formularios</title> </head> <body> <section> <form name="miformulario" id="miformulario" method="get"> <input type="text" name="nombre" id="nombre"> <input type="submit" value="Enviar"> </form> </section> </body> </html>
En el Listado 6-1 creamos una plantilla básica para formularios. Como puede ver, la estructura del formulario y sus atributos siguen siendo igual que en especificaciones previas. Sin embargo, existen nuevos atributos para el elemento < form >:
- “autocomplete”: Este es un viejo atributo que se ha vuelto estándar en esta especificación.
Puede tomar dos valores: on y off. El valor por defecto es on. Cuando es configurado como off, los elementos < input > pertenecientes a ese formulario tendrán la función de autocompletar desactivada, sin mostrar entradas previas como posibles valores.
Puede ser implementado en el elemento < form > o en cualquier elemento < input > independientemente.
Una de las características de formularios en HTML5 es la capacidad propia de validación. Los formularios son automáticamente validados. Para evitar este comportamiento, podemos usar el atributo novalidate. Para lograr lo mismo para elementos < input > específicos, existe otro atributo llamado formnovalidate. Ambos atributos son booleanos, ningún valor tiene que ser especificado (su presencia es suficiente para activar su función).
El elemento < input >
El elemento más importante en un formulario es < input >. Este elemento puede cambiar sus características gracias al atributo type (tipo). Este atributo determina qué clase de entrada es esperada desde el usuario. Los tipos disponibles hasta el momento eran el multipropósitos text (para textos en general) y solo unos pocos más específicos, como password o submit. HTML5 ha expandido las opciones incrementando de este modo las posibilidades para este elemento.
En HTML5 estos nuevos tipos no solo están especificando qué clase de entrada es esperada sino también diciéndole al navegador qué debe hacer con la información recibida. El navegador procesará los datos ingresados de acuerdo al valor del atributo type y validará la entrada o no.
El atributo type trabaja junto con otros atributos adicionales para ayudar al navegador a limitar y controlar en tiempo real lo ingresado por el usuario.
Tipo “email”
Casi todo formulario en la web ofrece un campo para ingresar una dirección de email, pero hasta ahora el único tipo de campo disponible para esta clase de datos era text. El tipo text representa un texto general, no un dato específico, por lo que teníamos que controlar la entrada con código JavaScript para estar seguros de que el texto ingresado correspondía a un email válido. Ahora el navegador se hace cargo de esto con el nuevo tipo email:
<input type="email" name="miemail" id="miemail">
El texto insertado en el campo generado por el código del Listado 6-2 será controlado por el navegador y validado como un email. Si la validación falla, el formulario no será enviado.
Cómo cada navegador responderá a una entrada inválida no está determinado en la especificación de HTML5. Por ejemplo, algunos navegadores mostrarán un borde rojo alrededor del elemento < input > que produjo el error y otros lo mostrarán en azul. Por su parte, existen formas de personalizar esta respuesta, pero las veremos más adelante.
Tipo “search”
El tipo search (búsqueda) no controla la entrada, es solo una indicación para los navegadores. Al detectar este tipo de campo algunos navegadores cambiarán el diseño del elemento para ofrecer al usuario un indicio de su propósito.
<input type="search" name="busqueda" id="busqueda">
Tipo “URL”
Este tipo de campo trabaja exactamente igual que el tipo email pero es específico para direcciones web. Está destinado a recibir solo URLs absolutas y retornará un error si el valor es inválido.
<input type="url" name="miurl" id="miurl">
Tipo “tel”
Este tipo de campo es para números telefónicos. A diferencia de los tipos “email” y “URL”, el tipo “tel” no requiere ninguna sintaxis en particular. Es solo una indicación para el navegador en caso de que necesite hacer ajustes de acuerdo al dispositivo en el que la aplicación es ejecutada.
<input type="tel" name="telefono" id="telefono">
Como su nombre lo indica, el tipo number es sólo válido cuando recibe una entrada numérica. Existen algunos atributos nuevos que pueden ser útiles para este campo:
- “min”: El valor de este atributo determina el mínimo valor aceptado para el campo
- “max”: El valor de este atributo determina el máximo valor aceptado para el campo
- “step”: El valor de este atributo determina el tamaño en el que el valor será incrementado o disminuido en cada paso. Por ejemplo, si declara un valor de 5 para step en un campo que tiene un valor mínimo de 0 y máximo de 10, el navegador no le permitirá especificar valores entre 0 y 5 o entre 5 y 10.
<input type="number" name="numero" id="numero" min=”0” max=”10” step=”5”>
No es necesario especificar ambos atributos (min y max), y el valor por defecto para step es 1.
Tipo “range”
Este tipo de campo hace que el navegador construya una nueva clase de control que no existía previamente. Este nuevo control le permite al usuario seleccionar un valor a partir de una serie de valores o rango. Normalmente es mostrado en pantalla como una puntero deslizable o un campo con flechas para seleccionar un valor entre los predeterminados, pero no existe un diseño estándar hasta el momento.
El tipo range usa los atributos min y max estudiados previamente para configurar los límites del rango. También puede utilizar el atributo step para establecer el tamaño en el cual el valor del campo será incrementado o disminuido en cada paso.
<input type="range" name="numero" id="numero" min=”0” max=”10” step=”5”>
Podemos declarar el valor inicial utilizando el viejo atributo value y usar JavaScript para mostrar el número seleccionado en pantalla como referencia. Experimentaremos con esto y el nuevo elemento más adelante.
Tipo “date”
Este es otro tipo de campo que genera una nueva clase de control. En este caso fue incluido para ofrecer una mejor forma de ingresar una fecha. Algunos navegadores muestran en pantalla un calendario que aparece cada vez que el usuario hace clic sobre el campo. El calendario le permite al usuario seleccionar un día que será ingresado en el campo junto con el resto de la fecha.
Un ejemplo de uso es cuando necesitamos proporcionar un método para seleccionar una fecha para un vuelo o la entrada a un espectáculo. Gracias al tipo date ahora es el navegador el que se encarga de construir un almanaque o las herramientas necesarias para facilitar el ingreso de este tipo de datos.
<input type="date" name="fecha" id="fecha">
La interfaz no fue declarada en la especificación. Cada navegador provee su propia interfaz y a veces adaptan el diseño al dispositivo en el cual la aplicación está siendo ejecutada. Normalmente el valor generado y esperado tiene la sintaxis año-mes-día.
Tipo “week”
Este tipo de campo ofrece una interfaz similar a date, pero solo para seleccionar una semana completa. Normalmente el valor esperado tiene la sintaxis 2011-W50 donde 2011 es al año y 50 es el número de la semana.
<input type="week" name="semana" id="semana">
Tipo “month”
Similar al tipo de campo previo, éste es específico para seleccionar meses. Normalmente el valor esperado tiene la sintaxis año-mes.
<input type="month" name="mes" id="mes">
Tipo “time”
El tipo de campo time es similar a date, pero solo para la hora. Toma el formato de horas y minutos, pero su comportamiento depende de cada navegador en este momento.
Normalmente, el valor esperado tiene la sintaxis hora:minutos:segundos, pero también puede ser solo hora:minutos.
<input type="time" name="hora" id="hora">
Tipo “datetime”
El tipo de campo datetime es para ingresar fecha y hora completa, incluyendo la zona horaria.
<input type="datetime" name="fechahora" id="fechahora">
Tipo “datetime-local”
El tipo de campo datetime-local es como el tipo datetime sin la zona horaria.
<input type="datetime-local" name="tiempolocal" id="tiempolocal">
Tipo “color”
Además de los tipos de campo para fecha y hora existe otro tipo que provee una interfaz predefinida similar para seleccionar colores. Normalmente el valor esperado para este campo es un número hexadecimal, como #00FF00.
<input type="color" name="micolor" id="micolor">
Ninguna interfaz fue especificada como estándar en HTML5 para el tipo de campo color, pero es posible que una grilla con un conjunto básico de colores sea adoptada e incorporada en los navegadores.
Nuevos atributos
Algunos tipos de campo requieren de la ayuda de atributos, como los anteriormente estudiados min, max y step. Otros tipos de campo requieren la asistencia de atributos para mejorar su rendimiento o determinar su importancia en el proceso de validación. Ya vimos algunos de ellos, como novalidate para evitar que el formulario completo sea validado o formnovalidate para hacer lo mismo con elementos individuales.
El atributo autocomplete, también estudiado anteriormente, provee medidas de seguridad adicionales para el formulario completo o elementos individuales. Aunque útiles, estos atributos no son los únicos incorporados por HTML5. Es momento de estudiar el resto.
Atributo “placeholder”
Especialmente en tipos de campo search, pero también en entradas de texto normales, el atributo placeholder representa una sugerencia corta, una palabra o frase provista para ayudar al usuario a ingresar la información correcta. El valor de este atributo es presentado en pantalla por los navegadores dentro del campo, como una marca de agua que desaparece cuando el elemento es enfocado.
<input type="search" name="busqueda" id="busqueda" placeholder="escriba su búsqueda">
Atributo “required”
Este atributo booleano no dejará que el formulario sea enviado si el campo se encuentra vacío. Por ejemplo, cuando usamos el tipo email para recibir una dirección de email, el navegador comprueba si la entrada es un email válido o no, pero validará la entrada si el campo está vacío. Cuando el atributo required es incluido, la entrada será válida sólo si se cumplen las dos condiciones: que el campo no esté vacío y que el valor ingresado esté de acuerdo con los requisitos del tipo de campo.
<input type="email" name="miemail" id="miemail" required>
Atributo “multiple”
El atributo multiple es otro atributo booleano que puede ser usado en algunos tipos de campo (por ejemplo, email o file) para permitir el ingreso de entradas múltiples en el mismo campo.
Los valores insertados deben estar separados por coma para ser válidos.
<input type="email" name="miemail" id="miemail" multiple>
El código en el Listado 6-17 permite la inserción de múltiples valores separados por coma, y cada uno de ellos será validado por el navegador como una dirección de email.
Atributo “autofocus”
Esta es una función que muchos desarrolladores aplicaban anteriormente utilizando el método focus() de Javascript. Este método era efectivo pero forzaba el foco sobre el elemento seleccionado, incluso cuando el usuario ya se encontraba posicionado en otro diferente. Este comportamiento era irritante pero difícil de evitar hasta ahora.
El atributo autofocus enfocará la página web sobre el elemento seleccionado pero considerando la situación actual. No moverá el foco cuando ya haya sido establecido por el usuario sobre otro elemento.
<input type="search" name="busqueda" id="busqueda" autofocus>
Atributo “pattern”
El atributo pattern es para propósitos de validación. Usa expresiones regulares para personalizar reglas de validación. Algunos de los tipos de campo ya estudiados validan cadenas de texto específicas, pero no permiten hacer validaciones personalizadas, como por ejemplo un código postal que consiste en 5 números. No existe ningún tipo de campo predeterminado para esta clase de entrada.
El atributo pattern nos permite crear nuestro propio tipo de campo para controlar esta clase de valores no ordinarios. Puede incluso incluir un atributo title para personalizar mensajes de error.
<input pattern=”[0-9]{5}" name="codigopostal" id="codigopostal” title=”inserte los 5 números de su código postal”>
Atributo “form”
El atributo form es una adición útil que nos permite declarar elementos para un formulario fuera del ámbito de las etiquetas. Hasta ahora, para construir un formulario teníamos que escribir las etiquetas de apertura y cierre y luego declarar cada elemento del formulario entre ellas. En HTML5 podemos insertar los elementos en cualquier parte del código y luego hacer referencia al formulario que pertenecen usando su nombre y el atributo form:
<!DOCTYPE html> <html lang="es"> <head> <title>Formularios</title> </head> <body> <nav> <input type="search" name="busqueda" id="busqueda" form="formulario"> </nav> <section> <form name="formulario" id="formulario" method="get"> <input type="text" name="nombre" id="nombre"> <input type="submit" value="Enviar"> </form> </section> </body> </html>
Formularios Web con HTML5: Nuevos formularios
Ya hemos visto los nuevos tipos de campos disponibles en HTML5. Por lo tanto, es momento de estudiar los nuevos elementos HTML incorporados con la intención de mejorar o expandir las posibilidades de los formularios.
El elemento en sí
El elemento es un elemento específico de formularios usado para construir una lista de ítems que luego, con la ayuda del atributo list, será usada como sugerencia en un campo del formulario.
<datalist id="informacion"> <option value=”123123123” label=”Teléfono 1”> <option value=”456456456” label=”Teléfono 2”> </datalist>
Este elemento utiliza el elemento en su interior para crear la lista de datos a sugerir. Con la lista ya declarada, lo único que resta es referenciarla desde un elemento < input > usando el atributo list:
<input type="tel" name="telefono" id="telefono" list="informacion">
El elemento en el Listado 6-22 mostrará posibles valores para que el usuario elija.
El elemento < progress >
Este elemento no es específico de formularios, pero debido a que representa el progreso en la realización de una tarea, y usualmente estas tareas son comenzadas y procesadas a través de formularios, puede ser incluido dentro del grupo de elementos para formularios.
El elemento < progress > utiliza dos atributos para configurar su estado y límites. El atributo value indica qué parte de la tarea ya ha sido procesada, y max declara el valor a alcanzar para que la tarea se considere finalizada. Vamos a usar en futuros ejemplos.
El elemento < meter >
Similar a , el elemento es usado para mostrar una escala, pero no de progreso. Este elemento tiene la intención de representar una medida, como el tráfico del sitio web, por ejemplo.
El elemento cuenta con varios atributos asociados: min y max configuran los límites de la escala, value determina el valor medido, y low, high y optimum son usados para segmentar la escala en secciones diferenciadas y marcar la posición que es óptima.
El elemento < output >
Este elemento representa el resultado de un cálculo. Normalmente ayudará a mostrar los resultados del procesamiento de valores provistos por un formulario. El atributo for asocia el elemento < output > con el elemento fuente que participa del cálculo, pero este elemento deberá ser referenciado y modificado desde código Javascript. Su sintaxis es < output >valor.
API Forms
Seguramente no le sorprenderá saber que, al igual que cada uno de los aspectos de HTML5, los formularios HTML cuentan con su propia API para personalizar todos los aspectos de procesamiento y validación.
Existen diferentes formas de aprovechar el proceso de validación en HTML5. Podemos usar los tipos de campo para activar el proceso de validación por defecto (por ejemplo, email) o volver un tipo de campo regular como text (o cualquier otro) en un campo requerido usando el atributo required.
También podemos crear tipos de campo especiales usando pattern para personalizar requisitos de validación. Sin embargo, cuando se trata de aplicar mecanismos complejos de validación (por ejemplo, combinando campos o comprobando los resultados de un cálculo) deberemos recurrir a nuevos recursos provistos por esta API.