H71Agrupar campos de formulario relacionados con fieldset y legend

Aplicabilidad

HTML

Descripción

El objetivo de esta técnica es proporcionar una agrupación semántica a los controles de formulario relacionados. Esto permite a los usuarios comprender la relación entre los controles e interactuar con el formulario con más rapidez y eficacia.

Los controles de formulario pueden agruparse encerrándolos dentro del elemento fieldset. Todos los controles dentro de un fieldset dado quedan así relacionados. El primer elemento dentro del fieldset debe ser un elemento legend, que proporciona una etiqueta o descripción para el grupo. Los autores deben evitar anidar elementos fieldset innecesariamente, ya que puede generar confusión.

Agrupar los controles es especialmente importante en el caso de los botones de opción y las casillas de verificación relacionados. Un conjunto de botones de opción o de casillas de verificación está relacionado cuando todos envían valores para un mismo campo con nombre. Funcionan de la misma manera que las listas de selección, permitiendo al usuario elegir entre un conjunto de opciones, con la diferencia de que las listas de selección son un único control, mientras que los botones de opción y las casillas de verificación son varios controles. La etiqueta individual asociada a cada botón de opción o casilla de verificación puede no transmitir por completo el contexto descriptivo del grupo. En esta situación es esencial agruparlos semánticamente para facilitar que se traten como un único control, así como para proporcionar una descripción adicional a nivel de grupo. A menudo, los agentes de usuario presentan el valor del legend antes de la etiqueta de cada control para ofrecer esta descripción y, además, para recordar a los usuarios que forman parte del mismo grupo.

También puede ser útil agrupar otros conjuntos de controles menos estrechamente relacionados que los botones de opción y las casillas de verificación. Por ejemplo, varios campos que recogen la dirección de un usuario podrían agruparse con un legend «Dirección», proporcionando así una descripción a nivel de grupo para esos controles. Como regla general, puede decirse que cuando un grupo de controles dentro de un formulario más amplio necesita un encabezado adicional que ofrezca una descripción específica de ese grupo concreto, el uso de los elementos fieldset y legend es apropiado.

Sin embargo, cuando un grupo de botones de opción o casillas de verificación relacionados (incluso con valores para un mismo campo con nombre) incluye instrucciones claras y opciones bien diferenciadas (es decir, cuando la etiqueta individual asociada a cada control concreto proporciona una descripción suficiente), no es necesario usar los elementos fieldset y legend. En este caso, H44 es suficiente.

A veces los autores evitan utilizar el elemento fieldset por su presentación predeterminada en el navegador, que dibuja un borde alrededor de los controles agrupados. Esta agrupación visual también es útil, y los autores deberían considerar seriamente conservarla (o alguna forma de agrupación visual). El efecto visual puede modificarse con CSS sobrescribiendo la propiedad border del fieldset y la propiedad position del legend.

Ejemplos

<fieldset>
  <legend>The play <cite>Hamlet</cite> was written by:</legend>
  <div>
    <input checked="checked" id="shakesp" name="hamlet" type="radio" value="a">
    <label for="shakesp">William Shakespeare</label>
  </div>
  <div>
    <input id="austen" name="hamlet" type="radio" value="b">
    <label for="austen">Jane Austen</label>
  </div>
  <div>    
    <input id="gbshaw" name="hamlet" type="radio" value="c">
    <label for="gbshaw">George Bernard Shaw</label>
  </div>
  <div>
    <input id="woolf" name="hamlet" type="radio" value="d">
    <label for="woolf">Virginia Woolf</label>
  </div>
  <div>
    <input id="dickens" name="hamlet" type="radio" value="e">
    <label for="dickens">Charles Dickens</label>
  </div>
</fieldset>

<fieldset>
  <legend>I am interested in the following (check all that apply):</legend>
  <div>
    <input id="photo" name="interests" type="checkbox" value="ph">
    <label for="photo">Photography</label>
  </div>
  <div>    
    <input checked="checked" id="watercol" name="interests" type="checkbox" value="wa">
    <label for="watercol">Watercolor</label>
  </div>
  <div>  
    <input checked="checked" id="acrylic" name="interests" type="checkbox" value="ac">
    <label for="acrylic">Acrylic</label>
  </div>
</fieldset>

<form action="/adduser" method="post">
  <fieldset>
    <legend>Your Residential Address</legend>
    <div>
      <label for="raddress">Address:</label>
      <input autocomplete="street-address" id="raddress" name="raddress" type="text">
    </div>
    <div>
      <label for="rzip">Postal/Zip Code:</label>
      <input autocomplete="postal-code" id="rzip" name="rzip" type="text">
    </div>    
  </fieldset>
  <fieldset>
    <legend>Your Postal Address</legend>
    <div>    
      <label for="paddress">Address:</label>
      <input autocomplete="street-address" id="paddress" name="paddress" type="text">
    </div>
    <div>      
      <label for="pzip">Postal/Zip Code:</label>
      <input autocomplete="postal-code" id="pzip" name="pzip" type="text">
    </div>    
  </fieldset>
</form>

Pruebas

Técnicas relacionadas

• H44: Usar elementos label para asociar etiquetas de texto con controles de formulario
• H65: Usar el atributo title para identificar los controles de formulario cuando no se puede usar el elemento label

Recursos

• HTML - el elemento fieldset.
• HTML - el elemento legend.