Guía para diseñadores gráficos

Guía para diseñadores gráficos > Presentación de los contenidos > Formularios web

Presentación de los contenidos

Formularios web

Los formularios web se utilizan para interactuar con el usuario de un modo más personalizado y obtener información proporcionada por él mismo. Un formulario siempre capta la información y la envía a un programa web que la trata, añadiéndola a una base de datos, enviando un correo electrónico o presentando nueva información al usuario en función de la información introducida.

Un formulario web puede estar compuesto por los siguientes elementos:

  • Campo de texto: una línea para introducir texto a la cual se puede especificar longitud de caracteres a presentar, longitud máxima de caracteres a introducir, texto que aparece al inicio (normalmente se presenta en blanco). Se puede definir como contraseña, de modo que el texto introducido no se vea.

  • Área de texto: diversas líneas en las que se puede introducir texto. Se puede especificar longitud en caracteres de la línea, número de caracteres por línea, texto o valor inicial. Opcionalmente el campo de texto se puede presentar con opciones que permitan diseñar el formato de la tipografía, insertar imágenes, presentar enlaces… de modo que el programa que capte la información la pueda tratar como codificación html o web (ejemplo editor html area: http://www.dynarch.com /projects/htmlarea/)

  • Botón: Se utiliza para enviar la información o para realizar otras opciones (por ejemplo, poner en blanco todos los campos introducidos, comprobar la información como paso previo…). Por defecto se le define el nombre a presentar y la acción a realizar.

  • Casilla de verificación: Pequeño recuadro que se puede marcar o desmarcar.

  • Botón de opción: Pequeño círculo que se puede marcar o desmarcar (siempre tiene que existir un circulo de la lista marcado).

         

  • Lista / menú: Listado de opciones que se pueden marcar (una o varias). El listado puede estar desplegado, mostrando todas las opciones o se puede desplegar cuando el usuario clique sobre el listado.

  • Campo de archivo o imagen: Similar al campo de texto, pero tiene un botón al lado para que el usuario pueda explorar sus directorios y seleccionar un archivo o imagen a enviar. Se pueden definir los mismos valores que en el campo de texto y botón.

      

  • Campo oculto: A veces es necesario enviar información que el usuario no necesita ver, junto a la que introduzca el mismo. En este caso se utilizan campos ocultos, que lógicamente no se tienen que diseñar.

Interesante artículo sobre los aspectos a tener en cuenta en el diseño de formularios web:
http://www.javajan.com/news.php?id=307-guia

Diseño de los elementos de un formulario

os distintos elementos de un formulario mencionados tienen un diseño por defecto que muchas veces no encajará con diseños elaborados de una página web. Así pues, cada uno de los elementos se puede diseñar como si se tratara de un bloque (márgenes, bordes, colores de fondo,…) y el texto se puede presentar con los mismos efectos definidos en la tipografía.

 

Ejemplos de diseño aplicado a formularios:


http://www.esteller.com


http://grooveshark.com/#!/signup


http://www.femtalent.cat/registrarse.php


http://socialsnack.com/es


http://pixelightcreative.com

Formularios web >>
JAVAJAN [somos maquetadores y programadores web]. Webs for designers & you. www.javajan.com © 2012 | Avís legal
TwitterFacebookRSSe-mail