Formularios 101: Estructura

  • Ene
  • 26

escribe tu comentario! 239 palabras - 1 hits

Estructura de un formulario de contacto

Haciendo un repaso de lo que he escrito en el weblog, me viene a la memoria una de las primeras entradas que publique, un formulario de contacto, la verdad es que mirándolo hoy veo los errores que cometí y la cantidad de cosas que se pueden mejorar.

Es por eso que me he decidido a escribir una serie de artículos en los que tratare de desglosar el proceso de creación de un formulario de contacto que se pueda utilizar en cualquier pagina web.

En este primer articulo quisiera tratar la estructura y presentación del formulario, para la maquetacion utilizaremos xhtml estricto y para la presentación css y algo de javascript ayudados por la libreria jquery.

  1.  
  2.     <form action="" method="" id="" class="">
  3.         <input type="text" id="" class="" name="" value="" />
  4.         <input type="text" id="" class="" name="" value="" />
  5.         <textarea id="" class="" name=""></textarea>
  6.         <input type="submit" id="" class="" value="" />
  7.     </form>
  8.  

Esta estructura básica nos servirá para definir los campos a utilizar en el formulario, aunque estamos utilizando etiquetas xhtml por definición, este código aun no cumple con los estándares del w3c que indican que los campos han de estar dentro de un elemento de bloque.

Para este ejercicio utilizaremos listas ordenadas dentro de un fieldset, con lo que la estructura final quedaria asi:

  1.  
  2.         <form action="" method="" id="cform" class="cmxform">
  3.             <input type="hidden" id="cvalid" name="cvalid" value="true" />
  4.             <fieldset id="contact-data">
  5.                 <legend>Datos de contacto</legend>
  6.                 <ol>
  7.                     <li>
  8.                       <label for="cname">Nombre <em>*</em></label> <input type="text" id="cname" class="txt" name="cname" value="Tu Nombre" />
  9.                     </li>
  10.                     <li>
  11.                       <label for="cmail">Correo <em>*</em></label> <input type="text" id="cmail" class="txt" name="cmail" value="Tu Email" />
  12.                     </li>
  13.                 </ol>
  14.             </fieldset>
  15.             <fieldset id="contact-text">
  16.                 <legend>Cuerpo del mensaje</legend>
  17.                 <ol>
  18.                     <li>
  19.                       <label for="ctext">Mensaje <em>*</em></label> <textarea id="ctext" class="txt" name="ctext"></textarea>
  20.                     </li>
  21.                 </ol>
  22.             </fieldset>
  23.             <p>
  24.                <input type="submit" id="cbutton" class="btn" value="Enviar" />
  25.             </p>
  26.         </form>
  27.  

Con esto ya tenemos definida la estructura ahora vamos a por la presentación, me basare en una técnica publicada en A List Apart, podéis aprender mas sobre ella en Prettier Accessible Forms.

En este enlace podeis ver el ejemplo completo,

ningún comentario por el momento

Escribe tu comentario

Puedes utilizar este formulario para escribir tu opinion sobre esta entrada, no existe ningun tipo de limitacion a la hora de enviar opiniones, tan solo sigue unas reglas basicas de cortesia y todos estaremos mas contentos.

Puedes identificarte utilizando OpenID, solo tienes que introducir tu URL OpenID en el siguiente campo y pulsar el boton de validar.





Instrucciones para los comentarios

El simbolo * indica que se trata de un campo obligatorio.

Este sitio usa Markdown junto con Smartypants para educar los textos, tambien esta disponible para los comentarios.

A continuación os muestro algunas de las equivalencias:

  • [enlace de ejemplo](http://example.com/) resulta enlace de ejemplo.
  • **Texto en Negrita**
  • _Italica_
  • > blockquote
  • > > nested blockquote
  • * Esto es un elemento de una lista desordenada (ul)
  • 1. Esto es un elemento de una lista ordenada (ol)

MC Puedes seguir las respuestas a tus comentarios con MyComments.

↑