HTML e CSS: formulários, SEO e acessibilidade

Construindo componentes do formulários com HTML - Apresentação

Apresentando a instrutora e o curso

Olá! Seja bem-vindo ao curso de HTML, CSS, Formulários, SEO e Acessibilidade. Meu nome é Dani Castilho, sou a instrutora aqui na LUR e trabalho há 14 anos com tecnologia.

Audiodescrição: Dani é uma mulher branca, com cabelos compridos castanhos. Ela está usando uma blusa marrom e possui algumas tatuagens na mão e no braço. Atrás dela, há uma parede iluminada nas cores azul e rosa.

Explorando o conteúdo do curso

Se estamos no início da nossa jornada para nos tornarmos pessoas desenvolvedoras front-end, este curso certamente agregará muito ao nosso conhecimento. Juntos, aprenderemos a construir um formulário completo usando HTML5. Conheceremos uma variedade de tipos de campo para que possamos obter dados dos usuários durante o preenchimento do formulário.

Aprenderemos a validar esses dados e os campos do formulário, informando ao usuário, enquanto ele preenche, se está tudo correto, se algum campo obrigatório foi deixado em branco ou se o formato necessário do dado foi preenchido corretamente. Faremos todas essas validações utilizando HTML5.

Abordando acessibilidade e SEO

Abordaremos um tema muito importante: a acessibilidade digital. Conheceremos as boas práticas e os níveis de acessibilidade para que qualquer pessoa, independentemente de suas necessidades, consiga navegar e interagir com nossas páginas web, proporcionando uma ótima experiência.

Além disso, discutiremos técnicas de SEO. Quais são as boas práticas? Quais estratégias e técnicas podemos adotar para que nossas páginas tenham um melhor desempenho nos mecanismos de busca? Como elas aparecerão? Como funciona o ranqueamento do Google, entre outras questões.

Desenvolvendo projetos práticos

Durante o curso, vamos trabalhar em dois projetos que poderão ser utilizados como itens do nosso portfólio. O primeiro deles será a construção de um formulário de pesquisa de opinião para a empresa Culturama, onde faremos diversas perguntas e utilizaremos vários campos de formulário para obter esses dados. Em seguida, tornaremos esse formulário 100% acessível para que qualquer pessoa consiga utilizá-lo e preenchê-lo.

O segundo projeto é o Tech Board. Vamos implementar melhorias de SEO, aplicando estratégias para que a página do Tech Board, uma landing page promocional de um aplicativo que realiza monitoramento em tempo real, esteja bem posicionada no Google. Trabalharemos em técnicas para aumentar sua relevância nas buscas.

Requisitos e objetivos do curso

É importante que tenhamos algum conhecimento prévio de HTML e CSS para melhor aproveitamento do curso. Precisamos entender a estrutura de um documento HTML, como o que é o head, o body e as tags. Em CSS, é necessário conhecer alguns seletores básicos, como seleção por tags, modificação de cores e tamanhos. Além disso, devemos saber alguns comandos iniciais de Git e GitHub, pois seguiremos as boas práticas de mercado para desenvolver o projeto. Ao final, seremos capazes de publicar no GitHub Pages, tornando-o um item do nosso portfólio e permitindo que outras pessoas desenvolvedoras e empresas vejam o código desenvolvido, obtendo uma ideia do conhecimento adquirido.

Vamos juntos realizar esses dois projetos? Estamos ansiosos para começar. Nos vemos no próximo vídeo.

Construindo componentes do formulários com HTML - Apresentação do projeto

Introduzindo o tema dos formulários

Estamos muito felizes que você deu mais este passo em sua jornada de conhecimento. Esperamos que aproveite todo o material e aprenda bastante, colocando em prática o que for aprendido. Vamos falar sobre formulários, algo com que lidamos constantemente na web. Por exemplo, você precisou preencher um formulário com seu e-mail e senha para acessar o site da Alura. Formulários são utilizados para criar contas em redes sociais, postar em fóruns, assinar newsletters, entre outros. Eles são amplamente utilizados na web, pois permitem que o usuário insira suas informações intencionalmente, independentemente do propósito.

As páginas web geralmente fornecem informações, mas, com formulários, damos ao cliente a oportunidade de nos fornecer dados enquanto navega em nosso site. Portanto, os formulários são um ponto de contato importante entre nós, os proprietários do site, a empresa, a marca e o usuário. Além de discutirmos sobre formulários e construí-los, faremos um projeto juntos para que você tenha uma noção de como é o dia a dia de uma pessoa desenvolvedora, como as demandas chegam e como interagimos com elas.

