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.