Criando um Formulário com a Tag Fieldset

Introdução

A tag HTML <fieldset> é usada para agrupar elementos HTML, e pode ajudar a criar documentos organizados e bem estruturados. Usar a tag <fieldset> permite agrupar campos relacionados em um formulário para exibir os campos de forma mais organizada.

Neste laboratório, demonstraremos como você pode usar a tag <fieldset> para criar formulários estruturados e organizados.

Nota: Você pode praticar a codificação em index.html e aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Criando uma Página HTML

Crie um arquivo chamado index.html e escreva a estrutura básica da página HTML.

<!doctype html>
<html>
  <head>
    <title>Criando um Formulário com a Tag Fieldset</title>
  </head>
  <body></body>
</html>

Criando o Formulário com Fieldset

Adicione um elemento de formulário ao corpo HTML e, em seguida, use a tag <fieldset> para agrupar campos de formulário relacionados. Também adicionaremos a tag label aos elementos do formulário para adicionar uma descrição ao campo de entrada.

<form>
  <fieldset>
    <legend>Detalhes do Usuário</legend>
    <label for="fname">Primeiro Nome:</label>
    <input type="text" id="fname" name="firstname" /><br /><br />
    <label for="lname">Sobrenome:</label>
    <input type="text" id="lname" name="lastname" /><br /><br />
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" /><br /><br />
  </fieldset>
  <fieldset>
    <legend>Detalhes da Conta</legend>
    <label for="uname">Nome de Usuário:</label>
    <input type="text" id="uname" name="username" /><br /><br />
    <label for="pass">Senha:</label>
    <input type="password" id="pass" name="password" /><br /><br />
  </fieldset>
  <input type="submit" value="Enviar" />
</form>

O código acima criará um formulário que é estruturado em dois fieldsets. O primeiro fieldset agrupa os detalhes pessoais do usuário, e o segundo fieldset agrupa os detalhes da conta. Você pode notar que usamos a tag label para fornecer algum contexto para os campos.

Adicionando CSS

Podemos estilizar o fieldset usando CSS para dar a ele um design adequado. Podemos adicionar uma borda, background-color e algum padding para deixar o fieldset com uma aparência melhor.

<style>
  fieldset {
    padding: 10px;
    border: 1px solid #c0c0c0;
    border-radius: 4px;
    margin: 5px;
    background-color: #f8f8f8;
  }
</style>

Abra o arquivo HTML no seu navegador para visualizar o formulário e testá-lo.

Resumo

A tag fieldset cria um documento organizado e bem estruturado. É útil para criar formulários. Use as tags label para fornecer contexto para os campos de entrada. A tag fieldset agrupa campos de formulário relacionados e adiciona uma borda ao redor dos campos relacionados. Finalmente, a estilização CSS fornece design ao fieldset, o que o torna com uma aparência melhor.

Agrupamento de Formulários HTML

Introdução

Criando uma Página HTML

Criando o Formulário com Fieldset

Adicionando CSS

Resumo