Front-end com Vue 3

Aparência

Atividade de Casa ​

Para a Atividade de Casa, vamos nos aprofundar no mundo dos formulários HTML, uma habilidade indispensável para qualquer desenvolvedor web. Os formulários são o coração da interatividade na web, permitindo que os sites se comuniquem com seus usuários. Por meio desta atividade, você terá a oportunidade de praticar a criação de formulários, explorar a vasta gama de tipos de inputs disponíveis e testar diferentes atributos para entender como cada um influencia o comportamento e a apresentação do formulário.

Objetivos da Tarefa ​

  • Criar Diferentes Tipos de Formulários: Desafie-se a criar formulários variados, como um formulário de inscrição, um formulário de feedback e um formulário de pedido. Isso ajudará você a entender como estruturar formulários para diferentes necessidades e contextos.

  • Explorar Tipos de Inputs: HTML oferece uma variedade de tipos de inputs para coletar diferentes tipos de dados. Experimente com campos de texto (text), números (number), datas (date), seletores de cor (color), e-mail (email), entre outros, para ver como cada um funciona.

  • Utilizar Atributos de Formulário: Atributos como placeholder, required, min e max adicionam funcionalidades importantes aos elementos do formulário. Use esses atributos para melhorar a experiência do usuário e garantir que os dados coletados sejam válidos.

Diretrizes para a Atividade ​

  1. Comece com um Esboço: Antes de codificar, esboce o layout e a estrutura do seu formulário. Decida quais informações você precisa coletar e que tipo de input é mais adequado para cada uma.

  2. Atenção aos Detalhes: Use a tag <label> para associar cada input a um rótulo explícito. Isso não é apenas uma boa prática de acessibilidade, mas também melhora a experiência do usuário.

  3. Feedback Visual: Implemente validação do lado do cliente para fornecer feedback imediato aos usuários sobre o preenchimento do formulário. Experimente com atributos como required para campos obrigatórios e pattern para validação de formato.

  4. Estilize Seu Formulário: Use CSS para estilizar seu formulário e torná-lo visualmente atraente. Considere aspectos como layout, cores, espaçamento e tipografia.

Exemplo de Tarefa ​

html
<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <title>Formulário de Feedback</title>
  </head>
  <body>
    <form>
      <label for="nome">Nome:</label>
      <input type="text" id="nome" name="nome" required /><br />
      <label for="email">E-mail:</label>
      <input
        type="email"
        id="email"
        name="email"
        placeholder="exemplo@dominio.com"
        required
      /><br />
      <label for="mensagem">Mensagem:</label>
      <textarea id="mensagem" name="mensagem" rows="4" required></textarea
      ><br />
      <input type="submit" value="Enviar Feedback" />
    </form>
  </body>
</html>

Ao concluir esta tarefa, você terá uma compreensão mais profunda de como criar formulários funcionais e atraentes que podem ser usados para coletar dados dos usuários de maneira eficiente. Esta prática é fundamental para qualquer desenvolvedor que deseja criar sites interativos e centrados no usuário. Happy coding!