La etiqueta <fieldset> se utiliza para agrupar controles relacionados. Se suele utilizar junto con la etiqueta <legend>, que muestra un texto a modo de título.

<form>
  <fieldset>
    <legend>Título</legend>

    <!-- Controles del formulario -->

  </fieldset>

</form>

Los controles de formulario son elementos en línea. Por tanto, para que aparezcan en líneas distintas es conveniente agruparlos mediante etiquetas de bloque.

En este punto se puede optar por etiquetas <p> o <div>:

<form>
  <fieldset>
    <legend>Título</legend>

    <p><!-- Control de formulario --></p>
    <p><!-- Control de formulario --></p>
    <p><!-- Control de formulario --></p>

  </fieldset>

</form>

O por listas (ordenadas o desordenadas):

<form>
  <fieldset>
    <legend>Título</legend>

    <ul>
      <li><!-- Control de formulario --></li>
      <li><!-- Control de formulario --></li>
      <li><!-- Control de formulario --></li>
    </ul>

  </fieldset>

</form>

En caso de utilizar listas es posible ocultar los puntos mediante el siguiente código CSS:

form ul, form ol {
    list-style: none;
    padding: 0;
}

Para identificar los controles se deben utilizar los atributos id y name. El atributo id se utiliza para a programación de cliente (front-end), mientras que el atributo name se utiliza para el envío de los datos al servidor (back-end).

<form>
  <fieldset>
    <legend>Título</legend>

    <ul>
      <li><input type="text" name="nombre" id="nombre"></li>
      <li><input type="text" name="ape1" id="ape1"></li>
      <li><input type="text" name="ape2" id="ape2"></li>
    </ul>

  </fieldset>

</form>

Para mostrar la información asociada a un control se debe utilizar la etiqueta <label>. Dicha etiqueta utiliza el atributo for para indicar el control al que va asociado. El valor del atributo for debe ser el valor del atributo id del control correspondiente.

El uso de etiquetas tiene varias ventajas:

• El usuario puede pulsar con el ratón sobre la etiqueta y activar el control asociado.
• Dispositivos como lectores de pantalla o lectores braille necesitan las etiquetas para poder mostrar la información asociada al control.

<form>
  <fieldset>
    <legend>Título</legend>

    <ul>
      <li>
        <label for="nombre">Nombre</label>
        <input type="text" name="nombre" id="nombre">
      </li>
      <li>
        <label for="ape1">Apellido 1</label>
        <input type="text" name="ape1" id="ape1">
      </li>
      <li>
        <label for="ape2">Apellido 2</label>
        <input type="text" name="ape2" id="ape2">
      </li>
    </ul>

  </fieldset>

</form>

La alineación de controles o etiquetas puede conseguirse utilizando cualquiera de las técnicas de layout estudiadas en el tema 2.2.

En el caso concreto de formularios es recomendable utilizar display: inline-block definiendo una anchura igual para las etiquetas junto con otra anchura igual para los controles. La separación entre ambos puede realizarse utilizando el margen.

A continuación se muestra un ejemplo del código utilizado para ello:

label {
    display: inline-block;
    width: 7em;
}

input {
    display: inline-block;
    width: 9em;
}

Es posible (y recomendable) utilizar etiquetas <span> para agrupar etiquetas y controles y así poderlos procesar correctamente en CSS.

<form>
  <fieldset>
    <legend>Título</legend>

    <ul>
      <li>
        <span class="etiqueta"><label for="nombre">Nombre</label></span>
        <span class="control"><input type="text" name="nombre" id="nombre"></span>
      </li>
      <li>
        <span class="etiqueta"><label for="ape1">Apellido 1</label></span>
        <span class="control"><input type="text" name="ape1" id="ape1"></span>
      </li>
      <li>
        <span class="etiqueta"><label for="ape2">Apellido 2</label></span>
        <span class="control"><input type="text" name="ape2" id="ape2"></span>
      </li>
    </ul>

  </fieldset>

</form>

Es posible utilizar pistas para indicar al usuario qué información debe introducir en cada campo del formulario. Para ello se puede utilizar el atributo placeholder.

<form>
  <fieldset>
    <legend>Título</legend>

    <ul>
      <li>
        <span class="etiqueta"><label for="nombre">Nombre</label></span>
        <span class="control"><input type="text" name="nombre" id="nombre" placeholder="Nombre..."></span>
      </li>
      <li>
        <span class="etiqueta"><label for="ape1">Apellido 1</label></span>
        <span class="control"><input type="text" name="ape1" id="ape1" placeholder="Apellido 1..."></span>
      </li>
      <li>
        <span class="etiqueta"><label for="ape2">Apellido 2</label></span>
        <span class="control"><input type="text" name="ape2" id="ape2" placeholder="Apellido 2..."></span>
      </li>
    </ul>

  </fieldset>

</form>

A continuación puedes ver un ejemplo de formulario utilizando las recomendaciones descritas:

Las etiquetas de los formularios suelen colocarse arriba o a la izquierda de los controles. Cuando se colocan a la izquierda, pueden alinearse a la izquierda o a la derecha. Cada una de estas opciones tiene sus ventajas e inconvenientes.

• Se debe minimizar el número de datos opcionales.
• Si la mayoría de datos son obligatorios: indicar los opcionales.
• Si la mayoría de datos son opcionales: indicar los obligatorios.
• Es mejor utilizar indicadores mediante texto; también se puede utilizar * para los campos obligatorios.
• Se deben asociar los indicadores con las etiquetas.

• El tamaño de los campos puede ofrecer información sobre su contenido.
• Muchos tamaños: ruido adicional
• En caso de duda, tamaño igual para todos los campos.

• Es recomendable mostrar el mínimo número de acciones posibles (idealmente sólo 1).
• En caso de mostrar más de una acción, diferenciar visualmente la opción principal de las secundarias.

• Se debe minimizar la cantidad de ayuda mostrada.
• En caso de necesitar instrucciones, mostrar la ayuda adosada a los campos que la necesiten (ayuda dinámica).

• Se debe mostrar claramente el camino a seguir para completar el formulario.
• En caso de que el formulario sea muy largo, se debe ofrecer la posibilidad de salvar el progreso.
• Es conveniente permitir la entrada flexible de datos (por ejemplo, en números de teléfono: 999-112233, 999112233, 999 11 22 33, 999 112 233, etc.).

• Se debe tener en cuenta el uso del teclado para rellenar formularios. Para ello puede utilizarse el atributo tabindex.

• Se debe utilizar validación automática en campos con alta tasa de error.
• Es recomendable utilizar sugerencias para evitar errores.
• Siempre se debe mostrar un mensaje cuando se envíe un formulario indicando si la acción ha tenido éxito o si se ha producido un error.

• Se debe comunicar claramente que ha ocurrido un error: en la parte superior de la página utilizando contraste visual.
• Además, se debe indicar qué campos son los que contienen errores.

• Es recomendable mostrar indicaciones de las acciones en progreso.
• Es muy recomendable desactivar el botón de envío después de que el usuario lo haya pulsado. De esta manera evitamos que se produzcan envíos duplicados.

• Se debe mostrar claramente si los datos se han enviado con éxito.
• Se debe indicar alguna referencia a la acción que se ha realizado: actualización, creación de información nueva, pago,…