Etiqueta <fieldset> de HTML

Definição e Uso

<fieldset> A tag é usada para agrupar elementos relacionados em um formulário.

<fieldset> A tag desenha uma caixa ao redor do elemento relacionado.

<legend> A tag fieldset define um título para o elemento.

Veja também:

Manual de Referência DOM HTML:Objeto Fieldset

Exemplo

Exemplo 1

Groupar elementos relacionados no formulário:

<form action="/action_page.php">
  <fieldset>
    <legend>Informações pessoais:</legend>
    <label for="fname">Nome:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">Sobrenome:</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="birthday">Birthday:</label>
    <input type="date" id="birthday" name="birthday"><br><br>
    <input type="submit" value="Enviar">
  </fieldset>
</form>

Experimente você mesmo

Exemplo 2

Use CSS para definir o estilo de <fieldset> e <legend>:

<html>
<head>
<style>
fieldset {
  background-color: #eeeeee;
}
legend {
  background-color: gray;
  color: white;
  padding: 5px 10px;
}
input {
  margin: 5px;
}
</style>
</head>
<body>
<form action="/action_page.php">
  <fieldset>
    <legend>Informações pessoais:</legend>
    <label for="fname">Nome:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">Sobrenome:</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="email">E-mail:</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="birthday">Aniversário:</label>
    <input type="date" id="birthday" name="birthday"><br><br>
    <input type="submit" value="Enviar">
  </fieldset>
</form>
</body>
</html>

Experimente você mesmo

Dicas e comentários

Dica:A tag <legend> é usada para definir o título do elemento <fieldset>.

Atributo

Atributo Valor Descrição
disabled disabled Define que um grupo de elementos de formulário deve ser desativado.
form form_id Define a pertença do conjunto de campos a qual formulário.
name Texto Define o nome do conjunto de campos.

Atributos globais

<fieldset> A tag também suporta Atributos globais no HTML。

Atributo de evento

<fieldset> A tag também suporta Atributo de evento no HTML。

Configurações CSS padrão

A maioria dos navegadores exibirá os seguintes valores padrão <fieldset> Elemento:

fieldset {
  display: bloco;
  margin-left: 2px;
  margin-right: 2px;
  padding-top: 0,35em;
  padding-bottom: 0,625em;
  padding-left: 0,75em;
  padding-right: 0,75em;
  border: 2px groove (valor interno);
}

Suporte de navegador

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte