H90Indicar los campos obligatorios en la etiqueta o en la leyenda

Usar texto para indicar el estado obligatorio

El campo de texto del ejemplo siguiente tiene la etiqueta explícita «First name (required):» (nombre, obligatorio). El atributo for del elemento label coincide con el atributo id del elemento input, y el texto del label indica que el control es obligatorio.

<label for="firstname">First name (required):</label> 
<input id="firstname" name="firstname" type="text">

Usar un asterisco para indicar el estado obligatorio

El campo de texto del ejemplo siguiente tiene una etiqueta explícita que incluye un asterisco para indicar que el control es obligatorio. Es importante que el significado del asterisco se defina al principio del formulario. En este ejemplo, el asterisco está contenido en un elemento abbr para que pueda aplicarse un estilo al carácter de asterisco y mostrarlo más grande que el asterisco predeterminado, ya que este carácter puede ser difícil de ver para las personas con discapacidad visual.

.req {font-size: 150%}

<p>Required fields are marked with an asterisk
   (<abbr class="req" title="required">*</abbr>).</p>
<form action="https://example.com" method="post">
  <label for="firstname">First name <abbr class="req" title="required">*</abbr>:</label> 
  <input id="firstname" name="firstname" type="text">
  ...
</form>

Usar una imagen para indicar el estado obligatorio

El campo de texto del ejemplo siguiente tiene una etiqueta explícita que incluye una imagen para indicar que el control es obligatorio. Es importante que el significado de la imagen se defina al principio del formulario.

<p><img alt="required" src="req_img.gif"> indicates that the information is required</p>
<form action="https://www.example.com" method="post">
  <label for="firstname">First name <img alt="required" src="req_img.gif">:</label> 
  <input id="firstname" name="firstname" type="text">
  ...
</form>

Indicar el estado obligatorio en grupos de botones de opción o casillas de verificación

Los botones de opción y las casillas de verificación se tratan de forma distinta a otros controles interactivos, puesto que no es obligatorio cada botón de opción o casilla de verificación individual, sino que se indica que es obligatoria una respuesta para el grupo. Los métodos usados en los ejemplos 1 a 3 se aplican a los botones de opción y a las casillas de verificación, pero la indicación del estado obligatorio debe situarse en el elemento legend en lugar de en el elemento label.

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