Recebendo a demanda do projeto

Vamos simular um dia a dia real. Recebemos um e-mail de uma empresa chamada Insight, solicitando a construção de um formulário de pesquisa. O e-mail diz: "Oi Dani, tudo bom? Temos uma demanda nova da Culturama. Eles precisam de um formulário online de pesquisa de opinião em HTML5 e CSS3, sem uso de JavaScript. O formulário deve ser simples, funcional e responsivo." Eles descrevem os campos necessários, como uma sessão de dados pessoais com campos de nome, idade, data de nascimento, perfil (gênero, estado civil), hábitos, opiniões, confirmações, e tipos de dados a serem coletados, como redes sociais, estilo musical, consentimento obrigatório de LGTB, botão de enviar e limpar, além das regras de preenchimento.

O nome e a idade são obrigatórios, com a idade aceitando apenas números entre 12 e 100. A data de nascimento é opcional, e o e-mail é obrigatório, precisando validar o formato. Vamos acompanhar esse briefing durante o desenvolvimento. O briefing é bem completo, com sessões, campos e especificações de validação, indicando se um campo é requerido ou opcional. A entrega esperada é um protótipo funcional em HTML5 com uma página simples de sucesso pós-envio.

Estruturando o projeto e interagindo com o cliente

Precisamos construir um formulário sem JavaScript, com as sessões e campos especificados, e regras específicas para cada campo. O que não veio no briefing foi um layout. Isso ocorre porque, em formulários de pesquisa, os campos são mais genéricos na web, e a empresa pode optar por não desenhar o layout, deixando que nós proponhamos o funcionamento e comportamento. Vamos construir de cima para baixo, centralizando na página e melhorando a estética.

Como não recebemos um layout, imagens ou informações de fonte, podemos solicitar esses materiais. Respondemos ao e-mail pedindo o logo da Culturama e as famílias de fonte usadas na marca. Essa interação é comum, seja recebendo uma demanda de uma agência ou trabalhando em um time multifuncional em uma empresa maior. O designer pode apresentar o que deve ser feito, e fazemos a mesma avaliação: entendemos o que precisa ser feito e analisamos as informações disponíveis.

Iniciando o desenvolvimento do projeto

Podemos também dar sugestões. Por exemplo, seria interessante que o formulário tivesse o logo da empresa para associar a pesquisa à marca, e usar a família de fonte da marca para personalizar. Essa é uma primeira interação. Não precisamos esperar a resposta para começar, pois já sabemos o que fazer. No final, você desenvolverá seu próprio modo de trabalhar, seja estilizando primeiro ou fazendo o HTML antes do CSS. Vamos seguir como preferimos: primeiro todo o HTML, depois o estilo.

Antes de começar a escrever HTML, precisamos estruturar o projeto, criar as pastas, os arquivos, inicializar o Git e criar o repositório no GitHub. Assim, começamos a trabalhar corretamente com o versionamento, usando branches e tornando o projeto mais profissional.

Criando a estrutura inicial do projeto

O primeiro passo é abrir o VS Code ou o explorador do computador para começarmos a criar as pastas. Vamos utilizar o VS Code, então abrimos o VS Code e criamos uma pasta no explorador. Vamos criar uma pasta chamada "Culturama", ou melhor, "pesquisa-Culturama". Dentro dessa pasta, criamos um arquivo index.html, onde colocaremos a estrutura inicial e definiremos o título do documento como "Pesquisa Culturama". Alteramos também o atributo lang do documento para PT-BR.

Para começar, vamos criar a estrutura básica do nosso documento HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Agora, vamos ajustar o título e o idioma do documento para refletir o projeto que estamos desenvolvendo:

<title>Pesquisa Culturama</title>

<html lang="pt-BR">

Configurando o ambiente de desenvolvimento

Com o index.html criado, criamos uma pasta chamada "CSS" e, dentro dela, um arquivo chamado style.css. Como pode ser que recebamos as fontes em breve, podemos aguardar para ver se será enviado um arquivo ou um link do Google Fonts. Não criaremos uma pasta para esses assets ainda, mas podemos criar uma pasta "img" para receber o logo. A imagem que criamos anteriormente será movida para fora da pasta "CSS". Agora temos a estrutura inicial: index.html, "CSS" e "img".

