<fieldset>: O elemento "Field Set"

elemento HTML <fieldset> é utilizado para agrupar vários controlos, bem como as etiquetas (<label>) dentro de um formulário da Web.

As the example above shows, the <fieldset> element provides a grouping for a part of an HTML form, with a nested <legend> element providing a caption for the <fieldset>. It takes few attributes, the most notable of which are form, which can contain the id of a <form> on the same page, allowing you to make the <fieldset> part of that <form> even if it is not nested inside it, and disabled, which allows you to disable the <fieldset> and all its contents in one go.


This element includes the global attributes.

disabled HTML5
If this Boolean attribute is set, all form controls that are descendants of the <fieldset>, are disabled, meaning they are not editable but will be submitted along with <form> in comparison with disabled attribute on form controls. They won't receive any browsing events, like mouse clicks or focus-related events. By default browsers display such controls grayed out. Note that form elements inside the <legend> element won't be disabled.
form HTML5
This attribute takes the value of the id attribute of a <form> element you want the <fieldset> to be part of, even if it is not inside the form.
name HTML5
The name associated with the group.
Note: The caption for the fieldset is given by the first <legend> element nested inside it.

Estilizar com CSS

There are several special styling considerations for <fieldset>.

Its display value is block by default, and it establishes a block formatting context. If the <fieldset> is styled with an inline-level display value, it will behave as inline-block, otherwise it will behave as block. By default there is a 2px groove border surrounding the contents, and a small amount of default padding. The element has min-inline-size: min-content by default.

If a <legend> is present, it is placed over the block-start border. The <legend> shrink-wraps, and also establishes a formatting context. The display value is blockified (for example, display: inline behaves as block).

There will be an anonymous box holding the contents of the <fieldset>, which inherits certain properties from the <fieldset>. If the <fieldset> is styled with display: grid or display: inline-grid, then the anonymous box will be a grid formatting context. If the <fieldset> is styled with display: flex or display: inline-flex, then the anonymous box will be a flex formatting context. Otherwise it establishes a block formatting context.

You can feel free to style the <fieldset> and <legend> in any way you want to suit your page design.

Nota: as of this writing, there are bugs in Microsoft Edge and Google Chrome which prevent flexbox and grid layouts from being used inside a <fieldset>. This GitHub issue provides bug tracking links.


Simple fieldset

This example shows a really simple <fieldset> example, with a <legend>, and a single control inside it.

<form action="#">
    <legend>Simple fieldset</legend>
    <input type="radio" id="radio">
    <label for="radio">Spirit of radio</label>

"fieldset" desativado

This example shows a disabled <fieldset> with two controls inside it. Note how both the controls are disabled due to being inside a disabled <fieldset>.

<form action="#">
  <fieldset disabled>
    <legend>Disabled fieldset</legend>
      <label for="name">Name: </label>
      <input type="text" id="name" value="Chris">
      <label for="pwd">Archetype: </label>
      <input type="password" id="pwd" value="Wookie">

Resumo técnico

Categorias de conteúdo Flow content, sectioning root, listed, form-associated element, palpable content.
Conteúdo permitido An optional <legend> element, followed by flow content.
Omissão de etiqueta None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts flow content.
Permitted ARIA roles group, presentation
Interface DOM HTMLFieldSetElement


Especificação Estado Comentário
HTML Living Standard
The definition of '<fieldset>' in that specification.
Living Standard Definition of the fieldset element
The definition of '<fieldset>' in that specification.
HTML 4.01 Specification
The definition of '<fieldset>' in that specification.
Recommendation Initial definition

Compatibilidade de navegador

BCD tables only load in the browser

Consulte também: