La etiqueta <fieldset> está diseñada para agrupar elementos de formulario.
Este tipo de agrupación facilita el trabajo con formularios que contienen una gran cantidad de datos, por ejemplo, un bloque puede ser para ingresar información de texto, mientras que otro puede ser para casillas de verificación.
Los navegadores muestran el resultado del uso del elemento <fieldset> como un borde para mejorar la claridad. Su apariencia depende del sistema operativo y del navegador utilizado.
Demo
See the Pen Etiqueta <fieldset> by Alex (@htmldesdecero) on CodePen.
Sintaxis
<form>
<fieldset>...</fieldset>
</form>El tag de cierre es obligatorio.
Para agregar una firma/título dentro de un <fieldset>, se debe usar <legend>:
<fieldset>
<legend>Titulo para el grupo</legend>
...
</fieldset>Atributos
disabled: Bloquea los campos del formulario en el grupo.form: Asocia el grupo con el formulario.name: Define el nombre del conjunto de campos.
disabled
El atributo disabled bloquea el acceso a los elementos del formulario dentro de la etiqueta <fieldset>. Los campos del formulario se muestran como si cada uno de ellos tuviera el atributo disabled añadido.
<fieldset disabled>...</fieldset>form
El atributo form relaciona el grupo <fieldset> con el formulario mediante su identificador. Esta relación es necesaria cuando el elemento no está dentro de un <form>, por ejemplo, al crearlo de forma programática. Si se establece la relación entre <form> y <fieldset>, se pueden enviar datos al servidor y trabajar con el formulario como si los elementos estuvieran dentro del formulario.
<fieldset form="<identificador>">...</fieldset>Descripción y Ejemplos
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>FIELDSET</title>
</head>
<body>
<form action="handler.php">
<fieldset>
<legend>Trabajando con el tiempo</legend>
<input type="checkbox" /> Crear puntualidad (nunca llegará tarde a ningún lugar);<br />
<input type="checkbox" /> Curar la puntualidad (nunca se apurará a ningún lugar);<br />
<input type="checkbox" /> Cambiar la percepción del tiempo y los relojes.
<p><input type="submit" /></p>
</fieldset>
</form>
</body>
</html>
Para Qué Usar la Etiqueta <fieldset>
- Creación de formularios para ingresar información de contacto utilizando
<fieldset>y<legend>. - Agrupación de elementos de formulario que pertenecen a una misma categoría, como tarjetas de crédito, mediante el uso de
<fieldset>y<legend>. - Creación de secciones de búsqueda en un formulario utilizando
<fieldset>y<legend>para dividir las categorías de búsqueda, como ubicación, tipo de objeto, etc.
Atributos globales
La etiqueta HTML <fieldset> admite todos los atributos globales de HTML.
Limitaciones
La etiqueta <fieldset> no puede estar anidada dentro de la etiqueta <legend>. Además, no se recomienda utilizar la etiqueta <fieldset> dentro de la etiqueta <table>.
