HTML fieldset
Postado: 25 de março de 2022
Tempo de Leitura: < 1 Minuto
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.
- Formulário HTML
- Formulário Estilizado com HTML e Css
- Formulário Html – Busca Com Efeito Neon
- Máscara nos Inputs do Formulário Com jQuery Mask
- Formulário de Login Simples
- Como criar Formulários com CSS e Html
- HTML Button
Publicado por: Loop Nerd
1.065 Visualizações
Deixe um comentário