Html legend

Html section

Html s

Postado: 19 de maio de 2022 Tempo de Leitura: < 1 Minuto

Html legend

Este artigo HTML explica como usar o elemento HTML chamado de tag <legend>.

A tag HTML <legend> é usada para gerar uma legenda para a tag <fieldset> ao agrupar itens relacionados em um formulário HTML.

Veja o exemplo no código Html

Agrupe elementos relacionados em um formulário:

A tag <legend> define uma legenda para o elemento <fieldset>.

<form>
  <fieldset>

    <legend>Informações</legend>
    Nome: <input type="text" name="nome"><br>
    Endereço: <input type="text" name="endereco"><br>
    Telefone: <input type="text" name="telefone">

  </fieldset>
</form>

Observação

O elemento HTML <legend> é encontrado na tag <body> . Ele é usado para fornecer uma legenda para os itens relacionados agrupados na tag <fieldset> .
A legenda gerada pela tag <legend> será renderizada antes dos controles de formulário relacionados no <fieldset> e parecerá flutuar sobre a borda superior do <fieldset>.

Dica: Use CSS para estilizar <fieldset> e <legend>:

<html>
<head>
<style>

fieldset { background-color: #bfbfbf; }

legend {

  background-color: gray;
  color: #ffffff;
  padding: 5px 10px;

}

input { margin: 5px; }

</style>
</head>
<body>

<form action="cadastrar.php">
  <fieldset>

    <legend>Informações:</legend>
    <label for="fnome">Nome:</label>
    <input type="text" id="fnome" name="fnome"><br><br>
    <label for="Sobrenome">Sobre nome:</label>
    <input type="text" id="Sobrenome" name="sobrenome"><br><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="aniversario">Aniversário:</label>
    <input type="date" id="aniversario" name="aniversario"><br><br>
    <input type="submit" value="Enviar">

  </fieldset>
</form>

</body>
</html>

Neste artigo abordamos sobre a tag Html legend.

Veja outros artigos sobre Relacionados.

HTML Select

Formulário Estilizado com HTML e Css

Máscara nos Inputs do Formulário Com jQuery Mask

Trocar Select com jQuery

Publicado por: Loop Nerd

474 Visualizações