HTML fieldset

Postado: 25 de março de 2022

HTML fieldset

A tag HTML <fieldset> é encontrada dentro da tag <form> e é usada para agrupar elementos, assim como <label> relacionados em um formulário HTML. Use uma tag <legend> para criar uma legenda para o <fieldset>. Essa tag também é comumente chamada de elemento <fieldset>.

Veja um exemplo <fieldset> no Formulario Html.

Vamos agrupar quatro elementos relacionados – Nome, E-mail, Endereço e whatsapp.

<form>
  <fieldset>
    
   <legend>Deixe seus dados para contato.</legend>
    Nome: <input type="text" name="nome"><br>
    E-mail: <input type="text" name="email"><br>
    Endereço: <input type="text" name="endereco"><br>
    Whatsapp: <input type="text" name="whatsapp">
  
</fieldset>
</form>

O elemento HTML <fieldset> é encontrado na tag <body> . É usado para agrupar rótulos e controles relacionados na tag <form> .

A maioria dos navegadores renderizará a tag <fieldset> com uma borda preta ao redor, Além disso você pode alterar esse comportamento com estilizando com CSS.

Você pode também pode usar a tag <legend> para exibir uma legenda para o <fieldset>. Essa legenda será renderizada antes dos controles de formulário relacionados no <fieldset> e parecerá flutuar sobre a borda superior do <fieldset>.

Veja mais um exemplo na prática!

<form action="envia_dados.php">
  <fieldset>
    <legend>Deixe seus Dados:</legend>
      
      <label for="nome">Nome:</label>
      <input type="text" id="nome" name="nome"><br><br>
    
      <label for="sobrenome">Sobrenome:</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">Data de Aniversário:</label>
      <input type="date" id="aniversario" name="aniversario"><br><br>
    
      <input type="submit" value="Enviar">
  
</fieldset>
</form>

Veja outros artigos sobre tags de Formulário no HTML.

  1. Formulário HTML
  2. Formulário Estilizado com HTML e Css
  3. Formulário Html – Busca Com Efeito Neon
  4. Máscara nos Inputs do Formulário Com jQuery Mask
  5. Formulário de Login Simples
  6. Como criar Formulários com CSS e Html
  7. HTML Button

Publicado por: loopnerd

381 Visualizações

Deixe um comentário

O seu endereço de e-mail não será publicado.

Artigos Relacionados