O próximo passo é criar o repositório no GitHub. Vamos até o GitHub, clicamos no botão de "new repository", escolhemos o proprietário e nomeamos como "Pesquisa Culturama". O nome "Pesquisa Culturama" está disponível. Adicionamos uma breve descrição: "formulário de pesquisa online para a empresa Culturama". Inicialmente, deixaremos a visibilidade pública, mas, para simular o dia a dia, mudaremos para privada. Ao final do projeto, podemos alterar para público, permitindo que seja usado como portfólio. Como estamos no dia a dia real, criaremos um repositório privado, pois, sendo o repositório da empresa, pode não ser adequado que outras pessoas tenham acesso aos dados e códigos, por questões de privacidade e segurança. Se a empresa determinar que o projeto é open source (código aberto), sempre criaremos um repositório privado.

Realizando o versionamento com Git

Após criar o repositório, podemos voltar ao terminal para realizar o commit. No VS Code, abrimos o terminal, navegamos até a pasta "pesquisa-Culturama" e usamos o comando:

cd pesquisa-culturama

Inicializamos o Git no projeto com o comando:

git init

Verificamos o status dos arquivos com:

git status

Para começar a rastrear, colocamos esses arquivos em stage usando o comando:

git add .

Limpamos a tela para melhor leitura e verificamos novamente com:

git status

Os arquivos estão prontos para serem comitados com:

git commit -m "Commit inicial"

Após o commit, voltamos ao GitHub para adicionar a origem ao repositório. Copiamos o comando fornecido pelo GitHub, que adiciona a origem remota ao repositório:

git remote add origin https://github.com/DaniCastilho/pesquisa-culturama.git
git branch -M main
git push -u origin main

Iniciando a construção do formulário

Voltando ao nosso briefing, a primeira tarefa é criar as seções. Sugerimos desenvolver o formulário por seções, começando com uma seção de dados pessoais, depois uma seção de perfil, e assim por diante, até finalizar. Para trabalhar nos dados pessoais, criamos uma branch chamada "dados pessoais" usando o comando git branch e nomeamos como feat/dados-pessoais, indicando que é uma nova funcionalidade. Para verificar se a branch foi criada, usamos git branch para listar as branches, confirmando a existência da main e feat/dados-pessoais. Para sair, pressionamos "Q" para quit. Para entrar na nova branch, usamos git checkout feat/dados-pessoais, e o terminal completa automaticamente. Agora estamos na branch feat/dados-pessoais, e tudo que fizermos será comitado nessa branch.

Podemos deixar o terminal de lado e inicializar o index.html com o live server para acompanhar. O index.html está vazio, então começamos a estruturar nosso HTML. Devemos pensar sempre de forma semântica, utilizando as tags semânticas principais: header, section e footer. Em um site, as mais utilizadas são essas tags, além da tag main, que contém o conteúdo principal. Começamos criando a tag header:

<header></header>

Dentro do header, colocamos um h1 com o texto "Pesquisa Online":

<header>
    <h1>Pesquisa Online</h1>
</header>

Após o header, abrimos uma section e começamos a construir o formulário:

<header>
    <h1>Pesquisa Online</h1>
</header>
<section>
    
</section>

No próximo vídeo, continuaremos essa construção. Até lá!

Construindo componentes do formulários com HTML - Criando inputs de texto, e-mail, número e arquivo

Introduzindo a estrutura básica do formulário

Vamos continuar. O que precisamos saber? O formulário será composto, no mínimo, por um campo e um botão de enviar. Pode haver mais de um campo, como no nosso formulário, mas a estrutura mínima é essa: um campo e um botão de enviar.

Para indicar ao navegador que o formulário começará na página, utilizamos a tag form. Vamos começar criando a estrutura básica do formulário:

<form action="">

</form>

Configurando atributos do formulário

Ao criar a tag form, o VSCode já sugere o atributo action, que recebe uma URL de destino dos dados. No momento, deixaremos esse atributo vazio, mas é importante saber que ele define para onde os dados serão enviados. Outro atributo que precisamos adicionar é o method, que define a forma de envio dos dados. Temos principalmente os métodos get e post. O método get coloca os dados do formulário na URL, tornando-os visíveis, enquanto o método post envia os dados como um corpo de requisição para o back-end. Como ainda não utilizaremos JavaScript, e por solicitação do cliente, usaremos o método get.

Vamos adicionar o método ao nosso formulário:

<form action="" method="get">

Criando campos de entrada e botão de envio

Todo formulário precisa de, pelo menos, uma caixa de informação, que chamamos de input. Para diferenciar os tipos de input, utilizamos o atributo type. Nosso primeiro campo será para o nome do usuário, então usaremos type="text". Além disso, todo input precisa de um name, que identifica o campo na URL. Vamos usar name="username" e adotar a prática de escrever os atributos em inglês.

