WDD 130: Fundamentos da Web

S05 – Atividade de Aprendizagem: Formulários HTML

Visão Geral

Os formulários HTML nos permitem interagir com o usuário e coletar dados. O elemento de formulário (form) é o contêiner para todos os elementos de formulário e inclui atributos que permitem tratar os dados. Nesta atividade, você se concentrará apenas no design e desenvolvimento de front-end, aprendendo a criar um formulário usando elementos básicos de formulário. O tratamento dos dados do formulário após o envio está além do escopo deste curso.

Preparação

Os formulários HTML são seções especiais de uma página da web para que os usuários insiram e enviem informações. Considere os formulários como versões digitais dos formulários em papel que você preenche no consultório médico ou ao se candidatar a algo. Eles coletam informações dos usuários e as enviam a um servidor web para processamento.

Os formulários são essenciais para a criação de sites interativos. Elas permitem que os usuários pesquisem informações, criem contas, façam compras, enviem mensagens e realizem diversas outras tarefas que exigem a interação do usuário. Você aprenderá mais sobre os formulários em cursos futuros. Nesta atividade, você se familiarizará com as partes mais importantes dos formulários HTML.

Estrutura Básica de Formulário

Todo formulário HTML começa com uma tag <form> e termina com uma tag </form>. Todos os elementos dele devem ser colocados entre essas tags. A tag <form> indica ao navegador que todo o conteúdo dela faz parte do mesmo formulário.

Abaixo estão as partes mais importantes de um formulário:

• Contêiner de formulário – O elemento <form> que contém todas as partes do formulário.
• Campos de formulário – Usados para os usuários digitarem ou selecionarem informações.
• Labels – Rótulos que descrevem a finalidade de cada campo do formulário.
• Botão Enviar (Submit) – O botão em que os usuários clicam para enviar suas informações.

<form>
  <label for="nome-de-usuario">Nome de Usuário:</label>
  <input type="text" id="nome-de-usuario" name="nome-de-usuario">
  <button type="submit">Enviar</button>
</form>

O exemplo acima mostra um formulário simples com um campo para adicionar nome de usuário e um botão de envio. O elemento label descreve a finalidade da entrada, enquanto o atributo for conecta esse label ao campo de entrada. Você pode testar isso acima, clicando no texto de label, o que focará o campo de entrada.

Elementos Comuns dos Campos de Formulário

O HTML oferece diversos tipos de elementos dos campos de formulário para coletar diferentes tipos de informações dos usuários. Cada elemento tem uma função específica e aparece de forma diferente na página da web.

Abaixo estão os elementos de formulário mais utilizados:

• Text input – Para linhas únicas de texto, como nomes ou endereços de e-mail.
• Password input – Para informações secretas que devem ser ocultadas, como senhas
• Textarea – Para textos mais longos, como comentários ou mensagens.
• Checkbox – Caixa de seleção para opções sim/não ou múltipla escolha.
• Radio buttons – Botões para escolher uma opção dentre várias opções.
• Select dropdown – Menu suspenso para escolher algo de uma lista.

<form>
  <label for="email">E-mail</label>
  <input type="email" id="email" name="email">
  
  <label for="senha">Senha</label>
  <input type="password" id="password" name="senha">
  
  <label for="mensagem">Sua Mensagem</label>
  <textarea id="mensagem" name="mensagem" rows="4"></textarea>
  
  <label><input type="checkbox" id="newsletter" name="newsletter"> Quero receber novidades</label> 

  <button type="submit">Enviar Mensagem</button>
</form>

Esse exemplo demonstra vários tipos diferentes de entrada funcionando juntos em um único formulário. Observe como cada campo possui um atributo de entrada id e um atributo name – eles são importantes para que o formulário funcione corretamente.

Atributos de Entrada

Os elementos de entrada usam atributos para controlar seu comportamento e interação com a entrada de dados. Entender esses atributos ajuda você a criar formulários que funcionam corretamente e proporcionam uma boa experiência aos usuários.

Atributos de entrada importantes:

• type – Define o tipo de entrada (texto, e-mail, senha, etc.)
• name – Um identificador único para cada elemento do formulário
• id – Outro identificador usado para conectar labels a entradas
• required – Define o preenchimento de um campo como obrigatório
• placeholder – Exibe um texto de exemplo dentro de um campo de entrada.
• value – Define um valor padrão para o campo de entrada

