<fieldset>
==========

O **elemento HTML `<fieldset>`** é usado para agrupar elementos, assim como labels (`<label>`), dentro de um formulário web.

|  |  |
| --- | --- |
| Categorias de Conteúdo (en-US) | Conteúdo de fluxo (en-US),
 sectioning root, listed (en-US),
 form-associated (en-US)
 element, palpable content.
  |
| Conteúdo permitido | 
 Um elemento `<legend>` opcional, seguido por
 conteúdo de fluxo.
  |
| Omissão deTag | None, both the starting and ending tag are mandatory. |
| Elementos pai permitidos | 
 Qualquer elemento que aceita
 conteúdo de fluxo (en-US).
  |
| Interface DOM | `HTMLFieldSetElement` (en-US) |

> 
> **Note:** diferente de quase todo outro elemento, a especificação do WHATWG HTML Rendering sugere ``min-width` (en-US): min-content` como parte do padrão de estilo para `<fieldset>`, e muitos navegadores implementam tal estilização (ou algo que se aproxima disto).
> 
> 
> 

Atributos
---------

Este elemento inclui os atributos globais (en-US).

`disabled`

Se este atributo Booleano está definido, os controles de formulario que são seus descendentes, exceto os descendentes de seu primeiro elemento opcional `<legend>`, estarão desativados, i.e., não editável. Eles não receberão qualquer evento de navegação, como clique do mouse ou relacionado com focus. Frequentemente os navegadores mostram tais controles em cinza.

`form`

Este atributo tem o valor do atributo **id** do elemento `<form>` (en-US) com que se relaciona. Seu valor padrão é o **id** do elemento `<form>` (en-US) mais próximo.

`name`

O nome associado com o grupo.

> 
> **Note:** O label para o fieldset é dado pelo primeiro elemento `<legend>` que é um filho do fieldset.
> 
> 
> 

Exemplos
--------

### Example #1: Formulário com fieldset, legend, e label


```html
<form action="test.php" method="post">
  <fieldset>
    <legend>Title</legend>
    <input type="radio" id="radio" /> <label for="radio">Click me</label>
  </fieldset>
</form>
```

### Example #2: Simulando um editável `<select>` através de um `fieldset` de radioboxes e textboxes\*

O exemplo a seguinte é feito de puro HTML e CSS. Não contém javascript.

**Esteja avisado** que leitores de tela (utilizados por cegos) e dispositivos de assistência não interpretarão o seguinte formulário corretamente; este exemplo seria um html invalido se os corretos elementos fossem usados.