Vamos construir o campo de entrada para o nome do usuário:

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

O outro elemento essencial é o botão. Usamos a tag button com type="submit", pois esse botão submete as informações do formulário. Diferente do input, o button não é auto-fechado, então precisamos abrir e fechar a tag, inserindo o texto "Enviar" entre elas.

Aqui está o código para o botão de envio:

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

Testando o método get e adicionando label

Vamos testar o método get em ação. No navegador, ao preencher o campo de texto com "Dani Castilho" e clicar em enviar, a URL exibirá username=Dani Castilho. Isso demonstra a importância do atributo name para identificar o valor do campo.

Criamos um primeiro campo de texto para o username, mas ainda não há indicação de que o usuário precisa preencher um nome. Para isso, usamos a tag label, que descreve os campos. A label possui o atributo for, no qual passamos o name do input que queremos descrever. Assim, a label para o campo username será "Nome".

Vamos adicionar a label para o campo de nome:

<label for="userName">Nome</label>

Adicionando campo de idade com validação

O próximo campo será o de idade. Vamos criar uma label para "Idade" e um input do tipo number, com name="age". O navegador adiciona um controle por clique para o input de tipo number. No entanto, o campo de idade deve aceitar apenas números entre 12 e 100. Para definir esse intervalo, usamos os atributos min e max. Além disso, o campo nome é obrigatório, o que indicamos com o atributo required.

Aqui está o código para o campo de idade:

<label for="userAge">Idade</label>
<input type="number" name="userAge" min="12" max="100" required>

Criando campo de data de nascimento

O próximo campo é a data de nascimento, que é opcional. Para isso, criamos uma label com for="birthdate" e um input do tipo date.

Vamos adicionar o campo de data de nascimento:

<label for="birthDate">Data de nascimento</label>
<input type="date" name="birthDate">

Implementando campo de e-mail com validação

Próximo campo: e-mail. É obrigatório e precisa validar o formato. Para usarmos um campo de e-mail, utilizamos o input type="email". Vamos copiar e colar aqui. Colamos a tempo. Então, label for="user email". O tipo é email e o name é o mesmo user email que colocamos no for da label. Para mantermos um padrão, deixamos user age. É importante seguir padrões, tanto para nós quanto para as pessoas que podem colaborar com nossos projetos. Então, user age aqui também. Vamos colocar o e-mail. Era um campo obrigatório, então required no final.

Aqui está o código para o campo de e-mail:

<label for="userEmail">Email</label>
<input type="email" name="userEmail" required>

Adicionando campo de telefone com restrições

Após o campo de e-mail, precisamos criar um campo de telefone, que será opcional e deve ter 11 dígitos. Vamos ao nosso HTML. Label for="userPhone". UserNumberPhone. PhoneNumber. UserPhoneNumber. Telefone como o valor da label. Criamos um input type="tel", específico para telefone. Name="userPhoneNumber". O campo de telefone aparece na tela. Porém, há um problema: podemos digitar muitos números e ele aceita todos. Precisamos aceitar apenas 11 dígitos. Para personalizar e dizer que esse campo só pode receber 11 dígitos, usamos duas novas propriedades do input type="tel". Primeiro, passamos um padrão de preenchimento. Queremos usar apenas números de 0 a 9 e que tenha 11 dígitos. Essa sequência de instrução, de regra, chamamos de pattern, ou padrão. Temos uma propriedade, um atributo chamado pattern, onde passamos quais tipos de número queremos usar entre colchetes. Então, abrimos colchetes, fechamos colchetes. Queremos usar de 0 a 9. E a quantidade de dígitos passamos entre chaves: 11 dígitos.

Vamos ver se deu certo. Agora, se quisermos preencher muitos números, ainda conseguimos, mas se tentarmos enviar o formulário assim, ele não permitirá. "Please match the requested format." Não estamos mostrando para o usuário qual é o formato requisitado. Para isso, usamos um atributo chamado placeholder. O placeholder faz aquele texto cinza dentro do campo para indicar como o usuário deve preencher. Como colocamos um padrão simples de 0 a 9 com 11 dígitos, não englobamos espaço, parênteses, etc. Vamos aprender mais sobre isso com regex, expressões regulares, para personalizar o preenchimento. Por enquanto, indicamos para preencher números corridos: 1, 2, 3, 4, 5, 6, 7, 8, 9 dígitos ou 11. Salvando, voltamos e dizemos qual modelo seguir para preencher o telefone. Podemos melhorar e mudar o placeholder para "DDD mais número sem espaços ou if". Assim, o usuário tem clareza de como preencher. Preenchemos tudo novamente para simular. O formato é 1, 2, 3, 4, 5, 1, 2, 3, 4. Ao enviar, o telefone do usuário é concatenado corretamente.