<form>
  <label for="nomecompleto">Nome Completo:</label>
  <input type="text" id="nome-completo" name="nome-completo" required>
  
  <label for="telefone">Número de Telefone:</label>
  <input type="tel" id="telefone" name="telefone" placeholder="123-456-7890">
  
  <button type="submit">Enviar Informações de Contato</button>
</form>

Neste exemplo, o campo nome completo é obrigatório. Você pode testar isso tentando enviar o formulário sem preenchê-lo. O navegador impedirá o envio e solicitará que você preencha o campo. O campo de número de telefone inclui um texto de exemplo para ajudar os usuários com o formato que devem preencher.

Instruções da Atividade

Primeiros Passos

1. Na pasta semana05 do seu repositório do curso wdd130, crie um novo arquivo chamado "formulario-pesquisa.html".
2. Crie uma página HTML básica com os elementos header, main e footer.

Monte o Formulário

1. Crie um elemento form dentro do elemento main.
2. Adicione os seguintes campos ao formulário. Certifique-se de usar um elemento label para cada elemento do formulário.
   • O nome completo do usuário, usando um campo input de texto, com id de "nome-completo" e name de "nome-completo", sendo definido como required (obrigatório).
   • Endereço de e-mail do usuário usando input do tipo email, id de "emaildousuario", bem como um name como "emaildousuario", sendo definido como obrigatório com required.
     Avalie Seu Conhecimento

     <form>
       <label for="nomecompleto">Nome Completo:</label>
       <input type="text" id="nome-completo" name="nome-completo" required>
       <label for="emaildousuario">E-mail:</label>
       <input type="email" id="email-do-usuario" name="email-do-usuario" required>
     
     </form>

     Outra maneira válida de escrever isso é cercar os elementos input com o elemento label. Isso é chamado de método de "rótulo implícito". A seguir está um exemplo desse método:

     <label>Nome Completo: <input type="text" name="nome-completo" required></label>
     <label>E-mail: <input type="email" name="email-do-usuario" required></label>

   • Crie uma pergunta de múltipla escolha usando um elemento select que pergunte qual é o navegador favorito do usuário. Abaixo está um exemplo do elemento select com três opções:

     <label for="quantidade">Selecione a Quantidade</label>
     <select name="quantidade" id="quantidade">
       <option value="1">Um</option>
       <option value="2">Dois</option>
       <option value="3">Três</option>
     </select>

     Esse elemento select fica assim (com alguns estilos adicionais):

     ---

     Selecione a Quantidade Uma Duas Três
     A pergunta deveria ser "Qual é o seu navegador favorito?" Atribua um name e um id com o valor "navegador" ao elemento select e adicione pelo menos três opções para o usuário escolher. As opções podem incluir "Chrome", "Safari", "Edge", "Brave", "Outro", etc.
   • Inclua a pergunta: "Você tem um bichinho de estimação em casa?"
     Use um único elemento de caixa de seleção, checkbox. O valor do atributo id e name é "pet".
   • Inclua uma pergunta final: "Liste os lugares onde você morou."
     Use um elemento textarea e forneça valores de atributos placeholder. Além disso, inclua um atributo name e id de "feedback" e defina o número de linhas, rows.
   Avalie Seu Conhecimento

   <label for="navegador">Qual é o seu navegador de internet favorito?</label>
   <select id="navegador" name="navegador">
     <option value="chrome">Chrome</option>
     <option value="firefox">Firefox</option>
     <option value="edge">Edge</option>
     <option value="brave">Brave</option>
     <option value="other">Other</option>
   </select>
   <label for="pet"Você tem um bichinho de estimação?</label>
   <input type="checkbox" id="pet" name="pet">
   <label for="feedback">Liste os lugares onde você morou:</label>
   <textarea id="feedback" name="feedback" rows="4" placeholder="Stillwater Flórida, Amsterdã Holanda, Tibuktu Mali"></textarea>

3. Adicione um botão, button, do tipo submit no final do elemento form. O conteúdo do texto do botão é "Enviar Pesquisa".
   Avalie Seu Conhecimento

   <button type="submit">Enviar Pesquisa</button>

Teste e Envio

1. Teste e valide seu HTML no navegador.
2. Salve seu trabalho. O estilo em CSS será adicionado na próxima atividade.