[HTML] ¿Para qué sirven las etiquetas Fieldset, Leyend y Label?

Las etiquetas Fieldset, leyend y label nos sirven para añadir estructura a nuestros formularios, aquí les dejo una explicación detallada de cada uno:

Fieldset: La etiqueta fieldset nos sirve para agrupar controles y elementos relacionados, esto facilita la navegación de los usuarios, ya que permite facilitar la navegacion con la tecla de tabulación además de permitir que navegadores que integren funciones de generación de voz las “lean”.

Leyend: Nos permite asignar un Título a un fieldset. Esto también proporciona accesibilidad cuando nuestro sitio es visitado por una persona con discapacidad visual.

Label: Esta etiqueta nos permite asignar un texto a un campo de texto. Me explico. Si tenemos por ejemplo en un sector de nuestro sitio web lo siguiente:

<label for=”nombre”>Nombre</label>
<input type=”text” id=”nombre”>

Si utilizamos la etiqueta label, y la asignamos a el campo que la acompaña, hacer click en el texto “Nombre”  es equivalente a hacer click en el campo de texto.

 Ejemplo del uso de las 3 etiquetas: 

<form>
<fieldset>
<legend>Inicio de Sesión</legend>
<label for=”nombre”>Nombre de usuario</label>
<input type=”text” id=”nombre”>
<label for=”password”>Contraseña</label>
<input type=”text” id=”password”>
</fieldset>
</form>

Usando este código, obtendremos lo siguiente:

fieldset label leyend html

En resumen: La etiqueta fieldset sirve para definir un grupo de elementos (agrupar), leyend nos permite “etiquetar” a este grupo de elementos y la etiqueta label nos sirve para establecer un “título” para cada campo de un formulario.

Para más información acerca de estas etiquetas, visita la web oficial del W3C.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s