Aqui está o código para o campo de telefone:

<label for="userPhoneNumber">Telefone</label>
<input type="tel" name="userPhoneNumber" pattern="[0-9]{11}" placeholder="DDD + número sem espaços ou hifen">

Implementando campo de upload de foto

Próximo campo: upload de foto. Para ter um upload de foto no formulário, usamos o input type="file", que indica que é um campo para receber arquivos. Precisamos mencionar qual tipo de arquivo aceitar. Usamos o atributo accept, e no nosso caso, como imagem, image/*. O name pode ser user image. Criamos também o label chamado label for="user image". O nome do campo no briefing é "Upload de foto". É um campo opcional. Agora, aparece um botão para escolher arquivo. Ao clicar, abre opções para escolher apenas arquivos de foto. Escolhemos uma imagem como exemplo, abrimos, enviamos, preenchemos e clicamos no botão enviar. Aparece lá.

Aqui está o código para o campo de upload de foto:

<label for="userImage">Upload de foto</label>
<input type="file" accept="image/*" name="userImage">

Organizando campos com fieldset e legend

Esse primeiro passo foi os dados pessoais. Visualmente, está tudo junto e bagunçado. Podemos colocar quebras de linha para separar os inputs. Colocamos um BR aqui, outro ali. Abrimos uma tabulação e salvamos. Eles ficam mais organizados, um abaixo do outro. Colocamos um para o botão também, separando-o. Agora, só falta nomear essa sessão. Essa sessão é de dados pessoais. Precisamos escrever um HTML semântico, que faça sentido tanto para mecanismos de busca quanto para leitores de tela. Temos tags semânticas para ajudar na organização do formulário. Usamos a tag fieldset junto com a tag legend. Dentro do form, usamos a tag fieldset, que indica ao navegador que está começando um conjunto de elementos relacionados semanticamente.

Vamos organizar os campos dentro de um fieldset:

<fieldset>
    <!-- DADOS PESSOAIS -->
    <label for="userName">Nome</label>
    <input type="text" name="userName" required>
    <br>
    <label for="userAge">Idade</label>
    <input type="number" name="userAge" min="12" max="100" required>
    <br>
    <label for="birthDate">Data de nascimento</label>
    <input type="date" name="birthDate">
    <br>
    <label for="userEmail">Email</label>
    <input type="email" name="userEmail" required>
    <br>
    <label for="userPhoneNumber">Telefone</label>
    <input type="tel" name="userPhoneNumber" pattern="[0-9]{11}" placeholder="DDD + número sem espaços ou hifen">
    <br>
    <label for="userImage">Upload de foto</label>
    <input type="file" accept="image/*" name="userImage">
    <br>
</fieldset>

Finalizando a sessão de dados pessoais

Usamos a tag legend para passar a legenda: "Dados pessoais". Removemos o comentário e colocamos mais acima para destacar a sessão. Salvamos. No projeto, ficou separado. Toda vez que usamos a tag fieldset, ela cria uma divisão, uma borda, agrupando campos relacionados. O legend dá uma legenda para esse agrupamento: "Dados pessoais".

Vamos adicionar a legend ao nosso fieldset:

<legend>Dados Pessoais</legend>

Comitando alterações e preparando para a próxima sessão

Terminamos os dados pessoais. Não podemos esquecer de comitar tudo que fizemos. Adicionamos todos os arquivos para comitar. Git status mostra que o index.html foi modificado. Git add e git commit -m "Cria sessão de dados pessoais". Feito isso, fazemos um push. Git push -1, que é uma abreviação para -origin. Tudo certo. Abrimos um pull request para enviar as modificações. Queremos jogar nossa feature de dados pessoais para a main. Criamos um pull request para isso, simulando que outros desenvolvedores vão validar o código. Na próxima aula, continuamos e seguimos para a criação da próxima sessão. Até lá.

Sobre o curso HTML e CSS: formulários, SEO e acessibilidade

O curso HTML e CSS: formulários, SEO e acessibilidade possui 231 minutos de vídeos, em um total de 34 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:

• Construindo formulários com HTML
• Aplicando práticas de acessibilidade digital
• Aplicando técnicas de Search Engine Optimization (SEO)