HTML fieldset

La etiqueta <fieldset> en HTML5 es utilizada para agrupar elementos relacionados en un formulario web. El elemento <fieldset> se utiliza junto con la etiqueta <legend> para proporcionar una etiqueta o título para el grupo de elementos.

Ejemplo de uso

Un ejemplo de uso de la etiqueta <fieldset> sería el siguiente:

<form>
  <fieldset>
    <legend>Personal Information</legend>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br>
    <label for="phone">Phone:</label>
    <input type="tel" id="phone" name="phone">
  </fieldset>
</form>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, se usa la etiqueta <fieldset> para agrupar los elementos del campo “Nombre”, “Correo electrónico” y “Teléfono” juntos. La etiqueta <legend> proporciona un título para el grupo de elementos “Información Personal”.

Atributos

Los atributos más comunes de la etiqueta <fieldset> de HTML son:

• disabled: Indica si el conjunto de campos está habilitado o deshabilitado

• form: Especifica el ID del formulario al que pertenece el conjunto de campos.

• name: Especifica un nombre para el conjunto de campos, el cual puede ser usado para referirse a él en JavaScript.

• legend: Especifica el título o etiqueta del conjunto de campos.

Además, también se pueden emplear atributos globales como id, class, style, entre otros.

Ejemplo

Un ejemplo completo de la etiqueta <fieldset> de HTML podría ser el siguiente:

<form>
  <fieldset name="personal_info" disabled>
    <legend>Información personal:</legend>
    <label for="name">Nombre:</label>
    <input type="text" id="name" name="name" required><br><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="phone">Teléfono:</label>
    <input type="tel" id="phone" name="phone"><br><br>
  </fieldset>
  <br>
  <input type="submit" value="Enviar">
</form>

Lenguaje del código: HTML, XML (xml)

En este ejemplo se crea un formulario usando la etiqueta <form>, dentro del cual se emplea la etiqueta <fieldset> para agrupar los campos relacionados a la información personal del usuario. Se utiliza el atributo “name” para darle un nombre al conjunto de campos y el atributo “disabled” para deshabilitarlo.

También se usa la etiqueta <legend> para proporcionar un título para el conjunto de campos y las etiquetas <label> para proporcionar etiquetas para los campos de entrada.