Logo de Mosaic
El texto central de HTML
Formularios HTML: conceptos básicos

20. Formularios HTML: conceptos básicos

Jenifer Hanen. 8 de julio del 2008. Publicado en: estructura, enviar, semántico, entrada, accesible

Todo el mundo ha visto un formulario. Todo el mundo ha utilizado alguno. Pero ¿habéis codificado alguno?

Un formulario en línea es cualquier área en la que se puede introducir información en una página web; por ejemplo, introduciendo texto o números en un cuadro de texto, marcando una casilla de selección, seleccionando un botón de opción o eligiendo una opción de una lista. Entonces, el formulario se envía al sitio web pulsando el botón de enviar.

En la web encontraréis formularios por todas partes: para introducir nombres de usuario y contraseñas en una pantalla de acceso, para hacer comentarios en blogs, para escribir vuestro perfil en una red social o para especificar la información de facturación en un sitio de compras.

Crear un formulario es muy sencillo, pero ¿qué hay que saber sobre los formularios para que sean acordes con los estándares de la web? De momento, si habéis ido siguiendo el currículo de estándares web de Opera, probablemente ya tendréis muy claro que es muy importante seguir siempre estos estándares. El código necesario para crear un formulario accesible y conforme con los estándares no supone más trabajo que la creación de un formulario chapucero.

Así pues, empezaremos con el formulario más básico y sencillo que podríamos utilizar y lo iremos complicando; en este apartado explicaremos todos los conceptos básicos que hay que conocer para crear unas estructuras de formularios elegantes y accesibles con HTML.

Los contenidos de este apartado son los siguientes:

20.1. Paso uno: el código básico

Empezaremos con un formulario de comentario muy muy básico, el tipo de formulario que utilizaríais en un sitio web para permitir que la gente pueda dar su opinión sobre algo como un artículo que hayáis escrito, o para permitir que pueda enviaros un mensaje sin saber vuestra dirección electrónica. El código es el siguiente:

<form>
Name: <input type="text" name="name" id="name" value="" />
Email: <input type="text" name="email" id="email" value="" />
Comments: <textarea name="comments" id="comments" cols="25" rows="3"></textarea>
<input type="submit" value="submit" />
</form>

Si introducís este código en un documento HTML y abrís este documento en un navegador, lo que veréis es lo que aparece en la figura 1.

El primer exemple de formulari

Figura 1. El primer ejemplo de formulario básico.

Archivo fuente: "step-1-form.html"

Probadlo; introducid este código en vuestro documento HTML de muestra y cargadlo en un navegador, o id a la página del primer ejemplo de formulario básico para navegar hasta el formulario en otra página. Intentad jugar un poco con los diferentes controles del formulario para ver todo lo que podéis hacer.

Si leéis el código, veréis una etiqueta <form> de apertura, una etiqueta </form> de cierre y algunas otras cosas entre estas dos. El elemento contiene dos campos de texto en los que el lector de la página puede introducir su nombre y su dirección electrónica, y un área de texto que se puede llenar con un comentario para enviarlo al propietario del sitio web.

¿Qué tenemos, pues, aquí?

20.2. Paso dos: añadir estructura y comportamiento

Así pues, habéis hecho clic en el enlace del formulario #1 anterior, lo habéis rellenado y habéis hecho clic en el botón "Enviar"; ¿por qué no ha pasado nada? ¿Y por qué tiene tan mal aspecto y aparece todo en una línea? La respuesta es que todavía no lo habéis estructurado ni habéis definido ningún lugar donde enviar los datos que recoge el formulario.

Volvamos a la mesa de dibujo para crear un formulario nuevo:

<form id="contact-form" action="script.php" method="post">
   <input type="hidden" name="redirect" value="http://www.opera.com" />
   <ul>
      <li>
         <label for="name">Name:</label>
         <input type="text" name="name" id="name" value="" />
      </li>
      <li>
         <label for="email">Email:</label>
         <input type="text" name="email" id="email" value="" />
      </li>
      <li>
         <label for="comments">Comments:</label>
         <textarea name="comments" id="comments" cols="25" rows="3"></textarea>
      </li>
      <li>
         <input type="submit" value="submit" />
         <input type="reset" value="reset" />
      </li>
   </ul>
</form>

Cuando lo abrís en un navegador, este formulario tiene el aspecto que se puede ver en la figura 2:

El segundo ejemplo de formulario

Figura 2. El segundo ejemplo de formulario; su aspecto es mejor, pero todavía no es perfecto.

Podéis jugar con este formulario mejorado en: "step-2-form.html"

Aquí hemos añadido algunas cosas al formulario básico. Veámoslo para saber qué es lo que hemos hecho:

El segundo formulario tiene un aspecto un poco mejor, pero todavía lo podemos seguir mejorando un poco más. Ya ha llegado el momento de añadir otros detalles antes de aplicar estilos.

20.3. Paso tres: añadir semántica, estilo y un poco más de estructura

Ahora terminaremos lo que hemos empezado al principio de este apartado con la versión definitiva de nuestro formulario de ejemplo:

<form id="contact-form" action="script.php" method="post"> 
   <fieldset>
      <legend>Contact Us:</legend>
      <ul>
         <li>
            <label for="name">Name:</label>
            <input type="text" name="name" id="name" value="" />
         </li>
         <li>
            <label for="email">Email:</label>
            <input type="text" name="email" id="email" value="" />
         </li>
         <li>
            <label for="comments">Comments:</label>
            <textarea name="comments" id="comments" cols="25" rows="3"></textarea>
         </li>
         <li>
            <label for="mailing-list">Would you like to sign up for our mailing
             list?</label>
            <input type="checkbox" checked="checked" id="mailing-list" value="Yes,
             sign me up!" />
         </li>
         <li>
            <input type="submit" value="submit" />
            <input type="reset" value="reset" />
         </li>
      </ul>
   </fieldset>
