10 sencillos consejos para mejorar tus formularios

Resumen: Crear un formulario puede ser tedios, sin embargo son una de las partes ms importantes
de una pgina web en la actualidad. Por ello estas sencillas pero buenas prcticas al momento de
estructurarlos, para lograr una mejor experiencia de usuario.

El crear un formulario puede ser una de las partes ms laboriosas y tediosas al momento de estar
desarrollando una pgina web, sin embargo esto no reduce en ningn sentido la relevancia e
importancia que tienen los formularios para el correcto funcionamiento de las pginas web en la
actualidad. Es por ello que debemos tener en cuenta estas sencillas pero buenas prcticas al momento
de estructurarlos, para lograr crear una mejor experiencia de usuario.
1. Nombra los campos del formulario con el atributo name
Esto es fundamental para facilitar el manejo de los datos con scripts, y para hacer uso de arreglos
globales con los mtodos $_POST y $_GET en PHP.
Muchas libreras de javascript basan su funcionamiento en este atributo, jQuery cuenta con varios
mtodos que realizan una accin en base al nombre, y si el campo no cuenta con este atributo no se
puede aplicar o detonar dicha accin.
De igual manera, aquellos que deciden utilizar PHP como lenguaje de programacin para desarrollar
los blog o webs que tienen en su hosting, podrn notar que para utilizar los mtodos $_POST o $_GET,
bsicos para acceder a los datos que fueron ingresados en un formulario, necesitan utilizar el valor
del atributo name dentro de dicho arreglo.
Trata de utilizar un nombre que este relacionado con los datos que introducirs en el campo, para que
sea ms sencillo recordar y utilizarlo en eventos posteriores.
<input type="text" name="telefono />
2. Usa un id distinto para cada campo del formulario
Te permitir manejar otros atributos y aplicar estilos de CSS, al mismo tiempo que servir para
diferenciar campos relativamente similares.
<input type="text" name="telefono id=tel />
3. Aplica el elemento label adecuadamente
Aplica el elemento label para escribir un texto relacionado con algn campo del formulario.
Usualmente para esta accin usamos etiquetas como span, las cuales a simple vista realizan la
misma funcin. No hay nada de malo en hacerlo, pero hay que recordar que la etiqueta label naci
exclusivamente con este propsito por lo que los estndares recomiendan su uso.
Gracias a este elemento podras agregar el atributo for que te permite vincular el texto con el campo,
algo que no se puede realizar al utilizar los elementos span o p.

El atributo for contendr como valor el id del campo con el que queremos vincular el texto, esto
permite que al dar clic sobre el texto el puntero del Mouse se coloque en el campo vinculado.
<label for=tel>Telfono</label><input type="text" name="telefono id=tel />
4. Utiliza tabindex para mejorar la accesibilidad
Utiliza el atributo tabindex para controlar de una mejor manera la accesibilidad a los campos de tu
formulario y establecer un orden de importancia entre ellos. Cada vez es ms comn que los visitantes
de un sitio hagan uso de la tecla Tab para desplazarse, ya que resulta ser ms rpido y sencillo que
utilizar el Mouse se ha convertido un mtodo bastante popular, por lo que es importante saber controlar
su comportamiento dentro de nuestro formulario para as establecer un orden de importancia entre los
campos.
Por defecto, la tecla Tab seguir el orden lineal en que se encuentran posicionados los elementos
dentro del cdigo fuente. Es decir, al momento de pulsar la tecla Tab dentro de un formulario, el
puntero se posicionar en el primer campo que encuentre dentro del HTML, al pulsarla de nuevo se
ir al segundo y as sucesivamente.
Si este no es el orden que deseas dar, puedes agregar de manera sencilla el atributo tabindex en la
etiqueta de tu campo, esto te permitir darle el orden que tu desees a los elementos. Dicho atributo
debe tener asignado un valor numrico, el cual representar su posicin, aquel que tenga el nmero
ms pequeo ser el primero en ser accedido por la tecla Tab.
Entonces, si yo escribo las siguientes lneas de cdigo:
<form>
<input type="text" name=1 id=1 tabindex="2" />
<input type="text" name=2 id=2 tabindex="4" />
<input type="text" name=3 id=3 tabindex="1" />
<input type="text" name=4 id=4 tabindex="3" />
</form>
Obtendr como resultado en mi navegador, un formulario con cuatro campos, de los cuales el primero
en ser accedido mediante la tecla Tab ser el que se encuentra escrito linealmente en la tercera
posicin, debido a que cuenta con el atributo tabindex = 1.
5. Emplea el atributo accesskey cuando sea necesario
Emplea el atributo accesskey cuando sea necesario y apropiado colocar el puntero en un campo
especifico mediante el teclado. Este atributo agrega la propiedad para acceder a un campo mediante
una combinacin de teclas, la cual estar conformada por la tecla Alt + el valor que se le da al atributo.
Es decir, si yo le doy el valor de b al atributo accesskey de mi etiqueta input, al apretar la combinacin
Alt+b, el puntero se colocar automticamente en ese campo.

