Campos fieldset, legend, label y optgroup

Patxi Echarte, 14. Feb, 2005, 15 Comentarios XHTML

El conjunto de etiquetas permitidas en XHTML es bastante amplio y es habitual que mucha gente únicamente conozca las que utiliza de forma habitual, o las que generan de forma automática las diferentes herramientas visuales de edición html. Es poca la gente a proporción que se lee la referencia del W3C, o la estupenda información más explicada y con ejemplos de W3Schools.

Esto produce que haya etiquetas con mucha utilidad pero que por ser menos utilizadas, acaban siendo desconocidas por gran parte de los diseñadores. En este pequeño artículo vamos a dar un repaso a algunas de estas etiquetas desconocidas para muchos, en concreto vamos a centrarnos en 4 etiquetas de bastante utilidad en la generación de formularios. Estas etiquetas son fieldset para realizar agrupaciones de campos, legend para dar un título a una agrupación de campos, label para identificar el texto asociado a un campo, y optgroup para realizar agrupaciones en listas de selección.

Estas etiquetas están definidas en la recomendación del W3C referida a HTML 4.0, pero son aplicables a XHTML, teniendo en cuenta las modificaciones que realiza éste sobre HTML 4.0, como que las etiquetas deben ir en minúsculas, por ejemplo. En la página de W3Schools se dispone para cada etiqueta de las características que las diferencian entre HTML y XHTML, y puede verse que para estos casos no existen. Puede extraerse más información sobre los atributos permitidos aparte de la referencia del W3C del DTD asociado al DOCTYPE que utilicemos en la página XTHML, strict, transitional o frameset

Fieldset y Legend

Tal como indica la recomendación del W3C la etiqueta fieldset permite agrupar controles y etiquetas que estén relacionados, haciendo que el formulario sea más comprensible para los usuarios desde un punto de vista visual y conceptual, a la vez que incrementa la usabilidad y la accesibilidad, ya que estos campos podrían ser utilizados al realizar saltos entre campos con la tecla tab o interpretados por navegadores que incorporen funciones de generación de voz.

Por su parte la etiqueta legend permite asignar un título a un fieldset, aumentando los valores de usabilidad y accesibilidad.

Código Resultado 

   Fecha de nacimiento:
   Año  
   Mes  
   Día
Fecha de nacimiento:

Año Mes Día

En el ejemplo anterior se aprecia como hemos construido un grupo de controles para agrupar el año, mes y día de una fecha de nacimiento. A la agrupación de controles le hemos añadido una legenda con el título Fecha de nacimiento. A partir de aquí podríamos mejorar el aspecto visual de los formularios en los que utilicemos estas etiquetas mediante la alineación de los elementos con CSS, la utilización de colores y fuentes con CSS, o mediante la utilización de JavaScript, por ejemplo para mostrar o no conjuntos de campos en función de lo que se haya introducido en otros.

Label

La etiqueta label sirve para representar el texto asociado a controles que no tienen implícitamente un valor de texto. En el caso de los botones por ejemplo su texto se saca a partir de su atributo value, que es su label implícito. Los controles que no tienen labels implícitos, como los campos de texto, radios o checkboxes por ejemplo, pueden utilizar etiquetas label para indicar el texto que les corresponde.

Cada etiqueta label puede estar asociada únicamente a un control de formulario. Esta asociación se realiza mediante el atributo for, indicando el id del control de formulario al que queremos asociar el label. Es posible asociar un label con un control sin utilizar el atributo for, para ello es suficiente con que el control esté dentro de la etiqueta label.

Uno de los beneficios que obtendremos utilizando etiquetas label será en el manejo de listas de radiobuttons o checkboxes. Mediante la asociación de un label, el usuario no tendrá por obligación que pinchar en el control para marcarlo o desmarcarlo, podrá hacerlo también pulsando sobre el texto del label.

Código Resultado

Elige tu equipo favorito

Optgroup

