Formularios Web

Los formularios web son la interface ms importante de todas, permiten a los usuarios insertar datos, tomar decisiones, comunicar informacin y cambiar el comportamiento de una aplicacin. Para

obtener informacin precisa a travs del formulario, ste debe ser obvio e inequvoco, de modo que el

usuario no tenga dudas sobre lo que tiene que escribir en cada campo.

PRINCIPIOS BSICOS SOBRE FORMULARIOS WEB.

Reducir el esfuerzo fsico.

A la mayora de los usuarios no les gusta escribir con el teclado ms de lo necesario.

No pedir la misma informacin ms de una vez.

Si es posible recordar los datos de las otras visitas de usuario a nuestro sitio.

No pedirle al usuario capturar datos derivados como la edad, en su lugar pedir la fecha de nacimiento.

Reducir el esfuerzo cognitivo del usuario.

Disear formularios sencillos y fciles de comprender.

Evitar pedir informacin que parezca innecesaria.

A los usuarios les molestan las preguntas que consideran irrelevantes para sus objetivos.

Cuidar la forma en la que pedimos datos obligatorios.

Mostrar parte del contenido al que se tendr acceso si se registra, puede ayudar a que el usuario se sienta intrigado y est ms dispuesto a proporcionar informacin.

Si parte de la informacin que se pide es obligatoria, mientras que otros campos son opcionales utilizar alguna pista visual para diferenciar unos de otros.

CONTROLES DE FORMULARIO.

En general, los distintos elementos del formulario, como las reas para introducir texto o las casillas de

verificacin, reciben el nombre de controles, controles del formulario o widgets.

CONTROLES DE FORMULARIO.

Despus de haber decidido que controles vamos a utilizar en el formulario, podemos empezar a implementarlo mediante HTML, sin embargo necesitamos estudiar algunos conceptos sobre diseo de pginas especficas de

formularios.

Mantener la coherencia visual.

El formulario de la izquierda carece de coherencia visual, porque los extremos derechos de los campos no estn alineados unos con otros. El formulario de la izquierda es mucho ms agradable visualmente, porque

los campos son de la misma longitud.

Controlar el foco del cursor y el orden de tabulacin.

El foco hace referencia al control en el que se encuentra el cursor, para especificar un orden de tabulacin

personalizado podemos asignar un valor al atributo tabindex a cada elemento del formulario afectado, de la

siguiente forma:

Mostrar los campos en el orden correcto.

Agrupar los controles por categoras.

Esto puede ayudar a clarificar la estructura del formulario, sobre todo en los paneles de control largos. Para

ello podemos utilizar bordes, la etiqueta o las diferentes caractersticas de las fuentes, como el

tamao y el color.

Siempre dar retroalimentacin.

Los usuarios agradecen que les proporcionemos informacin que les indique que van por buen camino o que

les diga que se ha encontrado un fallo. De este modo, el usuario podr asegurarse de que el sistema ha

recibido correctamente los datos, y cuando se produce un fallo, la informacin de errores puede notificrselo

al usuario lo antes posible, y pueden ser fcilmente corregidos. Hay dos tipos de generales de informacin: modal y no modal.

Mejorar el aspecto visual de los controles.

Formularios en HTML5.

HTML5 vuelve a estas funciones estndar agregando nuevos atributos, elementos y una API completa. Ahora la capacidad de procesamiento de informacin insertada en formularios en tiempo real ha sido

incorporada en los navegadores y completamente estandarizada.

El elemento .

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.

Existen nuevos atributos para el elemento :

autocomplete Este es un viejo atributo que se ha vuelto estndar en esta especificacin. Puede tomar dos valores: on y off. El valor por defecto es on. Cuando es configurado como off los

elementos pertenecientes a ese formulario tendrn la funcin de autocompletar desactivada.

Puede ser implementado en el elemento o en cualquier elemento

independientemente.

novalidate Una de las caractersticas de formularios en HTML5 es la capacidad propia de validacin. Los formularios son automticamente validados. Para evitar este comportamiento, podemos usar

el atributo novalidate. Para lograr lo mismo para elementos especficos, existe otro

atributo llamado formnovalidate.

A continuacin elaboraremos una nueva pgina en HTML5 en la que se muestra el uso de cada uno de estos

nuevos elementos, al archivo podemos llamarle Formularios.html, recuerden probar en FireFox y Crome.

Uso de Formularios HTML5

Formularios en HTML5

Campo de texto.

El atributo placeholder representa una sugerencia corta, una palabra o

frase provista para ayudar al usuario a ingresar la informacin

correcta.

El atributo required no dejar que el formulario sea enviado si el campo

se encuentra vaco.

Nombre:

Campo tipo E-Mail: Permite capturar una direccin de e-mail vlida.

E-Mail:

Campo tipo Search: Este campo no controla la entrada, es solo

una indicacin para los navegadores.

Bsqueda:

Campo tipo Url: Permite capturar una direccin URL vlida.

URL:

Campo tipo Telfono: Este campo es para nmeros telefnicos.

Este campo no controla la entrada, es solo una indicacin para los

navegadores.

Telfono:

Campo tipo Nmero: Este campo solo es vlido cuando recibe una

entrada numrica.

Nmero:

Campo tipo Range o Rango: Este nuevo control le permite al usuario

seleccionar un valor a partir de una serie de valores o rango.

Nmero:

Campo tipo Fecha

Fecha:

Campo tipo Week

Semana:

Campo tipo Month

Mes:

Campo tipo Time

Hora:

Campo tipo Campo DateTime

Fecha - Hora:

Campo tipo Campo DateTime-Local

Fecha - Hora Local:

Campo tipo Color: Campo que permite elegir un color.

Color: