Primeiras aulas do curso HTML5 e CSS3 parte 3: Trabalhando com formulários e tabelas

HTML5 e CSS3 parte 3: Trabalhando com formulários e tabelas

Criando uma nova página - Introdução

Bem-vindo ao terceiro módulo do curso de HTML e CSS. Eu sou o Pedro Marins, e vou continuar te guiando nessa jornada de aprendizado. Nós já vimos no módulo 1 o início das tags do HTML, já vimos o início do CSS, como que fazemos para marcar cada um dos elementos, já criamos a nossa página inicial da Barbearia Alura, é o projeto que nós estamos desenvolvendo nosso curso.

No módulo 2, nós criamos a página do produto, essa página bonita com um grande cabeçalho, com imagem, com itens de menu e comportamento diferente quando o mouse passa por cima desses itens.

Nós vimos os produtos que a Barbearia Alura oferece, inclusive um efeito visual por cima de cada um deles. Criamos nosso rodapé, mexemos com imagens, com caracteres especiais. Reforçamos o uso das listas, dos textos, dos títulos, como que fazemos um CSS perfeito para cada um desses itens. E agora, neste terceiro módulo, nós vamos criar a página de contato.

A página de contato da Barbearia Alura vai ter um grande formulário onde nós pedimos o nome, o e-mail, o telefone. Pedimos para o usuário nos mandar uma mensagem. Ele seleciona como prefere receber a ligação, como prefere receber o nosso contato, que horário ele prefere ser atendido. Ele ainda tem a opção de enviar isso e ver uma tabela com o horário de funcionamento.

Seguindo o mesmo padrão de página que nós criamos na página de produto, com aquele cabeçalho, rodapé e o conteúdo centralizado no meio, nós vamos do zero criar a página de contato. Passar por todos os itens, entender absolutamente tudo sobre formulário e tabela, como eles funcionam, como se comportam, como que nós criamos tags, marcamos esses elementos direito com CSS e temos no final essa página completa.

Esse é objetivo do nosso curso, tenho certeza que você vai aprender muito. Vamos nessa jornada, e te vejo no próximo vídeo.

Criando uma nova página - Começando a página de contato

Vamos começar a nossa página do contato. Antes nós só precisamos organizar um pouquinho o que já fizemos para partir daqui em uma velocidade muito maior. Uma dica muito legal para começarmos é como usar melhor o Sublime Text.

Se vocês abrirem o Sublime Text com ele vazio, vocês têm a opção de arrastar para dentro dele uma pasta. Ele cria na lateral aqui toda a estrutura do nosso código, e com isso nós conseguimos navegar entre nossos arquivos muito mais facilmente. Esse é o primeiro passo para nós começarmos a estruturar o nosso projeto. Vocês têm disponível na pasta de vocês todos esses arquivos que estamos usando para começar o projeto a partir de agora.

Para isso, nós vamos criar um arquivo novo e salvar esse arquivo como “contato.html” dentro da nossa pasta de projeto. Ele já apareceu aqui para nós. Lógico que ele está vazio neste momento. Para facilitar a criação desta página, nós vamos copiar o que já existe na página do produto. Na página do produto, nós vamos copiar todo o cabeçalho. Ou seja, do fim do header até a primeira linha, e vamos copiar tudo que tem no rodapé, do footer para baixo, até a última linha, até o fim do HTML.

Aqui no meio, naturalmente, nós vamos criar a tag <main>, que vai ser o nosso conteúdo principal. Isso é o que precisamos para começar a nossa página. Se salvarmos e abrimos isso no navegador, veremos a nossa página copiada do cabeçalho e do rodapé. Ela não tem nenhum conteúdo. Nós podemos, só para garantir que tá tudo rodando perfeitamente, escrever aqui no meio da <main> “teste”, voltar para o navegador e recarregar a página. Ele tá aparecendo aqui no meio.

Algumas coisas nós precisamos mudar para deixar esse código perfeito. A primeira delas é que o título da nossa página está errado, está “Produtos”, e nós estamos agora na página de contato. Então na tag <title>, onde tem “Produtos”, nós vamos trocar para “Contato”. Salvando e recarregando no navegador, nosso título da página já está correto.

Se dermos uma revisada nesse código que nós copiamos e colamos, veremos que tem uma coisa aqui que não faz muito sentido, que é o nosso CSS que se chama “produtos”. Nós criamos esse CSS porque ele era o CSS da segunda página, e nós não queríamos que ele conflitasse com o da primeira, que chamamos de Style. Sempre que nós temos um CSS principal e ele é usado em muitas páginas, nós chamamos esse arquivo de Style, é o nome padrão que usamos para esses arquivos.

Só que nós já temos um arquivo Style que é o arquivo da página inicial. Agora, o que vamos fazer? Se eu clicar com o botão direito aqui em Style, eu posso renomear ele, e aí eu vou colocar “style-home.css”. No “produtos.css” eu, vou alterar de “produtos” para “style”. E na minha página de contato, posso chamar isso simplesmente de “style.css”.

Só que eu preciso alterar nos meus outros HTML também. Então no “produtos” eu vou trocar para “style.css”. E na página inicial, ao invés do “style”, eu vou ter “style-home.css”. Isso é a primeira coisa que nós precisamos para ter o nosso código organizado e começar a escrever código.

Agora que já temos a página no contato pronta para começarmos, a página do produto e a página inicial também estão funcionando perfeitamente, vamos entender um pouco mais sobre como funcionam os formulários antes de começarmos a criar.

Se abrirmos por exemplo a página do Google, aqui nós temos um formulário. Esse campo onde fazemos a busca nada mais é do que um formulário. O formulário é o responsável por pegar um conteúdo, enviar para uma outra página ou para algum lugar com esse conteúdo passado. Ou seja, quando eu tento fazer uma busca no Google e procuro, por exemplo, por Alura, ele passa esse conteúdo para próxima página, e esse conteúdo é tratado nessa próxima página.

Ele pode também pegar esses conteúdos e passar para um servidor que vai enviar um e-mail, ou passar para um servidor que vai fazer o login. Sempre que estamos enviando informações que o usuário digitou de uma página para outra, nós estamos usando um formulário.

Aqui no Google, quando eu passo essa informação para frente, ele me joga em outra página, que é “google.com/search?” com uma interrogação, e o que eu digitei tá aqui, “alura”, depois ele pôs várias informações, que é como ele faz o mapeamento desses dados e o tracking da minha informação, de onde eu vim e para onde eu estou indo.

Mas o importante é que a informação que eu digitei na página anterior veio para essa nova página a partir do momento que eu preenchi o formulário e fiz a busca, eu dei o “enter”, eu segui e mandei as informações.

É isso que nós vamos fazer a partir de agora, vamos criar um formulário do zero com todos os campos que nós queremos. Temos campo de texto, de mensagem, de telefone, de e-mail, opção para selecionar, opção para marcar um checkbox.

Enfim, vamos fazer um super formulário, e para isso nós vamos começar do zero o formulário a partir da primeira tag. Mas isso é assunto para o próximo vídeo.

Começando um formulário - Campos básicos

Vamos então começar a criação do nosso formulário. Nosso formulário tem sempre uma estrutura que é algo para agrupar todas as informações que o usuário está inserindo.

Se olharmos no nosso HTML, dentro do main, a primeira tag que nós precisamos criar é a tag do formulário. E imaginem a novidade: tag do formulário é a <form>. Dentro do formulário, nós temos as entradas de dados do usuário, e quando o usuário está entrando algum dado, ele está fazendo um <input> de informação.

Toda tag de input tem que ter um tipo, e a primeira informação que nós queremos absorver do usuário é o nome dele. Então o input tem sempre um tipo, e nesse caso o tipo é o texto, o usuário vai digitar texto em um campo. Se salvarmos e recarregarmos isso no navegador, já temos aqui um input onde eu posso sair inserindo informações.

Outra informação muito importante dentro de um formulário é o nome daquele campo. Se queremos que o usuário insira o nome dele, o nome completo dele, o nome e sobrenome, precisamos dizer isso aqui, “Nome e sobrenome”.

E que tag que usamos até agora para marcar textos? Usamos as tags de título H1, H2, H3, até o H6, usamos as tags do parágrafo. E dentro do formulário, não usamos nenhuma dessas tags. Dentro do formulário, nós sempre usamos uma etiqueta para o input. É um <label>Nome e sobrenome</label> para um input. Esse par sempre anda junto. Eu tenho um label e tenho um input. Eu tenho uma informação sobre para que serve aquela entrada de dados e efetivamente a entrada de dados.

Se eu salvo isso aqui e recarrego, eu tenho aqui o meu label, “Nome e sobrenome”, e o input. Mas eu estou falando que isso é um par de informações, como eles então se conectam?

Toda vez que eu tenho um input, eu boto um identificador nele <input type=”text” id=”nomesobrenome”>. Um input geralmente é único, eu vou ter uma entrada do nome e sobrenome do usuário. E no identificador, eu coloco qualquer conteúdo, “nomesobrenome”. E no label, eu digo que aquilo é uma etiqueta para um input, então<label for=“nomesobrenome"> que eu tenho aqui no meu input. Esse par anda junto. E o que isso reflete no meu navegador?

Quando eu quero digitar alguma coisa no meu input, eu clico aqui no campo e começo a digitar. Quando meu mouse não está dentro do campo para digitar, eu posso clicar no label “Nome e sobrenome”, isso facilita muito a vida dos nossos usuários. Quando temos um campo muito pequeno, quando temos muitas informações para serem entradas, é sempre importante manter esse par andando junto: “Nome e sobrenome” como identificador e como a etiqueta para aquele item.

Continuando no nosso formulário, vamos agora pedir para que ele insira o endereço de e-mail. Então aqui eu vou ter um outro label, que vai ser <label>Email</label>. E vou ter um outro input, que também vai ter um tipo texto e um id email <input type=”text” id=“email”>. No meu label, eu vou dizer que ele é um label para o “email”. Recarregando minha página, eu tenho aqui “Nome e sobrenome” e “Email”. Se eu clico sobre o label, ele já me deixa começar a digitar.

Vamos ainda colocar mais uma entrada de dados <label>Telefone</label>, e vamos pedir para o usuário também adicionar o telefone dele aqui. O telefone também vai ter um tipo texto, e o id “telefone”. Naturalmente, a nossa label vai ser “for=“telefone””. Salvando e recarregando, temos agora nossos três campos de envio, três campos de dados, onde estamos capturando as informações do usuário.

Mas o que que eu faço com essas informações agora? Como que eu envio esses dados? Todo formulário sempre vai ter um outro input, esse não precisa ter label, que vai ser do tipo <input type=“submit”>. Ou seja, de envio, onde eu mando aqueles dados para um servidor, e-mail, ou para uma próxima página. Se eu salvar e recarregar, agora temos um botão aqui com o texto “Enviar”.

De onde veio esse texto “Enviar”? Como o meu navegador está em português, o meu sistema operacional está em português, ele traduziu a palavra “submit”. Como que eu faço para garantir que essa palavra seja sempre “Enviar”, independente da língua que meu usuário estiver usando? Eu vou dizer que esse campo tem um valor, o value dele vai ser agora “value=“Enviar formulário”>”. Se eu salvar isso aqui e recarregar, o texto do meu botão agora é “Enviar formulário”.

Essa é a estrutura básica que vamos ter sempre criando um formulário: a tag “form”, um input, que pega qualquer tipo de informação, e o input para enviar aqueles dados. O label serve para criarmos uma estrutura melhor no nosso formulário, botando uma etiqueta para cada um dos campos onde temos entrada de dados do usuário. Com essa estrutura, nós podemos fazer muita coisa. A maioria dos formulários que vocês vão ver na internet têm essa estrutura básica.

Nós vamos agora deixar essa estrutura um pouco mais bonita. Vamos começar o CSS da página de contato. Mas isso é assunto para o próximo vídeo, te vejo lá.

Sobre o curso HTML5 e CSS3 parte 3: Trabalhando com formulários e tabelas

O curso HTML5 e CSS3 parte 3: Trabalhando com formulários e tabelas possui 92 minutos de vídeos, em um total de 51 atividades. Gostou? Conheça nossos outros cursos de HTML e CSS em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda HTML e CSS acessando integralmente esse e outros cursos, comece hoje!

  • 1213 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1213 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1213 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1213 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?

Acesso completo por 1 ano

Estude 24h/dia onde e quando quiser

Novos cursos todas as semanas