Aula 03

🎯 Objetivo da Aula:

• Criar um formulário simples utilizando as tags HTML adequadas, como <form>, <input>, <label>, <textarea>, e <button>.
  
  

• Aplicar CSS para estilizar o formulário, especialmente usando a propriedade margin para adicionar espaçamento e alinhar os elementos de maneira eficaz.

Introdução:

Os formulários são elementos essenciais em HTML para coletar dados dos usuários. Eles são usados para coisas como cadastros, pesquisas, comentários e muito mais.

1. Tags HTML para Formulários:

• <form>: A tag que contém os campos do formulário e define a área onde o usuário pode inserir dados.
  
  

• <input>: Usada para criar campos de entrada, como texto, e-mail, senha, etc.

🌎🔗 Tipos de input -  W3schools

• <textarea>: Usada para criar campos de texto de múltiplas linhas (ideal para mensagens).
  
  

• <button>: Usado para criar botões, como botões de envio.
  
  

2. Estilizando com CSS: Margin

• A propriedade margin é usada para adicionar espaçamento externo aos elementos, criando distância entre eles e outros elementos.
  
  

• Exemplo: margin-bottom: 10px; adiciona 10px de espaço abaixo do elemento.

💠 Atributo id:

• Objetivo: O id é usado para identificar de forma única um elemento na página HTML. Cada id deve ser único dentro de um documento HTML, ou seja, não pode haver dois elementos com o mesmo id.
  
  

• Uso: O id é comumente usado para:
  
  

  1. Estilização: Ele pode ser usado em CSS para aplicar estilos específicos a um único elemento.
     
     

  2. Manipulação com JavaScript: Ele é frequentemente utilizado para acessar e manipular elementos via DOM (Document Object Model).
     
     

  3. Referência em links: Pode ser utilizado em um link com #, para fazer a página rolar até o elemento com aquele id.

💡Exemplo de uso do id:

<input type="text" id="mensagem">

Neste exemplo, o id="mensagem" torna esse campo de texto único na página. Com isso, podemos acessar esse campo especificamente para manipulação com JavaScript ou para aplicar estilos no CSS.

💡Uso com JavaScript:

let campoMensagem = document.getElementById("mensagem");

campoMensagem.value = "Mensagem alterada";

💡Uso com CSS:

#mensagem {

    background-color: yellow;

}

💠 Atributo name:

• Objetivo: O name é usado para identificar dados ao enviar um formulário. Diferente do id, o name pode ser compartilhado por vários elementos (múltiplos campos de formulário podem ter o mesmo name).
  
  

• Uso: O name é usado principalmente em formulários para identificar os dados enviados para o servidor.
  
  

  • Quando o formulário é enviado, o valor do campo é enviado junto com o name, formando um par de chave/valor. O name serve como a chave e o valor é o dado inserido pelo usuário.
    
    

  • O name não é usado para estilização ou manipulação direta com JavaScript, mas é crucial para a submissão de formulários.
    
    

💡Exemplo de uso do name:

<input type="text" name="mensagem">

Quando o formulário for enviado, o campo mensagem será enviado com o valor que o usuário inserir, com o nome mensagem associado a ele.

💡Exemplo de envio de dados:

Ao enviar o formulário, os dados serão enviados como:

mensagem=Texto inserido pelo usuário

Resumo:

• id: Serve para identificar unicamente um elemento na página. Usado para manipulação no JavaScript e estilos no CSS.
  
  

• name: Usado para identificar os campos de um formulário, permitindo que os dados inseridos pelo usuário sejam enviados ao servidor sob aquele nome.

Explicação:

• O margin: 0 auto; no formulário centraliza ele na página.
  
  

• A margem é aplicada aos labels, inputs e textarea para garantir que os campos não fiquem colados uns aos outros.
  
  

• O botão tem uma cor de fundo e muda de cor quando o usuário passa o mouse sobre ele, criando uma interação agradável.

2️⃣ Estilizar o Formulário com Bordas e Margens 🎓

Contextualização: Formulário de Inscrição para Curso de Faculdade

Neste exercício, vamos criar um formulário para que um aluno se inscreva em um curso de faculdade. O aluno deverá preencher nome, e-mail, telefone e escolher o curso que deseja fazer.

