La etiqueta y el campo son fáciles; tenemos <label> y luego el campo de entrada correspondiente. Pero, ¿cuál es el elemento HTML más semánticamente correcto que se utiliza para el texto informativo más pequeño que se encuentra debajo del campo?¿Cuál es el elemento HTML más semánticamente correcto para una nota/pista de campo de formulario?
no sé de un elemento específico o atributo para conectarlos, pero puede hacerlo utilizando el atributo ARIA aria-describedby:
<label for="firstname">First Name</label>
<input type="text" id="firstname" aria-describedby="firstname-explanation" />
<p id="firstname-explanation">e.g. John</p>
pero incluyendo todo en el label parece buena a mí tampoco (también da buenas habilidades de estilo, cuando usted tiene un - semántica - contenedor):
<label>
<span class="form-item-title">First Name</span>
<input type="text" id="firstname" />
<span class="form-item-description">e.g. John</span>
</label>
O incluso podría mezclar los dos.
Otro enfoque podría ser poner la descripción en el title (o placeholder según lo sugerido por @Alohci) atributo del elemento input (semánticamente esta es la que lo describe), pero en este caso hay que insertarlo a la marcado a través de Javascript (o CSS usando input:after { content : "e.g. " attr(placeholder) } - sugerido por @Alohci).
Eso podría funcionar. Voy a aguantar un rato primero para ver si algún gurú de HTML con conocimiento enciclopédico de los elementos puede dar una respuesta definitiva antes de marcar esta correcta. –
aria-describedby es un intento valiente, pero tiene un par de problemas. En primer lugar, la especificación de HTML5 deja en claro que los atributos de aria son * solo * directivas para el navegador en cuanto a la forma en que el navegador debe exponer el contenido a la API de accesibilidad de la plataforma, y que ellos mismos no transmiten información semántica. Segundo, los ejemplos no son descripciones. Una solución semántica ideal podría ser convertir los ejemplos en atributos de marcador de posición y diseñarlos para que estén fuera del cuadro de entrada como se muestra en la pregunta, pero eso es para el futuro, no ahora. Por ahora, usaría un segundo elemento '
@Alohci Estoy de acuerdo con la mayoría de las cosas que dices. Aunque a veces se puede describir mejor algo con un ejemplo ('placeholder' sigue siendo una idea válida, pero tiene el mismo problema que' title' aquí). Para obtener los mejores resultados, en lugar de las 2 etiquetas sugeridas, seguiría con una "etiqueta" alrededor de todo (lo cual es perfectamente válido). – kapa