Etiqueta HTML <fieldset>
La etiqueta <fieldset> agrupa visualmente campos lógicamente relacionados en un formulario HTML definido con la etiqueta <form>. La etiqueta permite dividir los formularios en secciones lógicas. En los navegadores, se dibuja un recuadro alrededor del contenido.
Sintaxis
La etiqueta <fieldset> se usa 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-day">Place of birth:</label>
<input type="text" id="birth-day" />
</div>
</fieldset>
</form>
</body>
</html>Resultado
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 tus formularios.
Atributos
| Atributo | Valor | Descripción |
|---|---|---|
| disabled | disabled | Indica que un grupo de elementos de formulario relacionados debe estar deshabilitado. |
| form | form_id | Define uno o más identificadores de formulario (id) a los que pertenece el conjunto de elementos relacionados. Si hay varios identificadores, deben separarse por espacios. |
La etiqueta <fieldset> admite los Atributos Globales y los Atributos de Eventos.
Práctica
¿Cuál es la función de la etiqueta HTML fieldset?