Objetivo:

• Criar um formulário com margens e bordas arredondadas para cada campo.

• Usar os campos de entrada para capturar nome, e-mail, telefone e o curso desejado.

💡Dica para seleção em formulário:

<label for="curso">Curso Desejado:</label>

        <select id="curso" name="curso">

            <option value="engenharia">Engenharia</option>

            <option value="medicina">Medicina</option>

            <option value="direito">Direito</option>

            <option value="computacao">Computação</option>

        </select>

3️⃣ Formulário de Cadastro de Cachorros em um Sistema de Adoção 🐶

Objetivo: Criar um formulário de cadastro para um sistema de adoção de cachorros.

Contextualização:

Imagine que você está criando um formulário para cadastrar cachorros em um sistema de adoção de animais. O formulário deve coletar informações sobre o cachorro, como nome, idade, raça, sexo e informações adicionais (como características ou necessidades especiais).

Instruções:

1. Criar os seguintes campos de entrada:
   
   

   • Nome do Cachorro (campo de texto)

   • Idade (campo numérico)

   • Raça (campo de texto)

   • Sexo (campo de seleção)

   • Informações Adicionais (campo de texto)
     
     

2. Estilizar o formulário utilizando CSS para criar margens e melhorar o espaçamento entre os campos.

4️⃣ Formulário de Inscrição para Evento de Música 🎤

Objetivo: Criar um formulário para inscrição em um evento de música.

Contextualização:

Agora, imagine que você está criando um formulário para que as pessoas possam se inscrever em um evento de música. O formulário deve coletar informações como nome, e-mail, tipo de ingresso (para quem vai ao evento), e preferência de música.

Instruções:

1. Criar os seguintes campos de entrada:
   
   

   • Nome (campo de texto)

   • E-mail (campo de e-mail)

   • Tipo de Ingresso (campo de seleção)

   • Preferência de Música (campo de texto)
     
     

2. Estilizar o formulário aplicando margens e paddings.

3. Incluir imagens e informações sobre os artistas ou bandas que irão de apresentar. 

5️⃣Formulário de Cadastro de Livro para uma Biblioteca 📚

Objetivo: Criar um formulário para cadastrar um livro em um sistema de biblioteca.

Contextualização:

Agora, imagine que você está criando um formulário para cadastrar livros em um sistema de biblioteca. O formulário deve coletar informações sobre o título do livro, autor, data de publicação, gênero e uma breve descrição.

Instruções:

1. Criar os seguintes campos de entrada:

   • Título do Livro (campo de texto)

   • Autor (campo de texto)

   • Data de Publicação (campo de data)

   • Gênero (campo de seleção)

   • Descrição (campo de texto para uma breve descrição sobre o livro)

2. Estilizar o formulário utilizando CSS, aplicando margens e paddings para garantir uma boa distribuição entre os campos.

3 - Estilize a página com CSS e inclua decorações referentes ao tema de biblioteca. 

Desafio: Criar um Formulário com Interatividade em JavaScript e Estilização com CSS

Contextualização:

Você foi contratado para criar um formulário de cadastro de usuário que, ao ser enviado, mostre uma mensagem de sucesso ao usuário com uma interação em JavaScript. Além disso, você deve alterar a aparência da página e da fonte ao enviar o formulário, e exibir os dados inseridos no próprio site.

Instruções:

1. Formulário de Cadastro:

   • O formulário deve ter os seguintes campos:

     1. Nome Completo (campo de texto)

     2. E-mail (campo de e-mail)

     3. Mensagem (campo de texto)

     4. Botão de Envio
        
        

2. JavaScript:

   • Ao clicar no botão de enviar, o JavaScript deve:

     1. Exibir um alert informando que o formulário foi enviado com sucesso.

     2. Escrever os dados do formulário na página usando document.write().

💡Será necessária a criação de uma função em JavaScript utilizando o  getElementById, criação de variáveis, alert e document.write!

3. CSS:

   • Use CSS para:

     1. Estilizar o formulário (ajustando a largura e o espaçamento).

     2. Alterar o corpo da página (background, cor do texto, etc.) e a fonte quando o formulário for enviado.