Me he dado cuenta de que tengo muchos artículos sobre cómo enviar y validar un formulario de contacto, pero en ninguno explico como se debe crear la estructura de éste. Ya sabéis, la parte en html.
Así que voy ha hacerlo aquí.
La etiqueta para indicar que vamos a crear un formulario es <form> y debe llevar los siguientes atributos:
name: para nombrarlo, identificarlo
method: indica el metodo elegido para enviar los datos, puede ser get (a través de la url) o post (de manera interna).
action: indica la ruta del archivo que va a recibir los datos enviados
enctype: indica el tipo de contenido, la añadimos solamente si trabajamos con recogida de archivos
<form name="contacto" method="post" action="#"><!-- contenido del formulario --> </form>
Dependiendo de si nuestro formulario tiene uno o varios temas, deberemos añadir la etiqueta <fieldset> para clasificar los apartados, y a su vez etiquetas <legend> para añadirle titulos a esos apartados.
Por ejemplo, un formulario de registro que pida información personal, información profesional e información de contacto.
<fieldset>
<legend>Informacion personal</legend>
<!-- aqui irian los campos -->
</fieldset>
<fieldset>
<legend>Informacion profesional</legend>
<!-- aqui irian los campos -->
</fieldset>
<fieldset>
<legend>Informacion de contacto</legend>
<!-- aqui irian los campos -->
</fieldset>
Como último paso de la estructura de nuestro formulario, pasamos a las etiquetas para relacionar los campos, cada campo debe tener una etiqueta <label> asociada con un texto de información sobre éste.
Para relacionar una etiqueta con un campo, debemos añadir al campo el atributo id con un nombre y a la etiqueta el atributo for con el nombre dado al campo a relacionar.
<label for="nombre">Nombre:</label> <input type="text" id="nombre" name="nombre" />
En los campos del tipo input, textarea, select la etiqueta es recomendable que aparezca a la izquierda, en el resto (checkbox, por ejemplo) a la derecha. En los botones (submit, reset) no es obligatorio poner una etiqueta, de hecho es mejor no ponerlas.
Una vez aprendido esto ya podemos empezar a rellenar nuestro formulario, los campos mas utilizados son: campos de texto (1), casillas de verificación (2), botones de opción (3), áreas de texto (4), desplegables (5), campo de imagen (6), botón de reinicio del formulario (7), botón de envio del formulario (8).
<input type="text" id="" name="" />
<input name="" type="checkbox" id="" value="" />
<input name="" type="radio" id="" value="" />
<textarea name="" id=""></textarea>
<select name="" id=""><option value="">A<option><option value="">B<option></select>
<input type="image" name="" id="" />
<input type="reset" name="" value="Borrar" />
<input type="submit" name="" value="Enviar" />
Para conseguir un formulario un poco mas accesible, debemos colocar en todos los campos, los siguientes atributos:
accesskey: Asocia una tecla a un campo de nuestro formulario, por lo que podremos acceder a ese campo de manera más fácil / rápida.
tabindex: indica el orden por el que se desplazará el usuario al pulsar la tecla tabulación de su teclado.
Acceskey solo puede ser asociado en los campos: button, input, label, legend y textarea, para el resto de campos deberemos de agregar este atributo en su etiqueta <label>.
<input type="text" id="nombre" name="nombre" accesskey="n" tabindex="1" />
Y juntando todos los pasos, ya tenemos un formulario bien estructurado, validado con los estándares w3c y lo más importante, accesible.
Puedes ver un ejemplo online.
Podría contaros un poquito más, como que si tenemos muchas opciones en un select podemos agruparlas segun categorias con la etiqueta <optgroup>, pero cómo sé que la mayoría de vosotros ya estáis aburrido (o directamente no habéis llegado hasta aqui xD), doy por finalizado este artículo 
Mas adelante explicaré un poquito como darle estilo (css) a los formularios, sin tener que usar etiquetas externas a las explicadas aquí, usease, sin tener que añadir tablas, ni párrafos, etc.
Twittea esto Guardalo en Delicious Compartelo en Facebook
