Formularios web

La Web 2.0 está completamente enfocada en el usuario. Y 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 por supuesto más atractivas. Los formularios web son la interface 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.

Elemento <form>

Los formularios en HTML 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.

Ejm 6.1

<!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 ejm 6.1 creamos una plantilla básica para formularios. Como se 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 viejo atributo ahora se ha vuelto estándar en esta especificación, puede tomar dos valores, on y off, su valor por defecto es on. Cuando es configurado como off los elementos <input> pertenecientes a este 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.

novalidate

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 se puede utiilzar el atributo novalidate. Para lograr lo mismo con los elementos <input> específicos existe otro atributo denominado formnovalidate, ambos atributos son booleanos, ningún valor tiene que ser especificado (si 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 seguro que el texto ingresado correspondía a un email válido. Ahora el navegador se hace cargo de ésto con el nuevo tipo denominado email:

<input type="email" name="miemail" id="miemail">

El texto insertado en el código de arriba será controlado por el navegador y validado como email, si la validación falla el formulario no será enviado.

Como cada navegador responderá a una entrada inválida, no está determinado en la especificación de HTML5, cada navegador dará formato de manera diferente al error de validación de formulario.

Tipo search

El tipo search (o búsqueda) no controla la entrada, es sólo una indicación para los navegadores. Al detectar este tipo de campo, algunos navegadores cambiarán el diseño del elemento.

<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="mirul" 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="mitlfo" id="mitlfo">

Tipo number

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 especifica el mínimo valor aceptado para el campo
  • max: el valor de este atributo especifica 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 declaras 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 vistos anteriormente para configurar los límites del rango. También puedes 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 atributo value y usar Javascript para mostrar el número seleccionado en pantalla como referencia.

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 interface no fue declarada en la especificación. Cada navegador provee su propia interface y a veces adaptan el diseño al dispositivo en el cual la aplicación está siendo ejecutada.

Tipo week

Este tipo de campo ofrece una interface 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 interface 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 interface 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.