Criando um Formulário de Contato Simples

Na Parte 5 de nossa jornada pelo universo do HTML, chegou a hora de colocar em prática tudo o que aprendemos até agora, especialmente no que diz respeito a trabalhar com formulários. O desafio de hoje é criar um Formulário de Contato Simples, uma habilidade essencial para qualquer desenvolvedor web. Esta atividade prática visa reforçar seu entendimento dos elementos de formulário HTML e como utilizá-los para coletar informações dos usuários de maneira eficaz.

Objetivos da Atividade

O objetivo é criar um formulário de contato que contenha:

• Um campo para o nome do usuário.
• Um campo para o e-mail do usuário.
• Uma seleção (usando <input type='radio'>) para o motivo do contato.
• Uma área de texto para a mensagem.
• Um botão de envio.

Instruções Passo a Passo

1. Estruturar o Formulário:

   • Comece com a tag <form> para definir a área do formulário. Não se esqueça de especificar os atributos action e method, mesmo que para este exercício eles não sejam utilizados (por exemplo, action="#" e method="post").

2. Campo para o Nome:

   • Utilize a tag <input> com o atributo type="text" para criar um campo onde os usuários possam digitar seus nomes. Use a tag <label> para adicionar um rótulo claro a este campo.

3. Campo para o E-mail:

   • Similar ao campo do nome, mas desta vez com type="email" para coletar o e-mail do usuário. Isso garante que o navegador valide o campo para endereços de e-mail.

4. Seleção do Motivo do Contato:

   • Crie várias opções de motivo usando <input type='radio'>. Cada opção deve ter o mesmo name mas values diferentes para diferenciá-las. Por exemplo, name="motivo" com valores como "Feedback", "Suporte", etc.

5. Área de Texto para a Mensagem:

   • Use a tag <textarea> para criar uma área onde os usuários possam digitar uma mensagem. Certifique-se de dar um name a esse campo, como name="mensagem".

6. Botão de Envio:

   • Finalize o formulário com um botão de envio, usando <input type="submit"> ou <button type="submit">Enviar</button> para permitir que o usuário envie o formulário.

Dicas para o Sucesso

• Foco na Usabilidade: Certifique-se de que cada campo tenha um rótulo claro e seja acessível.
• Validação de Front-end: Considere adicionar atributos como required para garantir que os campos necessários sejam preenchidos antes do envio do formulário.
• Feedback Visual: Enquanto circulo pela sala oferecendo ajuda, pense em como você pode melhorar o visual e a experiência do usuário com CSS.

Exemplo de Código

Aqui está um esboço básico de como seu formulário de contato pode parecer:

<form action="#" method="post">
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome" required />

  <label for="email">E-mail:</label>
  <input type="email" id="email" name="email" required />

  <p>Motivo do Contato:</p>
  <label
    ><input type="radio" name="motivo" value="feedback" required />
    Feedback</label
  >
  <label><input type="radio" name="motivo" value="suporte" /> Suporte</label>

  <label for="mensagem">Mensagem:</label>
  <textarea id="mensagem" name="mensagem" required></textarea>

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

Ao completar esta atividade, você terá não apenas praticado a criação de um elemento crucial para a interação do usuário na web, mas também aprofundado sua compreensão de como os formulários funcionam e como eles podem ser personalizados para atender a diferentes necessidades.