Esta última etiqueta se utiliza para crear grupos dentro de cajas de selección. Por ejemplo imaginemos que queremos que un usuario nos indique la versión de su sistema operativo. Si quisiéramos obtener este dato podríamos poner una lista con todos los sistemas operativos disponibles listados, pero esto podría quedar poco usable. Lo ideal sería que pudiésemos crear un grupo por cada sistema operativo, y dentro de cada grupo poner las diferentes versiones.

Código Resultado

Si quieres más información sobre estas etiquetas y sus posibilidades puedes probar en las siguientes direcciones:

Twitter Digg Delicious Stumbleupon Technorati Facebook Email

15 Respuestas para “Campos fieldset, legend, label y optgroup”

  1. Xisco 23. Mar, 2005 en 11:06 am

    Note. Implementors are advised that future versions of HTML may extend the grouping mechanism to allow for nested groups (i.e., OPTGROUP elements may nest). This will allow authors to represent a richer hierarchy of choices

    http://www.w3.org/TR/REC-html40/interact/forms.html#edef-OPTGROUP

  2. fieldset en firefox 09. May, 2006 en 11:55 am

    fieldset falla de pleno en el explorador firefox.
    es un puteo y no encuentro etiquetas copatibles, por lo cual todo lo que haces no funciona al 100%.

  3. Patxi 09. May, 2006 en 3:19 pm

    Pues siento decirte que fieldset funciona correctamente en firefox ;), otra cosa es que te esté fallando por algún tema puntual de CSS o alguna etiqueta o atributo incorrecta, pero te aseguro que funciona. Y por cierto, no es que yo lo haga o lo diga, es que viene en el estándar HTML 4.0 del W3C.

  4. alex 19. May, 2006 en 9:05 pm

    machetisima, vergataria su pagina, que buena ayuda prestan a sus usuarios

  5. carlos andres marquez 06. Sep, 2006 en 3:50 am

    porfavor faltaro los atributo de cada uno

  6. Patxi 06. Sep, 2006 en 9:33 am

    hola carlos, en las referencias que proporciono tienes la información completa de cada etiqueta por si te hace falta, aunque en los ejemplos dados ya se pueden observar qué atributos tiene cada etiqueta.

  7. Juanma 18. Oct, 2006 en 7:58 pm

    El problema de fieldset en firefox, es que no muestra las esquinas redondeadas como en explorer. A no ser que alguien tenga la solución.

  8. Patxi 18. Oct, 2006 en 9:22 pm

    Juanma, no estás obligado a las esquinas redondeadas que se muestran por defecto en los fieldset, mediante CSS puedes modificar su apariencia para amoldarla a tus necesidades.

  9. Juan 01. Mar, 2007 en 10:50 am

    Yo también tengo problemas de estilos al aplicarlos a los fieldset

  10. manolo_mono 11. Ene, 2008 en 12:36 pm

    Me asombro, hay que divulgar la información, muy buena por cierto. doy 5 estrellas 🙂 *****

  11. oliver veliz 05. Mar, 2008 en 10:46 pm

    Hola amigos del web les brindo un cordial saludo, bueno quisiera saber si me pudieran ayudar a como mejorar el aspecto html con las etiquetas «tituloContenido de Campos» la verdad es que en Internet Explorer se ve muy bien pero moxila firefox tiene un aspecto un poco tosco y quisiera saber si me podrian ayudar a como mejorar esto ya sea utilizando CSS o JavaScript…..gracias

  12. paola 20. Jun, 2008 en 4:03 pm

    super padrisima su ayuda

  13. eliana 28. Dic, 2008 en 2:09 pm

    Hola,
    realmente estas etiquetas no son muy conocidas!
    Gracias x la publicacion!!
    x cierto, funciona muy bien en firefox…

  14. Lowell Burks 28. Mar, 2011 en 8:07 pm

    Another great post, congrats! Used Helicopters

    http://multiupload.com

Trackbacks/Pingbacks

  1. Mejora la usabilidad y accesibilidad de los formularios en HTML 4.0 – The n4gash Blog - The n4gash Blog - 20. Abr, 2011

    […] mejorar la usabilidad y la accesibilidad de nuestros formularios considerablemente. Desde Eslomas nos ofrecen una  explicación de éstas y varios ejemplos donde comprobar el resultado. Tal y como […]