Los controles interactivos de los formularios se pueden organizar. Si bien es cierto que con los elementos <form> y <input> puede organizarse la mayoría de formularios, también lo es que, para formularios más complejos, puede ser necesaria una forma de estructura que mejore la interfaz.
La forma de organizar y/o clasificar los campos de un formulario es muy subjetiva y dependerá del criterio del desarrollador. En general, lo lógico es clasificarlos por categoría o grupo con el elemento <fieldset>. En este sentido, es posible poner un título a cada grupo con el elemento <legend>. Además, también se pueden etiquetar los campos individuales mediante el elemento <label>.
Lista de elementos descritos en este artículo:
| Elemento | Descripción |
|---|---|
<label> | Para mostrar etiquetas descriptivas |
<fieldset> | Para agrupar campos que estén relacionados |
<legend> | Para crear un título a los campos agrupados |
Etiquetado de campos: elemento <label>
El elemento <label> se utiliza para describir o etiquetar los controles interactivos del formulario. Cada etiqueta va asociada a un control. Además, si el usuario hace clic sobre este elemento, el cursor se posicionará dentro del control interactivo al que va asociado. De esta manera se mejora la interacción con el programa.
Este elemento tiene dos etiquetas: <label> (de apertura) y </label> (de cierre). Se trata de un elemento de línea y puede contener elementos de frase, pero no puede contener otros elementos <label> ni otros controles interactivos.
Existen dos maneras de asociar el etiquetado a un control interactivo. Una es introduciendo el control interactivo dentro de las etiquetas <label> y </label>. La otra manera es utilizando el atributo for y que su valor coincida con el valor del atributo id del campo al que queremos asociarlo.
Ejemplo de código HTML de uso de <label>:
<form>
<label>Descripción: <input type='checkbox'></label>
</form>
Resultado del código anterior:
En el ejemplo anterior, se han asociado la etiqueta y el control insertando este último dentro del elemento <label>. Dependiendo de si se quiere que el texto aparezca antes o después del campo, se escribirá también antes o después. En el ejemplo siguiente, se han asociado mediante el atributo for:
<form>
<input id='prueba' type='checkbox'>
<label for='prueba'> HTML</label>
</form>
Resultado del código anterior:
Se puede ver que en los dos casos, el resultado es el mismo: la asociación entre el control interactivo y la etiqueta es la misma. Haciendo clic sobre el texto se marca la casilla de verificación, en ambos casos. Es posible usar el atributo for y anidar el control dentro de <label>, siempre y cuando el atributo for apunte al mismo campo que se ha anidado.
A efectos de diseño y estructura HTML, la asociación mediante el atributo for es de gran utilidad, ya que de esta manera se puede situar el elemento <label> en cualquier parte del documento, sin que esté vinculado físicamente con el control interactivo que tiene asociado. En cambio, si se anida el control dentro de la etiqueta se condiciona el diseño y el aspecto de la interfaz del formulario.
En caso de requerir múltiples etiquetas para un elemento, es recomendable usar un único elemento <label> y en su interior usar otros elementos de línea, como podría ser un <span>. Imaginemos que queremos introducir una etiqueta al principio y al final de una caja de texto. Lo haremos de la siguiente manera:
<form>
<label>Distancia: <input type='number'><span> km</span></label>
</form>
Lo que dará como resultado:
Agrupación de campos: elemento <fieldset>
Para agrupar campos de un formulario se usa el elemento <fieldset>. Se trata de un elemento de bloque, por lo que empieza en una línea nueva y ocupa todo el espacio horizontal disponible hasta el final de la línea. Todos los controles interactivos que estén dentro de las etiquetas <fieldset> (de apertura) y </fieldset> (de cierre) formarán un grupo de campos independiente.
Por cada agrupación de campos interactivos, el navegador mostrará un borde exterior por defecto, encerrándolos. Este marco visual es de gran ayuda para el usuario, ya que con un vistazo puede diferenciar fácilmente los grupos de campos, hecho que facilita mucho la legibilidad en formularios extensos.
Ejemplo de código HTML de una agrupación de campos:
<form>
<fieldset>
<label><input type='checkbox'> Campo 1</label><br>
<label><input type='checkbox'> Campo 2</label><br>
</fieldset>
<fieldset>
<label><input type='checkbox'> Campo 3</label><br>
<label><input type='checkbox'> Campo 4</label><br>
</fieldset>
</form>
Como resultado, se verá de la siguiente manera:
Creación de leyendas: elemento <legend>
En el ejemplo anterior se pueden observar dos grupos de campos claramente diferenciados, conteniendo dos controles interactivos cada uno. Sin embargo, todavía es posible mejorar esta estructura y ponerle un título para describir el contenido de cada uno de los grupos. Esto se hace con el elemento <legend>.
El elemento <legend> debe estar entre las etiquetas <fieldset> y </fieldset>. A su vez, el título del conjunto debe estar entre las etiquetas <legend> (de apertura) y </legend> (de cierre). También se trata de un elemento de bloque.
Ejemplo de código HTML con grupos y títulos:
<form>
<fieldset>
<legend>Grupo 1</legend>
<label><input type='checkbox'> Campo 1</label><br>
<label><input type='checkbox'> Campo 2</label><br>
</fieldset>
<fieldset>
<legend>Grupo 2</legend>
<label><input type='checkbox'> Campo 3</label><br>
<label><input type='checkbox'> Campo 4</label><br>
</fieldset>
</form>
Resultado del código anterior:
Se observa que los grupos tienen un título en la parte superior izquierda del marco externo. Pero el elemento <legend> también puede contener a otros elementos, como sería el caso de otra casilla de verificación. Con esta posibilidad, se puede programar que todos los campos se activen cuando se active el del título.
Ejemplo de código HTML con un título de grupo y un control:
<form>
<fieldset>
<legend><input type='checkbox'> Título del conjunto</legend>
<label>Usuario <input type='text'></label><br>
<label>Contraseña <input type='text'></label><br>
</fieldset>
</form>
Resultado:
Mediante el atributo disabled sobre el elemento de grupo (<fieldset>) también es posible deshabilitar todos los elementos que estén anidados en este conjunto. Se trata de un atributo binario y sin valor, pues su presencia ya da por hecho que el elemento está deshabilitado. Se habilita de nuevo eliminándolo.
Código HTML con un grupo habilitado y otro deshabilitado:
<form>
<fieldset>
<legend>Grupo habilitado</legend>
<label><input type='checkbox'> Campo 1</label><br>
<label><input type='checkbox'> Campo 2</label><br>
</fieldset>
<fieldset disabled>
<legend>Grupo deshabilitado</legend>
<label><input type='checkbox'> Campo 3</label><br>
<label><input type='checkbox'> Campo 4</label><br>
</fieldset>
</form>
Resultado del código anterior:
Tal y como se puede observar, el segundo grupo aparece deshabilitado y ya no se puede hacer clic sobre ninguno de los controles que contiene.
Estructura de código en HTML
Además de los elementos explicados en este artículo para organizar los campos de los formularios, también es posible usar otros elementos HTML, lo que confiere un gran potencial en el diseño. Por ejemplo, es posible usar elementos de bloque como <div> y <p> para crear secciones sin recurrir a <fieldset>. Después se les modifica el diseño mediante las hojas de estilo en cascada (CSS).
También es posible y bastante habitual hacer uso de listas para organizar los distintos controles, ya sea usando las listas ordenadas (elemento <ol>), las listas no ordenadas (elemento <ul>) o las listas de definición (elemento <dl>). Incluso se podrían poner dentro de una tabla (elemento <table>).
