7/17/2019 Mejorar Tus Formularios

http://slidepdf.com/reader/full/mejorar-tus-formularios 1/6

10 sencillos consejos para mejorar tus formularios

Resumen: Crear un formulario puede ser tedios, sin embargo son una de las partes más importantesde una página web en la actualidad. Por ello estas sencillas pero buenas prácticas al momento de

estructurarlos, para lograr una mejor experiencia de usuario.

El crear un formulario puede ser una de las partes más laboriosas y tediosas al momento de estardesarrollando una página web,  sin embargo esto no reduce en ningún sentido la relevancia eimportancia 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 arreglosglobales 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 desarrollarlos 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 valordel 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”. 

7/17/2019 Mejorar Tus Formularios

http://slidepdf.com/reader/full/mejorar-tus-formularios 2/6

El atributo “for” contendrá como valor el “id” del campo con el que queremos vincular el texto, estopermite 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 visitantesde 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, elpuntero 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 primeroen 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.

7/17/2019 Mejorar Tus Formularios

http://slidepdf.com/reader/full/mejorar-tus-formularios 3/6

Trata de elegir combinaciones que no se encuentren en uso por algún navegador, para evitarconfusiones 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 elementosimportantes 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 permitirleal 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 dosestablecimientos diferentes, podemos usar el elemento fieldset para separar y delimitar los datosrelacionados 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>

7/17/2019 Mejorar Tus Formularios

http://slidepdf.com/reader/full/mejorar-tus-formularios 4/6

Con esto obtendremos dos recuadros, cada uno con sus respectivos campos y con el título establecidoen 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 sonincluidos en el elemento sin agregarles algún valor, y aunque de la forma incorrecta aún hacen lo quedeberí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 alusuario 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>

7/17/2019 Mejorar Tus Formularios

http://slidepdf.com/reader/full/mejorar-tus-formularios 5/6

<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 elijascolores que puedan causar confusión o molestia, no elijas fondos oscuros con letras oscuras ni muchomenos colores de letras claros con un fondo blanco. Presta atención a losprincipios 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 filtrarevitar 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.

7/17/2019 Mejorar Tus Formularios

http://slidepdf.com/reader/full/mejorar-tus-formularios 6/6

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

error que pudo haber ocurrido.

Seguir el manual