Trata de elegir combinaciones que no se encuentren en uso por algn navegador, para evitar
confusiones y que se despliegue un men o se detone una accin, en vez de llevar el puntero al campo
que cuente con el atributo.
Al momento de codificar la propiedad queda de la siguiente manera:
<label>Buscar: </label><input type="text" name=buscar id=buscar accesskey="b"/>
Obteniendo como resultado un recuadro, en el cual podemos colocarnos con la clave de acceso
Alt+b.
No es recomendable hacerlo para todos los campos, trata de aplicarlo nicamente a elementos
importantes o claves, y si lo consideras necesario has de hacer saber al usuario que existen dichas
combinaciones disponibles.
6. Envuelve y segmenta tu formulario utilizando el elemento fieldset
Cuando manejamos formularios muy largos y/o conformados por varios elementos similares, es
recomendable dividirlos en sectores que estn compuestos por campos relacionados, para permitirle
al desarrollador llevar una mejor administracin de los elementos, y mostrar al usuario una cara ms
limpia y ordenada del formulario.
Por ejemplo, si tenemos un formulario que necesita recolectar informacin similar sobre dos
establecimientos diferentes, podemos usar el elemento fieldset para separar y delimitar los datos
relacionados a cada uno y para que as no sean confundidos por el usuario.
Para ello, podemos apoyarnos en el elemento legend, cuya funcin equivale a agregar un ttulo a
cada uno de los fieldset donde se utilice, quedando representado de la siguiente manera:
<fieldset>
<legend>Hotel 1</legend>
<label>Ciudad:</label><input type="text" name=C1/>
<label>Direccin:</label><input type="text" name=D1/>
<label>Telfono:</label><input type="text" name=T1/>
</fieldset>
<fieldset>
<legend>Hotel 2</legend>
<label>Ciudad:</label><input type="text" name=C2/>
<label>Direccin:</label><input type="text"name=D2 />
<label>Telfono:</label><input type="text" name=T2/>
</fieldset>

Con esto obtendremos dos recuadros, cada uno con sus respectivos campos y con el ttulo establecido
en la etiqueta legend.
7. Asigna de manera correcta todos los atributos de la etiqueta
Es un principio fundamental de los estndares de la W3C. Muchas veces por costumbre o comodidad
nos olvidamos de cerrar o declarar correctamente un atributo.
Esto pasa comnmente con atributos como selected, checked, readonly y disabled, los cuales son
incluidos en el elemento sin agregarles algn valor, y aunque de la forma incorrecta an hacen lo que
deberan de hacer, los estndares nos indican que esta forma de programar no es la correcta y
debemos agregar un valor que se encontrar entre comillas.
Incorrecto:
<input type="checkbox" checked disabled />
<input type=text readonly />
<option selected>
Correcto:
<input type="checkbox" checked=checked disabled=disabled />
<input type=text readonly=readonly />
<option selected=selected>
8. Para listas con muchos campos, ordena alfabticamente
Ordena los datos de tus listas por alfabeto y utiliza el agrupamiento de opciones con el elemento
optgroup para categorizar cuando tengas un select demasiado grande, esto te permitir agregar un
ttulo sobre cada grupo de opciones, las cuales dividirs en base al factor comn que desees.
Supongamos que tenemos una lista drop-down donde debemos incluir todos los pases del mundo,
el resultado es aproximadamente 198 opciones. Algo abrumador que puede hacerse accesible con la
simple funcin de ordenar los datos por alfabeto.
Al agrupar las opciones en base al continente que pertenecen, le facilitamos an ms las cosas al
usuario reduciendo el nmero de pases o regiones en donde tiene que buscar, y esto lo podemos
hacer de la siguiente manera:
<select>
<optgroup label="Amrica">
<option>Argentina</option>
<option>Canad</option>
<option>Chile</option>

<option>Estados Unidos</option>
<option>Mxico</option>
<option>Venezuela</option>
</optgroup>
<optgroup label="Europa">
<option>Albania</option>
<option>Chipre</option>
<option>Espaa</option>
<option>Francia</option>
<option>Inglaterra</option>
<option>Italia</option>
</optgroup>
</select>
Debemos incluir el atributo label, que tendr como valor el ttulo que deseamos poner en la parte
superior de cada grupo, sin este atributo no se visualizar la divisin y puede causar confusin para
los usuarios de tu sitio web.
9. Da un estilo adecuado a tu formulario
Cuando crees el diseo web de tu formulario, resalta las partes importantes y se creativo, no elijas
colores que puedan causar confusin o molestia, no elijas fondos oscuros con letras oscuras ni mucho
menos colores de letras claros con un fondo blanco. Presta atencin a losprincipios del diseo web.
10. Valida, sin esto tu formulario puede ser menos que intil
Al momento de validar tu web es recomendable hacerlo tanto del lado del cliente como del servidor,
para advertir de manera puntual al usuario que esta cometiendo un error y por si este se llega a filtrar
evitar en el servidor que el dato perdure.
Para la validacin en el lado del cliente, Javascript representa la opcin ms sencilla para llevarla a
cabo, pero siempre debemos asegurarnos de que nuestra aplicacin funciona sin l, ya que pueden
surgir casos donde el usuario lo tenga desactivado, y es donde la validacin del lado servidor entrar
para evitar que se ingresen datos no adecuados.
La validacin del lado del servidor variar segn el lenguaje que estemos utilizando (PHP, ASP, JSP,
otros), pero cualquiera que sea el que usemos se estructurar de manera sencilla, an ms si estamos
usando algn framework.

En muchos casos se puede recurrir a AJAX con el uso de jQuery, para conseguir una retroalimentacin
relativamente ms rpida por parte del servidor de hosting, para que el usuario reciba el mensaje del
error que pudo haber ocurrido.
Seguir el manual