validacion son para los formularios formulario estructura estilos elementos ejemplos cuales con html forms labels

son - formularios html ejemplos



¿Puede un campo de entrada tener dos etiquetas? (6)

¿Has probado lo que sucede? Si funciona, no creo que cause ningún daño a tu formulario ni a la página. Y obtendrá una ventaja porque el uso podrá hacer clic en el error de validación y concentrarse en el campo correcto.

Mary tenía una pequeña forma, y ​​sus campos estaban etiquetados de esa manera.
Cada vez que se deslizaba un error, la confusión sembraba.

Tengo una etiqueta para cada campo de entrada ... asunto bastante estándar. Después de validar el formulario, mostraré 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 la forma correcta y uno en el texto de recordatorio de validación? ¿Hay alguna razón por la que no debería hacer esto?


Aunque es legal, no es la mejor manera de asociar varias etiquetas con un solo elemento <input> . En su lugar, debe usar el atributo aria-labelledby .

Primero le das atributos de id únicos a los elementos <label> . A continuación, coloca un atributo aria-labelledby en el elemento <input> , estableciendo su valor para los valores id de los elementos <label> , separados por un espacio.

Aquí está el ejemplo de la página "Uso del atributo aria-labelledby" en los documentos web de MDN:

<div id="billing">Billing</div> <div> <div id="name">Name</div> <input type="text" aria-labelledby="billing name"/> </div> <div> <div id="address">Address</div> <input type="text" aria-labelledby="billing address"/> </div>


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

Es un poco más complicado hacer las cosas bien 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.

Por lo tanto, si su mensaje de error está en la parte superior de la página, un usuario ciego o con poca visión que toque 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, podría ser algo bueno (¡ciertamente mejor que simplemente resaltar el campo que no valida en rojo!).


No lo intenté, pero creo que será posible. Pero no recomiendo usarlo, porque una etiqueta define para qué es el campo, pero un mensaje de error no. Así que no debería usar una etiqueta para las advertencias de validación.


Sí, puede hacer que múltiples 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ías estas líneas con una sola etiqueta ya que están cerca.


Supongo que esta pregunta es sobre formularios HTML. De la specification :

El elemento LABEL se puede usar 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, sí) siéntase libre de agregar una segunda etiqueta.