¿Puede un campo de entrada tener dos etiquetas?

134

Mary tenía una pequeña forma, y ​​sus campos estaban etiquetados así.
Cada vez que aparecía un error, la confusión sembraría.

Tengo una etiqueta para cada campo de entrada ... asunto bastante estándar. Después de validar el formulario, estoy mostrando un pequeño párrafo útil en la parte superior del formulario que detalla qué información falta o es incorrecta.

¿Puedo tener dos etiquetas para el mismo campo de entrada? ¿Uno en el formulario correcto y otro en el texto del recordatorio de validación? ¿Hay alguna razón por la que no debería hacer esto?

html forms labels un barrio pobre
fuente
¿Has probado lo que pasa? Si funciona, no creo que cause ningún daño a su formulario ni a la página. Y obtendrá una ventaja porque el uso podrá hacer clic en el error de validación y enfocarse en el campo correcto.
Felipe Cypriano
No lo intenté, pero supongo que será posible. Pero no recomiendo usarlo, porque una etiqueta define para qué es el campo, un mensaje de error no lo hace. Por lo tanto, no debería usar una etiqueta para validar las advertencias.
Guido Hendriks
1
¿Es esta una pregunta general de diseño / usabilidad de UI?
jball
Si. "Funciona" ... pero ¿hay alguna razón por la que este sea un mal diseño? Supongo que podría ser por razones de accesibilidad, pero para un usuario normal, creo que hacer clic en el mensaje de error y ser llevado al campo desordenado facilitaría las cosas ... Simplemente no sé si lo hará desordenar "lectores para discapacitados visuales" o similares.
aslum
1
En algunos casos, es más fácil poner su control y texto dentro de uno label. Incluso puede omitir los atributos fory id. La especificación llama a esta asociación implícita.
rybo111

Respuestas:

158

Supongo que esta pregunta es sobre formularios HTML. De la especificación :

El elemento LABEL puede usarse para adjuntar información a los controles. Cada elemento LABEL está asociado con exactamente un control de formulario.

Por lo tanto, cada control de formulario puede ser referenciado por múltiples etiquetas, pero cada etiqueta solo puede hacer referencia a un control. Entonces, si tiene sentido tener una segunda etiqueta para un control (y en la situación que describe, lo hace), siéntase libre de agregar una segunda etiqueta.

James Sumners
fuente
2
Es realmente más una cuestión de usabilidad / accesibilidad que el HTML. El html funciona.
aslum
2
Todos deberíamos usar solo un código válido, de lo contrario, las cosas podrían romperse en el futuro o para otra persona o con alguna biblioteca JS o lo que sea.
SHernandez
1
La respuesta correcta es la de Rob. Esta solución funciona para usuarios videntes y falla en algunos lectores de pantalla. Aslum, suponiendo que aceptaste la respuesta de jsummers antes de que Rob enviara su respuesta.
Jaula sonajero
3
@AvramLavinsky no, esta es la respuesta correcta a "¿puede un campo tener dos etiquetas?" La especificación es bastante clara. Cómo los clientes eligen interpretar eso depende de ellos. Su enlace a "aria-updatedby", que enlaza a "aria-etiquetadoby", es la forma de "reparar" lectores de pantalla rotos.
James Sumners
Funny MDN dice "Una entrada puede estar asociada con múltiples etiquetas". developer.mozilla.org/en-US/docs/Web/HTML/Element/label
2540625
40

El HTML es legal y funciona (hacer clic en cualquiera de las etiquetas transferirá el foco al campo en cuestión).

Es un poco más complicado hacer lo correcto por razones de accesibilidad.

No es un enfoque "común", y debido a eso, al menos un lector de pantalla común (probé con NVDA) solo lee la primera etiqueta cuando cambia el foco al campo; ignora cualquier etiqueta adicional para el mismo campo.

Entonces, si su mensaje de error se encuentra en la parte superior de la página, un usuario ciego o con baja visión que recorra los campos escuchará solo el mensaje de error al aterrizar en el campo en cuestión, no la etiqueta "real" al lado.

Por lo tanto, si redacta el mensaje de error correctamente, eso podría ser algo bueno (¡ciertamente mejor que solo resaltar el campo de no validación en rojo!).

Rob Whelan
fuente
1
Esto es correcto, y la forma correcta de codificar esto es a través del atributo descrito por aria
cage rattler
27

Sí, puede hacer que varias etiquetas apunten al mismo control de formulario. Esto es perfectamente legal :

<label for="fname">First name</label>
<label for="fname">Enter your info</label>
<label for="fname">Why not a third label</label>
<input type="text" id="fname" name="fname">

Esto es solo un ejemplo ... normalmente envolvería estas líneas con una etiqueta ya que están cerca.

Gert Grenander
fuente
13
+1 para el enlace al documento donde establece claramente que "más de uno LABELpuede estar asociado con el mismo control creando múltiples referencias a través del foratributo".
alexg