</form>

Cuando se muestra en un navegador, este formulario tiene el aspecto que se puede ver en la figura 3:

El tercer y definitivo ejemplo de formulario

Figura 3. El formulario de ejemplo definitivo en todo su esplendor.

Podéis ver la versión real de este formulario en un navegador y jugar con él en: "step-3-form".

Los dos últimos elementos principales que hemos añadido a este formulario son fieldset (conjunto de campos) y legend (leyenda). Ninguno de ellos es obligatorio, pero son muy útiles para formularios más complejos y para la presentación.

El elemento fieldset os permite organizar el formulario en módulos semánticos. En un formulario más complejo, podríais por ejemplo utilizar diferentes fieldset para contener información de la dirección, información de facturación, información sobre las preferencias del cliente, etc. El elemento legend permite dar un nombre a cada uno de las secciones fieldset.

También hemos aplicado un poco de CSS a este formulario para dar estilo al etiquetado estructural. Esto se aplica al tercer formulario de ejemplo con una hoja de estilos externa; para ver los estilos, id a la página de ejemplo. Las dos cosas más importantes que queríamos que hiciera el CSS básico eran añadir márgenes para alinear las etiquetas y los cuadros de introducción de datos, y eliminar los picos de la lista desordenada. Éste es el CSS que reside en la hoja de estilos externa:

#contact-form fieldset {width:40%;}
#contact-form li {margin:10px; list-style: none;}
#contact-form input  {margin-left:45px; text-align: left;}
#contact-form textarea {margin-left:10px; text-align: left;}

¿Qué hace este CSS? La primera línea define el estilo del borde del conjunto de campos para que no ocupe toda la página; también podéis definir que no haya ningún borde con {border: none;} enen caso de que no queráis ninguno. La segunda línea añade un margen de 10 píxeles a los elementos li para poner un poco de espacio visual entre cada uno de los elementos de la lista. Las líneas tercera y cuarta definen un margen izquierdo en los elementos input y textarea para que no queden a la misma altura que las etiquetas y se alineen adecuadamente. Si queréis más información sobre los estilos de un formulario, podéis consultar el apartado sobre los estilos de los formularios de este currículo de estándares web o el artículo de Nick Rigby en A List Apart, "Prettier Accessible Forms". También podréis encontrar más información sobre los márgenes y los bordes más adelante en este curso.

Resumen

En este apartado hemos explicado los tres pasos más básicos para crear un formulario conforme a los estándares web. El mundo de los formularios incluye muchas más cosas que no hemos explicado aquí y que, en caso de que queráis, deberéis explorar por vuestra cuenta. Existen las teclas de acceso, las casillas de selección y los botones de opción, los botones de envío y reinicialización personalizados y los cuadros de selección.

En el formulario anterior del paso tres hemos añadido una casilla de selección (checkbox) con el fin de mostrar que se pueden utilizar los atributos adicionales del elemento input para recoger información que queda más allá de la introducción de texto en una única línea o de la introducción de texto en un área de múltiples líneas. Los valores de los atributos de botón checkbox y radio se pueden utilizar para añadir la posibilidad de hacer preguntas cortas y dar al lector una lista de opciones entre las que podrá elegir (las casillas de selección permiten seleccionar varias opciones, mientras que los botones de opción sólo permiten seleccionar una). Los botones de opción pueden ser muy útiles en un formulario de encuesta.

El elemento select, que tampoco se ha tratado en este apartado, se puede utilizar para un menú desplegable con opciones (por ejemplo, una lista de países o de estados/provincias).

Preguntas de repaso

Ya es hora de que escribáis el código de vuestro formulario de contacto.

  1. Cread un formulario de contacto sencillo que pida al usuario su nombre, su dirección electrónica y un comentario.

  2. Añadid una casilla de selección que pida al lector si se quiere unir a vuestra lista de correo.

  3. Utilizad CSS para aplicar estilos al formulario: definid una anchura para el formulario, alinead las etiquetas a la izquierda, poned un color de fondo en la página, etc.

Lecturas complementarias

Cameron Adams, "Accessible, stylish form layout".
http://www.themaninblue.com/writing/perspective/2004/03/24/

Brian Crescimanno, "Sensible Forms: A Form Usability Checklist".
http://www.alistapart.com/articles/sensibleforms/

Simon Willison, "Easier form validation with PHP".
http://simonwillison.net/2003/Jun/17/theHolyGrail/

Las especificaciones. No cualquier especificación antigua, sino la especificación W3C.

Si sufrís de insomnio y un vaso de leche caliente o contar ovejas no os solucionan el problema, podéis leer las especificaciones completas de HTML en w3.org. Es mucho más barato y más efectivo que cualquier otro remedio. Que [insertad aquí el nombre de la deidad] bendiga a los ingenieros de todo el mundo.

Los amables integrantes de W3.org han definido las diferencias entre "GET" y "POST" y cuándo se deben utilizar:

Y todo el agradecimiento del mundo para el Sr. Rigby:
http://alistapart.com/articles/prettyaccessibleforms

Logo Creative Commons
Los contenidos recogidos en este artículo están sujetos a una licencia Creative Commons
Reconocimiento, No comercial - Compartir bajo la misma licencia 3.0 No adaptada
.
: Ir al índice :