Fazendo-formulario---tags-e-inputs

Prévia do material em texto

1 
Módulo 04 
Fazendo formulário: tags e inputs 
 
00:00:00 Bom, então vamos continuar aqui. 
Então a gente terminou a nossa primeira solicitação, que foi a criação de um menu na parte 
superior, para facilitar navegação. 
E agora vamos ver aqui qual é o nosso novo desafio. 
A gente vai criar então aqui um formulário, um formulário de contato para as usuárias do nosso 
site, se quiserem deixar o nome e e-mail aqui, para a gente mandar mais notícias, mais outras 
mulheres que fizeram história na programação. 
E como a gente vai fazer isso? 
Os formulários são um dos principais meios de interação da nossa usuária com a gente no nosso 
site, né. 
Então uma das formas mais utilizadas para interagir com os usuários é um formulário, onde eles 
podem colocar diversos tipos de dados e mandar para a gente. 
Vamos ver um exemplo aqui, olha, por exemplo aqui no site da Alura, a gente tem uma seção 
aqui de “Fale Conosco”, ele também tem o formulário. 
E aqui a gente tem nome, campo de nome, campo de e-mail, de telefone, e um campo aberto 
para mandar dúvidas, sugestões e elogios. 
Tem um botãozinho aqui que a gente pode clicar para dizer que a gente quer receber a 
newsletter deles, e tem um botão “enviar”. 
Então esse aqui é um formulário, a composição de um formulário. 
Ele é composto por vários campos, e um botão que vai fazer o envio de todos os dados. 
Então vamos dar uma olhada de novo aqui no nosso form, para a gente saber direitinho o que a 
gente tem que fazer. 
Então aqui no nosso form a gente tem um campo de nome e de e-mail, e tem um botão que vai 
fazer o envio desses dados. 
Além do formulário, que é esse conjunto aqui dos campos e o botão, a gente tem um título, né, 
um novo título aqui para esse formulário, que a gente também precisa colocar na nossa página. 
Então vamos lá na HTML para gente começar a desenvolver essa nova solicitação aqui. 
Vamos começar colocando o nosso título, e depois a gente começa a montar o formulário. 
Então vamos lá no nosso “index.HTML”, esse nosso formulário vai ficar no final da nossa página. 
Então a gente tem aqui a nossa navegação das divas, né, ela termina aqui embaixo no 
fechamento da etiqueta </nav>, linha 84. 
 
2 
Vamos dar um enter aqui, e vamos criar um título que ainda é menos importante do que a gente 
já tinha criado ali para seções de “Infância”, “Vida adulta” e “Juventude”. 
Então lá naquelas seções, a gente usou o <h3>, o título H3. 
Como esse é um pouquinho menos importante, a gente pode usar o <h4>. 
Então vamos passar o H4 aqui, fecha </h4>, e vamos passar o nosso texto aqui dentro. 
O nosso texto é “Quer saber mais sobre outras mulheres que fizeram história na programação? 
Deixe seu e-mail”. 
Então vamos salvar aqui, nosso HTML, vamos atualizar o nosso site, vamos ver se o nosso título 
apareceu lá. 
Eu não vou “escrollar” até o final, porque a gente criou um menu aqui em cima para facilitar 
nossa navegação. 
Então eu vou clicar aqui no “Vida adulta”, e termino de “escrollar”, só um pouquinho que falta 
aqui, ótimo, nosso título <h4> apareceu aqui, então a gente já pode dar prosseguimento e 
começar o nosso form. 
Então no HTML a gente tem a tag <form>, que é responsável pelos formulários. 
Então para a gente usar a tag <form>, a gente vem aqui, abre a etiqueta <form>, vamos dar um 
enter aqui, e vamos fechar a etiqueta <form> e vamos ver se a gente nota alguma mudança lá 
no nosso site. Salvamos aqui, voltar lá, atualizar. 
Não, nada aconteceu aqui, por quê? Porque a <tag> form ela não funciona sozinha. 
A tag <form>, assim como a gente viu aqui no exemplo da Alura, o <form> ele é composto por 
vários campos. 
00:04:02 Então no nosso caso, a gente só criou a nossa etiqueta de <form>, mas a gente não 
colocou nenhum campo dentro. 
Como será que a gente cria campos no HTML? 
Esses campos no HTML são chamados de “inputs”. Então a gente tem uma etiqueta para eles 
também, que é a etiqueta <input>, ela é autocontida, então a gente não precisa fechar. 
E aqui ela indica então para o navegador que está sendo criada uma caixa de informações de 
textos aqui dentro de um formulário. 
Vamos salvar aqui no nosso site, vamos ver se acontece alguma coisa na nossa página. 
Apareceu, se a gente “escrollar” aqui um pouquinho para baixo, apareceu um campo aqui agora, 
a gente pode digitar qualquer coisa nele. 
 
3 
Então vamos voltar lá no nosso HTML, e vamos criar outro <input> , porque a gente tem um de 
nome e um de e-mail. Então vamos aqui novamente mais um <input>. Vamos salvar e vamos 
ver se aparece o segundo lá. 
Atualizamos, então a gente tem dois campos aqui para enviar informações. 
Esses campos podem receber diferentes tipos de informação. 
No nosso caso aqui, a gente vai receber um nome e o e-mail, que apesar de ser um texto 
também, ele precisa ter um formato de e-mail, pelo menos com o “@”ali no conteúdo dele. 
Como a gente vai fazer para o navegador saber qual é o tipo de cada campo desse que a gente 
criou? 
Através do atributo “type”, que a gente pode passar para a nossa escrita de <input>. 
Então eu posso vir aqui no <input>, dar um espaço, a gente vai colocar mais uma informação 
para ele, que é um atributo, atributo “type”, que significa “tipo”. 
E aí o nosso primeiro campo, que é o campo de nome, não precisa ter nenhum formato 
específico. A gente pode passar um “type=”text””, pra receber texto. 
E para o nosso campo de e-mail, a gente precisa que ele tenha um formato específico ali, pelo 
menos um “@” arroba, para entender que é um e-mail. 
A gente pode passar então “type=”email””, certo? 
Então essas notificações que a gente fez de “type”, aqui, de colocar type=”text” e type=”email”, 
elas visualmente não vão ter, não vou apresentar para gente mudanças. 
Mas agora o HTML vai saber que esse <input> aqui ele vai receber informações do tipo de texto 
corrido, e esse <input> aqui vai receber informações que tem que ter um formato de e-mail. 
Então vamos voltar lá no nosso site. 
Como eu disse, não teve nenhuma mudança visual aqui para gente. São informações que vão 
ser usadas pelo navegador para diferenciar o tipo de dado que vai ser inserido em cada um 
desses campos. 
Então agora a gente já criou os dois campos de formulário, e a gente vai continuar a construção 
desse form no próximo vídeo.