Etiqueta HTML <fieldset>
La etiqueta HTML <fieldset> agrupa visualmente campos relacionados en un formulario HTML definido con <form>. Ver sintaxis y ejemplos.
La etiqueta <fieldset> agrupa controles relacionados lógicamente dentro de un <form> HTML, permitiendo dividir un formulario extenso en secciones claras. De forma predeterminada, el navegador dibuja un recuadro alrededor del contenido agrupado. Combinada con <legend>, es también la manera correcta de proporcionar una etiqueta compartida y accesible a un grupo de controles <input>.
Esta página cubre la sintaxis, el papel de <legend>, todos los atributos (name, disabled, form), cómo cambiar el estilo o eliminar el recuadro, y por qué <fieldset> es importante para la accesibilidad en grupos de radio y casillas de verificación.
Sintaxis
La etiqueta <fieldset> va en pares. El contenido se escribe entre las etiquetas de apertura (<fieldset>) y cierre (</fieldset>).
Ejemplo de la etiqueta HTML <fieldset>:
Etiqueta HTML <fieldset>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
margin-bottom: 10px;
}
label {
display: inline-block;
width: 120px;
}
fieldset {
background: #e1eff2;
}
legend {
padding: 20px 0;
font-size: 20px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Personal Information:</legend>
<div>
<label for="name">Name:</label>
<input type="text" id="name" />
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" />
</div>
<div>
<label for="date">Date of birth:</label>
<input type="date" id="date" />
</div>
<div>
<label for="birth-place">Place of birth:</label>
<input type="text" id="birth-place" />
</div>
</fieldset>
</form>
</body>
</html>Resultado
El elemento <legend>
El elemento <legend> proporciona un título al <fieldset>. Hay dos reglas importantes:
- Debe ser el primer hijo del
<fieldset>. Si aparece en cualquier otro lugar, los navegadores lo ignoran como título del grupo. - Es el nombre accesible del grupo. Las tecnologías de asistencia anuncian el texto del legend junto con cada control dentro del grupo. Así, cuando un usuario de lector de pantalla llega a un control, escucha algo como "Información personal — Nombre, cuadro de texto", lo que le indica a qué sección pertenece ese campo.
<fieldset>
<legend>Shipping address</legend>
<!-- the inputs for this section go here -->
</fieldset>Un <fieldset> sin <legend> sigue dibujando un recuadro, pero el grupo no tiene nombre, por lo que se pierde el beneficio de accesibilidad. Añada siempre un legend cuando la agrupación tenga sentido para el usuario.
El elemento <fieldset> para organizar formularios
La mayoría de los formularios en línea son difíciles de usar y están desorganizados. Organizarlos en secciones lógicas mejora significativamente la usabilidad. Usar el elemento <fieldset> junto con el elemento <legend> crea límites claros y facilita la navegación por los formularios.
Accesibilidad: agrupación de botones de radio y casillas de verificación
Un único <input> de texto se etiqueta con su propio <label>. Pero un conjunto de botones de radio o casillas de verificación necesita dos niveles de etiquetado: uno para toda la pregunta y uno para cada opción. <fieldset> + <legend> es la forma estándar y accesible de hacerlo: el legend etiqueta la pregunta y cada <label> etiqueta una opción.
<fieldset>
<legend>Choose a shipping method:</legend>
<div>
<input type="radio" id="standard" name="shipping" value="standard" />
<label for="standard">Standard (3–5 days)</label>
</div>
<div>
<input type="radio" id="express" name="shipping" value="express" />
<label for="express">Express (1–2 days)</label>
</div>
</fieldset>Aquí un lector de pantalla anuncia "Elige un método de envío, Estándar, botón de radio" — el usuario siempre sabe qué pregunta está respondiendo. Sin el contenedor <fieldset>/<legend>, las opciones se leen como una lista desconectada. Use este patrón para todos los grupos de radio y para cualquier conjunto de casillas de verificación relacionadas.
Eliminar o cambiar el estilo del recuadro
El borde predeterminado es simplemente un estilo: no es obligatorio. Una pregunta muy común es cómo eliminarlo. Establezca border: none en el <fieldset>:
fieldset {
border: none;
padding: 0;
margin: 0;
}También puede aplicar cualquier estilo que desee al <legend> y al recuadro (fondo, borde personalizado, esquinas redondeadas). La agrupación y su semántica de accesibilidad permanecen intactas independientemente del estilo aplicado, por lo que puede prescindir del aspecto predeterminado sin perder el beneficio.
Atributos
| Atributo | Valor | Descripción |
|---|---|---|
| disabled | disabled | Deshabilita todo el grupo. Cada control de formulario dentro del <fieldset> queda no interactivo y no se envía con el formulario. |
| form | form_id | Asocia el fieldset con uno o más formularios mediante su id, de modo que puede situarse fuera del <form> al que pertenece. Separe múltiples ids con espacios. |
| name | text | El nombre del grupo. No se envía con el formulario; se utiliza principalmente para referenciar el grupo desde JavaScript. |
El atributo disabled es útil cuando toda una sección del formulario debe desactivarse de una vez; por ejemplo, ocultar los campos de pago hasta que se marque una casilla de verificación:
<fieldset disabled>
<legend>Payment details</legend>
<label for="card">Card number:</label>
<input type="text" id="card" />
</fieldset>El atributo form permite que un <fieldset> esté fuera del elemento <form> y siga perteneciendo a él:
<form id="signup"></form>
<fieldset form="signup">
<legend>Account</legend>
<label for="user">Username:</label>
<input type="text" id="user" />
</fieldset>La etiqueta <fieldset> admite los Atributos Globales y los Atributos de Evento.