```html
<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Editable [pseudo]select</title>
    <style type="text/css">
 /\* Generic form fields \*/

 fieldset.elist,
 input[type="text"],
 textarea,
 select,
 option,
 fieldset.elist ul,
 fieldset.elist > legend,
 fieldset.elist input[type="text"],
 fieldset.elist > legend:after {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 }

 input[type="text"] {
 padding: 0 20px;
 }

 textarea {
 width: 500px;
 height: 200px;
 padding: 20px;
 }

 textarea,
 input[type="text"],
 fieldset.elist ul,
 select,
 fieldset.elist > legend {
 border: 2px #cccccc solid;
 border-radius: 10px;
 }

 input[type="text"],
 fieldset.elist,
 select,
 fieldset.elist > legend {
 height: 32px;
 font-family: Tahoma;
 font-size: 14px;
 }

 input[type="text"]:hover,
 textarea:hover,
 select:hover,
 fieldset.elist:hover > legend {
 background-color: #ddddff;
 }

 select {
 padding: 4px 20px;
 }

 option {
 height: 30px;
 padding: 5px 4px;
 }

 option:not(:checked),
 textarea:focus {
 background-color: #ffcccc;
 }

 fieldset.elist > legend:after,
 fieldset.elist label {
 height: 28px;
 }

 input[type="text"],
 fieldset.elist {
 width: 316px;
 }

 input[type="text"]:focus {
 background: #ffcccc
 url("data:image/gif;base64,R0lGODlhEAAQANU5APnoxuvr6+uxPdvb2+rq6ri4uO7qxunp6dPT06SHV+/rx8vLy+nezLO0sbe3t9Ksas+qaaCEV8rKyp2dnf39/QAAAK6ursifZHFxcc/Qzu3mxYyMjExCJnV1dc6maO7u7o+Pj2tXNoaGhtfDpKCDVu3lxM+tcaKEV9bW1qOFVWNjY8KrisTExNra2nBbObGxsby8vO/mu7Kyso9ZAuzs7MSgAIiKhf///8zMzP///wAAAAAAAAAAAAAAAAAAAAAAACH5BAEAADkALAAAAAAQABAAAAaXwJxwSCwOYzWkMpkkZmoAqDQaJdpqAqw2m53NRjlboAarFczomcE0C99o8DgNMVM8Tm3bbYDr9x11DwkzDG5yc2oQJIRCenx/MxoeETM2Q3pxATMlF4MYlo17OAsdLispMyAioIY0BzMcITMTKBasjgssFTMqGxItMjYUoTQBBAQHxgE0wZcfMtDRMi/QrA022NnaNg1CQQA7")
 no-repeat 2px center !important;
 }

 input[type="text"]:focus,
 textarea:focus,
 select:focus,
 fieldset.elist > legend {
 border: 2px #ccaaaa solid;
 }

 fieldset {
 border: 2px #af3333 solid;
 border-radius: 10px;
 }

 /\* Editable [pseudo]select (i.e. fieldsets with [class=elist]) \*/

 fieldset.elist {
 display: inline-block;
 position: relative;
 vertical-align: middle;
 overflow: visible;
 padding: 0;
 margin: 0;
 border: none;
 }

 fieldset.elist ul {
 position: absolute;
 width: 100%;
 max-height: 320px;
 padding: 0;
 margin: 0;
 overflow: hidden;
 background-color: transparent;
 }

 fieldset.elist:hover ul {
 background-color: #ffffff;
 border: 2px #af3333 solid;
 left: 2px;
 overflow: auto;
 }

 fieldset.elist ul > li {
 list-style-type: none;
 background-color: transparent;
 }

 fieldset.elist label {
 display: none;
 width: 100%;
 }

 fieldset.elist input[type="text"] {
 width: 100%;
 height: 30px;
 line-height: 30px;
 border: none;
 background-color: transparent;
 border-radius: 0;
 }

 fieldset.elist > legend {
 display: block;
 margin: 0;
 padding: 0 0 0 5px;
 position: absolute;
 width: 100%;
 cursor: default;
 background-color: #ccffcc;
 line-height: 30px;
 font-style: italic;
 }

 fieldset.elist:hover > legend {
 position: relative;
 overflow: hidden;
 }

 fieldset.elist > legend:after {
 width: 20px;
 content: "\2335";
 float: right;
 text-align: center;
 border-left: 2px #cccccc solid;
 font-style: normal;
 cursor: default;
 }

 fieldset.elist:hover > legend:after {
 background-color: #99ff99;
 }

 fieldset.elist ul input[type="radio"] {
 display: none;
 }

 fieldset.elist input[type="radio"]:checked ~ label {
 display: block;
 width: 292px;
 background-color: #ffffff;
 }

 fieldset.elist:hover input[type="radio"]:checked ~ label {
 width: 100%;
 }

 fieldset.elist:hover label {
 display: block;
 height: 100%;
 }

 fieldset.elist label:hover {
 background-color: #3333ff !important;
 }

 fieldset.elist:hover input[type="radio"]:checked ~ label {
 background-color: #aaaaaa;
 }
 </style>
  </head>
  <body>
    <form method="get" action="test.php">
      <fieldset>
        <legend>Order a T-Shirt</legend>
        <p>Write your name (simple textbox): <input type="text" /></p>
        <p>
          Choose your size (simple select):
          <select>
            <option value="s">Small</option>
            <option value="m">Medium</option>
            <option value="l">Large</option>
            <option value="xl">Extra Large</option>
          </select>
        </p>
        <div>
          What address do you want to use? (editable pseudoselect)
          <fieldset class="elist">
            <legend>Address&hellip;</legend>
            <ul>
              <li>
                <input
 type="radio"
 value="1"
 id="address-switch\_1"
 checked /><label for="address-switch\_1"
 ><input
 type="text"
 value="19 Quaker Ridge Rd. Bethel CT 06801"
 /></label>
              </li>
              <li>
                <input type="radio" value="2" id="address-switch\_2" /><label
 for="address-switch\_2"
 ><input
 type="text"
 value="1000 Coney Island Ave. Brooklyn NY 11230"
 /></label>
              </li>
              <li>
                <input type="radio" value="3" id="address-switch\_3" /><label
 for="address-switch\_3"
 ><input
 type="text"
 value="2962 Dunedin Cv. Germantown TN 38138"
 /></label>
              </li>
              <li>
                <input type="radio" value="4" id="address-switch\_4" /><label
 for="address-switch\_4"
 ><input
 type="text"
 value="915 E 7th St. Apt 6L. Brooklyn NY 11230"
 /></label>
              </li>
            </ul>
          </fieldset>
        </div>
        <p>
          Write a comment:<br />
          <textarea></textarea>
        </p>
        <p>
          <input type="reset" value="Reset" />
          <input type="submit" value="Send!" />
        </p>
      </fieldset>
    </form>
  </body>
</html>
```


Veja este exemplo em ação

Especificações
--------------

| Specification |
| --- |
| HTML Standard # the-fieldset-element |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Erros
-----

* Erro do Firefox 504622 - Fieldsets nunca diminui abaixo de sua largura min-intrinsic
* WebKit bug 123507 - `min-width: `-webkit-min-content`` sobre fieldset
* StackOverflow discussão com soluções alternativas para os bugs acima
Veja também
-----------

* Outros elementos de formlários relacionados: `<form>` (en-US), `<legend>`, `<label>`, `<button>`, `<select>`, `<datalist>`, `<optgroup>`, `<option>`, `<textarea>`, `<input>`, `<output>`, `<progress>` e `<meter>`.
* Artigo de como usar o fieldset para ajudar na validação do seu formulário html