10 sencillos consejos para mejorar tus formularios

El crear un formulario puede ser una de las partes más laboriosas y tediosas al momento de estar desarrollando una página web, sin embargo esto no reduce en ningún sentido la relevancia e importancia que tienen los formularios para el correcto funcionamiento de las páginas web en la actualidad. Es por ello que debemos tener en cuenta estas sencillas pero buenas prácticas 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 métodos $_POST y $_GET en PHP.

Muchas librerías de javascript basan su funcionamiento en este atributo, jQuery cuenta con varios métodos que realizan una acción en base al nombre, y si el campo no cuenta con este atributo no se puede aplicar o detonar dicha acción.

De igual manera, aquellos que deciden utilizar PHP como lenguaje de programación para desarrollar los blog o webs que tienen en su hosting, podrán notar que para utilizar los métodos $_POST o $_GET, básicos 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 introducirás en el campo, para que sea más 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 algún campo del formulario. Usualmente para esta acción usamos etiquetas como “span”, las cuales a simple vista realizan la misma función. No hay nada de malo en hacerlo, pero hay que recordar que la etiqueta “label” nació exclusivamente con este propósito por lo que los estándares recomiendan su uso.

Gracias a este elemento podrías 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”>Teléfono</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 más común que los visitantes de un sitio hagan uso de la tecla “Tab” para desplazarse, ya que resulta ser más rápido y sencillo que utilizar el Mouse se ha convertido un método 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 código 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 numérico, el cual representará su posición, aquel que tenga el número más pequeño será el primero en ser accedido por la tecla “Tab”.

Entonces, si yo escribo las siguientes líneas de código:

<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 posición, 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 combinación 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 combinación Alt+b, el puntero se colocará automáticamente en ese campo.

Trata de elegir combinaciones que no se encuentren en uso por algún navegador, para evitar confusiones y que se despliegue un menú o se detone una acción, 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 estén compuestos por campos relacionados, para permitirle al desarrollador llevar una mejor administración de los elementos, y mostrar al usuario una cara más limpia y ordenada del formulario.

Por ejemplo, si tenemos un formulario que necesita recolectar información 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 función equivale a agregar un título 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>Dirección:</label><input type="text" name=”D1”/>
<label>Teléfono:</label><input type="text" name=”T1”/>
</fieldset>
<fieldset>
<legend>Hotel 2</legend>
<label>Ciudad:</label><input type="text" name=”C2”/>
<label>Dirección:</label><input type="text"name=”D2” />
<label>Teléfono:</label><input type="text" name=”T2”/>
</fieldset>

Con esto obtendremos dos recuadros, cada uno con sus respectivos campos y con el título establecido en la etiqueta legend.

7. Asigna de manera correcta todos los atributos de la etiqueta

Es un principio fundamental de los estándares de la W3C. Muchas veces por costumbre o comodidad nos olvidamos de cerrar o declarar correctamente un atributo.

Esto pasa comúnmente con atributos como selected, checked, readonly y disabled, los cuales son incluidos en el elemento sin agregarles algún valor, y aunque de la forma incorrecta aún hacen lo que deberían de hacer, los estándares 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 alfabéticamente

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 título sobre cada grupo de opciones, las cuales dividirás en base al factor común que desees.

Supongamos que tenemos una lista “drop-down” donde debemos incluir todos los países del mundo, el resultado es aproximadamente 198 opciones. Algo abrumador que puede hacerse accesible con la simple función de ordenar los datos por alfabeto.

Al agrupar las opciones en base al continente que pertenecen, le facilitamos aún más las cosas al usuario reduciendo el número de países o regiones en donde tiene que buscar, y esto lo podemos hacer de la siguiente manera:

<select>
<optgroup label="América">
<option>Argentina</option>
<option>Canadá</option>
<option>Chile</option>
<option>Estados Unidos</option>
<option>México</option>
<option>Venezuela</option>
</optgroup>
<optgroup label="Europa">
<option>Albania</option>
<option>Chipre</option>
<option>España</option>
<option>Francia</option>
<option>Inglaterra</option>
<option>Italia</option>
</optgroup>
</select>

Debemos incluir el atributo “label”, que tendrá como valor el título que deseamos poner en la parte superior de cada grupo, sin este atributo no se visualizará la división y puede causar confusión para los usuarios de tu sitio web.

9. Da un estilo adecuado a tu formulario

Cuando crees el diseño web de tu formulario, resalta las partes importantes y se creativo, no elijas colores que puedan causar confusión o molestia, no elijas fondos oscuros con letras oscuras ni mucho menos colores de letras claros con un fondo blanco. Presta atención a los principios del diseño web.

10. Valida, sin esto tu formulario puede ser menos que inútil

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 validación en el lado del cliente, Javascript representa la opción más sencilla para llevarla a cabo, pero siempre debemos asegurarnos de que nuestra aplicación funciona sin él, ya que pueden surgir casos donde el usuario lo tenga desactivado, y es donde la validación del lado servidor entrará para evitar que se ingresen datos no adecuados.

La validación del lado del servidor variará según el lenguaje que estemos utilizando (PHP, ASP, JSP, otros), pero cualquiera que sea el que usemos se estructurará de manera sencilla, aún más si estamos usando algún framework.

En muchos casos se puede recurrir a AJAX con el uso de jQuery, para conseguir una retroalimentación relativamente más rápida por parte del servidor de hosting, para que el usuario reciba el mensaje del error que pudo haber ocurrido.