La etiqueta <legend> es un elemento HTML que se utiliza para dar un título o una leyenda a un grupo de campos dentro de un formulario. La etiqueta <legend> debe ir dentro de la etiqueta <fieldset>, que sirve para agrupar los campos relacionados con una misma temática o propósito. La etiqueta <legend> ayuda a mejorar la accesibilidad y la usabilidad de los formularios, ya que permite identificar fácilmente el propósito de cada grupo de campos.
Ejemplo de uso de la etiqueta <legend>
Veamos un ejemplo sencillo de cómo usar la etiqueta <legend> dentro de un formulario. Supongamos que queremos crear un formulario para solicitar los datos personales y las preferencias de un usuario. Podemos usar dos etiquetas <fieldset> para agrupar los campos correspondientes, y dentro de cada una, usar una etiqueta <legend> para darles un título. El código HTML sería el siguiente:
<form>
<fieldset>
<legend>Datos personales</legend>
<label for=»nombre»>Nombre:</label>
<input type=»text» id=»nombre» name=»nombre»><br>
<label for=»email»>Email:</label>
<input type=»email» id=»email» name=»email»><br>
<label for=»edad»>Edad:</label>
<input type=»number» id=»edad» name=»edad»><br>
</fieldset>
<fieldset>
<legend>Preferencias</legend>
<label for=»color»>Color favorito:</label>
<input type=»color» id=»color» name=»color»><br>
<label for=»musica»>Género musical favorito:</label>
<select id=»musica» name=»musica»>
<option value=»rock»>Rock</option>
<option value=»pop»>Pop</option>
<option value=»reggaeton»>Reggaeton</option>
<option value=»clasica»>Clásica</option>
</select><br>
<label for=»deporte»>Deporte que practicas:</label>
<input type=»checkbox» id=»futbol» name=»deporte» value=»futbol»>
<label for=»futbol»>Fútbol</label>
<input type=»checkbox» id=»tenis» name=»deporte» value=»tenis»>
<label for=»tenis»>Tenis</label>
<input type=»checkbox» id=»natacion» name=»deporte» value=»natacion»>
<label for=»natacion»>Natación</label><br>
</fieldset>
<input type=»submit» value=»Enviar»>
</form>El resultado sería el siguiente:
Ejemplo de código anterior utiliza la etiqueta legend en un formulario HTML que solicita los datos personales y las preferencias de un usuario. Te voy a explicar cada parte del código:
- La etiqueta <form> indica el inicio y el fin del formulario. Dentro de esta etiqueta se pueden colocar los elementos que conforman el formulario, como etiquetas, campos de entrada, botones, etc.
- La etiqueta <fieldset> sirve para agrupar los elementos del formulario que están relacionados con una misma temática o propósito. En este caso, hay dos etiquetas <fieldset>, una para los datos personales y otra para las preferencias del usuario.
- La etiqueta <legend> se usa para dar un título o una leyenda a cada grupo de campos dentro de un <fieldset>. En este caso, los títulos son “Datos personales” y “Preferencias”.
- La etiqueta <label> se usa para dar un nombre o una descripción a cada campo de entrada del formulario. La etiqueta <label> tiene un atributo llamado for, que indica el id del campo al que se refiere. Por ejemplo, la etiqueta <label for=“nombre”>Nombre:</label> se refiere al campo con id=“nombre”.
- La etiqueta <input> se usa para crear un campo de entrada donde el usuario puede introducir algún dato. La etiqueta <input> tiene varios atributos, como id, name, type y value. El atributo id sirve para identificar el campo de forma única. El atributo name sirve para enviar el dato al servidor cuando se envía el formulario. El atributo type sirve para indicar el tipo de dato que se espera, como texto, número, correo electrónico, color, etc. El atributo value sirve para dar un valor inicial al campo. Por ejemplo, la etiqueta <input type=“text” id=“nombre” name=“nombre”> crea un campo de texto con id=“nombre” y name=“nombre”.
- La etiqueta <select> se usa para crear una lista desplegable donde el usuario puede elegir una opción entre varias. La etiqueta <select> tiene los atributos id y name, igual que la etiqueta <input>. Dentro de la etiqueta <select> se pueden colocar varias etiquetas <option>, que representan cada opción de la lista. Cada etiqueta <option> tiene un atributo value, que indica el valor que se envía al servidor cuando se selecciona la opción. Por ejemplo, la etiqueta <select id=“musica” name=“musica”> crea una lista desplegable con id=“musica” y name=“musica”, y dentro tiene cuatro opciones: Rock, Pop, Reggaeton y Clásica.
- La etiqueta <input type=“checkbox”> se usa para crear una casilla de verificación donde el usuario puede marcar o desmarcar una opción. La etiqueta <input type=“checkbox”> tiene los mismos atributos que la etiqueta <input>, excepto que el atributo value indica el valor que se envía al servidor cuando la casilla está marcada. Por ejemplo, la etiqueta <input type=“checkbox” id=“futbol” name=“deporte” value=“futbol”> crea una casilla de verificación con id=“futbol”, name=“deporte” y value=“futbol”.
- La etiqueta <input type=“submit”> se usa para crear un botón que envía el formulario al servidor. La etiqueta <input type=“submit”> tiene un atributo value, que indica el texto que aparece en el botón. Por ejemplo, la etiqueta <input type=“submit” value=“Enviar”> crea un botón con el texto “Enviar”.
Ventajas de usar la etiqueta <legend>
Como se puede observar, la etiqueta <legend> permite darle un aspecto más organizado y claro al formulario, facilitando la comprensión y el llenado por parte del usuario. Además, la etiqueta <legend> tiene las siguientes ventajas:
Mejora la accesibilidad: La etiqueta <legend> permite a los lectores de pantalla y a los navegadores que no soportan CSS identificar el propósito de cada grupo de campos, lo que ayuda a las personas con discapacidad visual o auditiva a rellenar el formulario correctamente.
Mejora el SEO: La etiqueta <legend> ayuda a los motores de búsqueda a entender mejor el contenido y la estructura del formulario, lo que puede mejorar el posicionamiento del sitio web en los resultados de búsqueda.
Mejora la validación: La etiqueta <legend> permite asociar cada grupo de campos con una regla de validación específica, lo que facilita la detección y corrección de errores en el formulario.
Conclusión
La etiqueta <legend> es un elemento HTML muy útil para crear formularios más accesibles, usables y optimizados. La etiqueta <legend> debe ir siempre dentro de la etiqueta <fieldset>, y sirve para dar un título o una leyenda a cada grupo de campos relacionados. La etiqueta <legend> mejora la experiencia del usuario y del desarrollador, y puede contribuir al éxito del sitio web.
Espero que este artículo te haya sido útil y te haya enseñado algo nuevo sobre la etiqueta <legend>. Si te ha gustado, compártelo con tus amigos y déjame un comentario con tu opinión. ¡Hasta la próxima!