Vamos criar um formulário de login em HTML e CSS do zero! Este será o seu primeiro projeto em HTML e CSS!
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Para receber por e-mail o(s) arquivo(s) utilizados na aula, preencha:
Na aula de hoje, vou te ensinar a criar um formulário de login em HTML e CSS do zero! Vamos desenvolver esse projeto passo a passo, cobrindo toda a estrutura HTML e a estilização com CSS.
A ideia é que você consiga construir essa página sozinho, aplicando os diversos conhecimentos que aprendeu sobre HTML e CSS. Este será um ótimo projeto para praticar e explorar esses elementos.
Então, faça o download do material disponível e vamos juntos criar seu próprio formulário de login em HTML e CSS.
No material disponível para download, você encontrará tudo o que precisa para desenvolver seu próprio formulário de login em HTML e CSS do zero, bem como um gabarito com um formulário pronto.
Nesse gabarito, você poderá ver o que iremos desenvolver nesta aula, que é uma página de login muito semelhante ao formulário da Hashtag.
Além disso, essa será uma página totalmente responsiva. Você pode abrir a ferramenta de desenvolvedor pressionando a tecla F12 com a página aberta no navegador. Dentro da janela que será aberta, você pode selecionar a opção Toggle device toolbar.
Assim, você pode alterar as dimensões da página e visualizar como ela continua responsiva.
Para iniciar nosso projeto, começaremos com um arquivo em branco. Durante este projeto, usarei o VS Code e a extensão Live Server.
Essa extensão nos permite visualizar no navegador o resultado de todo o código que estivermos desenvolvendo dentro do VS Code.
Se você quiser saber como baixar, instalar e personalizar seu VS Code com as extensões usadas ao longo desta e de outras aulas de HTML e CSS aqui da Hashtag, confira esta aula aqui.
Com o VS Code aberto, vamos criar um arquivo chamado index.html, que conterá a estrutura básica da nossa página, e um arquivo chamado style.css, onde teremos a estilização em CSS.
Feito isso, vamos abrir nosso arquivo index.html, digitar ! e pressionar a tecla Tab. Isso fará com que o VS Code reconheça que você deseja criar um arquivo HTML e construirá toda a estrutura básica de um arquivo HTML para você.
<!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>Para visualizar esta página, basta clicar com o botão direito do mouse sobre o arquivo HTML que acabou de criar e selecionar a opção Open with Live Server.
Por enquanto, não teremos nada além de uma página em branco.
Até o momento, temos um modelo padrão de HTML. Podemos começar fazendo algumas edições, como alterar o idioma para português e o título da página para Página de Login.
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Página de Login</title>
</head>
<body>
</body>
</html>Além disso, precisamos começar a estruturar o <body> da nossa página, onde inserimos todo o conteúdo visível da página.
Dentro desse corpo, teremos o formulário, um título, uma barra (que adicionaremos posteriormente com CSS), um rótulo para os campos de texto, os campos de preenchimento, um checkbox, um botão e um texto com um link no final.
Todos esses elementos serão construídos dentro do corpo da nossa página.
Vamos começar adicionando o título da página com a tag <h1>. As tags de heading variam de <h1> até <h6>, sendo <h1> a mais importante e <h6> a menos relevante.
<body>
<h1>Faça o seu login</h1>
</body>Logo abaixo do título, adicionaremos uma barra posteriormente quando estivermos utilizando CSS.
Depois do título, definiremos os campos do formulário. Cada um desses campos será composto por um label, com o texto explicativo, seguido de um input.
O primeiro input será do tipo email e o segundo input do tipo password. Eles terão um id correspondente para relacioná-los com o seu label (rótulo).
<body>
<h1>Faça o seu login</h1>
<label for="email">Seu e-mail*</label>
<input type="email" id="email" />
<label for="password">Sua senha*</label>
<input type="password" id="password" />
</body>Em seguida, incluiremos um input do tipo checkbox, seguido de um pequeno parágrafo <p>. E um botão <button> escrito Entrar.
<body>
<h1>Faça o seu login</h1>
<label for="email">Seu e-mail*</label>
<input type="email" id="email" />
<label for="password">Sua senha*</label>
<input type="password" id="password" />
<input type="checkbox" />
<p>Lembrar-me</p>
<button>Entrar</button>
</body>Para finalizar, adicionaremos um parágrafo com um elemento de âncora <a>.
<body>
<h1>Faça o seu login</h1>
<label for="email">Seu e-mail*</label>
<input type="email" id="email" />
<label for="password">Sua senha*</label>
<input type="password" id="password" />
<input type="checkbox" />
<p>Lembrar-me</p>
<button>Entrar</button>
<p>
Esqueceu sua senha?
<a href="https://www.hashtagtreinamentos.com/">Clique aqui!</a>
</p>
</body>Feito isso, vamos pegar toda essa estrutura e colocá-la dentro de um formulário <form>.
<body>
<form action="">
<h1>Faça o seu login</h1>
<label for="email">Seu e-mail*</label>
<input type="email" id="email" />
<label for="password">Sua senha*</label>
<input type="password" id="password" />
<input type="checkbox" />
<p>Lembrar-me</p>
<button>Entrar</button>
<p>
Esqueceu sua senha?
<a href="https://www.hashtagtreinamentos.com/">Clique aqui!</a>
</p>
</form>
</body>Visualizando nossa página até o momento, ela estará assim:
Em estrutura de página, essa página que acabamos de criar e a página do gabarito são basicamente iguais. O que as diferencia é a estilização visual criada através do CSS.
Antes de avançarmos para a estilização da nossa página, é importante primeiro agrupar os nossos elementos HTML.
Quando queremos agrupar elementos, precisamos colocá-los dentro de um elemento pai, um container que contenha esses elementos.
Uma das formas de fazer isso é utilizando a tag <div>. As divs são uma abreviação para division (divisão, em inglês) e são frequentemente utilizadas para agrupar e organizar o conteúdo de uma página HTML.
Esse agrupamento é importante porque podemos utilizá-los para criar pontos de referência para estilizarmos com o CSS. Por exemplo, podemos aplicar a cada uma das divs uma classe correspondente que receberá um estilo próprio dentro do arquivo CSS.
Então, vamos começar agrupando cada parte da nossa página dentro de uma div específica.
<body>
<form action="">
<h1>Faça o seu login</h1>
<div>
<label for="email">Seu e-mail*</label>
<input type="email" id="email" />
</div>
<div>
<label for="password">Sua senha*</label>
<input type="password" id="password" />
</div>
<div>
<input type="checkbox" />
<p>Lembrar-me</p>
</div>
<button>Entrar</button>
<p>
Esqueceu sua senha?
<a href="https://www.hashtagtreinamentos.com/">Clique aqui!</a>
</p>
</form>
</body>Agora, cada parte da nossa página está agrupada dentro de uma div, o que nos permitirá estilizá-las de forma mais eficiente usando CSS.
Para começarmos a estilizar nossa página, o primeiro passo é vincular nosso arquivo CSS ao arquivo HTML. Para isso, dentro da tag <head> do nosso documento HTML, vamos criar um link com o arquivo CSS usando a tag <link>.
Nesse link, definiremos o atributo rel com o valor “stylesheet”, indicando que este é um recurso de estilização. O atributo href receberá o caminho para o arquivo CSS.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Página de Login</title>
<link rel="stylesheet" href="style.css" />
</head>Feito isso, as edições que fizermos no arquivo style.css serão refletidas em nossa página.
Existem algumas edições padrões do CSS que frequentemente precisamos ajustar nos documentos quando estamos trabalhando com HTML e CSS.
A primeira delas é referente ao espaçamento externo e interno dos elementos. Por padrão, os elementos do HTML já vêm com uma formatação prévia que não iremos utilizar, então precisamos zerar esses valores.
Para zerar esse espaçamento, vamos utilizar o seletor universal *. Esse seletor seleciona todos os elementos da página, permitindo aplicar a estilização a todos eles de uma vez.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}A propriedade margin é responsável pelo espaçamento externo de um elemento, o padding pelo espaçamento interno, e a box-sizing pelo cálculo do tamanho total dos elementos.
A propriedade box-sizing determina como o tamanho total do elemento é calculado. Por padrão, essa propriedade tem o valor de content-box, em que o padding e a border são adicionadas ao tamanho do elemento.
Por exemplo, um elemento de 400px de largura, com 20px de padding e 10px de border terá um tamanho final de 460px.
* {
margin: 0;
padding: 0;
box-sizing: content-box;
}
body{
width: 400px;
padding: 20px;
border: solid 10px black;
}
Quando definimos essa propriedade como border-box, ela inclui o padding e a border ao valor do elemento.
Nesses casos, o navegador considerará que dentro dos 400px do elemento, temos 20px para o padding e 10px para a border, deixando o conteúdo do elemento em si com 340px.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 400px;
padding: 20px;
border: solid 10px black;
}
Essa abordagem nos ajuda a ter um controle maior sobre o layout da página e será muito útil para criarmos nosso layout responsivo.
Obs.: A margin nunca fará parte do cálculo do tamanho do elemento.
Essa estilização do body foi adicionada apenas para exemplificar a diferença entre o border-box e o content-box. Podemos remover essa estilização, deixando nosso CSS assim:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}Com a margin e o padding zerados, podemos começar a estilizar nossa página.
Vamos começar estilizando a fonte da nossa página, definindo a família dela e a cor. Faremos isso dentro do seletor de body.
body{
font-family: "Montserrat";
color: #404040;
}
Essas propriedades que passamos para o seletor do body fazem com que todos os elementos presentes dentro dele herdem essa estilização.
Sendo assim, dentro do seletor h1, só precisaremos ajustar o tamanho da fonte do título, porque a família da fonte e a cor ele já terá herdado.
body{
font-family: "Montserrat";
color: #404040;
}
h1 {
font-size: 24px;
}Agora, nossa página terá a fonte Montserrat e a cor da fonte #404040 aplicadas em todo o conteúdo, e p título <h1> terá o tamanho de fonte de 24 pixels.
Para centralizar nosso formulário dentro do body, podemos utilizar a propriedade do Flexbox.
Para isso, precisamos transformar o body da nossa página em um contêiner flex, definindo a propriedade display dele como flex.
body{
font-family: "Montserrat";
color: #404040;
display: flex;
}Dessa forma, temos uma maneira fácil e prática de organizar, alinhar e distribuir os elementos dentro do nosso body.
Isso é importante para o layout flexível, pois, independentemente da posição ou tamanho da janela, podemos manter nosso formulário centralizado.
Ao transformar um elemento em um flex container, podemos usar a ferramenta do desenvolvedor para abrir o Flexbox Editor.
Esse editor nos permite alterar várias propriedades do nosso flexbox, visualizando as transformações diretamente na página antes de implementá-las em nosso código.
Dentre essas propriedades, temos:
Você pode testar cada uma dessas opções para se familiarizar e visualizar como cada uma altera o layout da nossa página. Para o nosso projeto utilizaremos apenas as propriedades justify-content e align-items.
Porém, para que possamos visualizar corretamente essas edições sendo aplicadas em nossa página, precisamos definir a altura do body como sendo de 100vh (viewport height), fazendo com que o corpo da nossa página ocupe 100% da altura total da tela.
body{
font-family: "Montserrat";
color: #404040;
display: flex;
height: 100vh;
}Feito isso, podemos definir os valores para o justify-content e o align-items como center. Após fazer as alterações no Flexbox Editor, basta copiá-las para dentro do CSS no VS Code.
body{
font-family: "Montserrat";
color: #404040;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}Com isso, nosso formulário ficará totalmente centralizado na tela, tanto na vertical quanto na horizontal.
Para visualizarmos essa alteração, podemos definir a propriedade background-color para o seletor do body como sendo marrom e criar um seletor para o nosso formulário, definindo a background-color dele como branca.
body{
font-family: "Montserrat";
color: #404040;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
background-color: brown;
}
form {
background-color: white;
}
O próximo passo será adicionarmos um espaçamento interno (padding) aos elementos da nossa página para uma melhor visualização deles.
Vamos definir o seletor para o formulário e ajustar a propriedade padding dele para 50px. Quando passamos um único valor para o padding, estamos definindo que esse valor deve ser aplicado em todas as direções do elemento.
No entanto, também podemos definir dois valores, em que o primeiro será aplicado em cima e o segundo embaixo. Ou quatro valores, em que serão aplicados na ordem: cima, direita, baixo e esquerda.
Para o nosso projeto, vamos manter com 50px para todos os lados.
form {
padding: 50px;
background-color: white;
}
Assim, nosso formulário terá um espaçamento interno de 50 pixels em todas as direções, garantindo uma melhor visualização e espaçamento entre os elementos.
Agora precisamos arredondar os cantos do nosso formulário. Para isso, vamos usar a propriedade border-radius, definindo o valor de 30px.
form {
background-color: white;
padding: 50px;
border-radius: 30px;
}
Vamos adicionar a nossa barra horizontal abaixo do título do formulário. Para isso, primeiro vamos adicionar uma div ao nosso HTML. Essa div terá o atributo class igual a barra-horizontal.
<body>
<form action="">
<h1>Faça o seu login</h1>
<div class="barra-horizontal"></div>Com a <div> criada dentro do HTML, o próximo passo será estilizá-la. Para selecionar um elemento no CSS pela classe, utilizamos o ponto antes do nome da classe. Para esse seletor, vamos definir a cor de fundo, a altura (height) e a largura (width).
.barra-horizontal {
background-color: #f87842;
height: 5px;
width: 210px;
}
Para editarmos os campos dos formulários, primeiro, vamos atribuir uma classe à <div> que eles estão contidos dentro do nosso HTML.
Para os campos de e-mail e senha, vamos atribuir a classe campo-input. E para a checkbox, a classe lembrar-me.
<div class="campo-input">
<label for="email">Seu e-mail*</label>
<input type="email" id="email" />
</div>
<div class="campo-input">
<label for="password">Sua senha*</label>
<input type="password" id="password" />
</div>
<div class="lembrar-me">
<input type="checkbox" />
<p>Lembrar-me</p>
</div>Feito isso, podemos estilizar esses elementos usando o seletor de classe.
Começando pelo nosso campo-input, vamos converter essas duas divs em um flex container. Dessa forma, podemos ajustar a posição e o alinhamento dos nossos labels e dos nossos campos de input.
Para posicioná-los um sobre o outro, vamos utilizar a propriedade flex-direction com o valor de column. Além disso, vamos definir o espaçamento entre esses elementos através da propriedade gap, ajustando o valor para 5px.
Definir um valor único para o gap nos permite criar um espaçamento uniforme entre os elementos dentro de um flex contêiner.
.campo-input {
display: flex;
flex-direction: column;
gap: 5px;
}O próximo passo será deixar a nossa checkbox posicionada ao lado do parágrafo “Lembrar-me”.
Para isso, basta transformar a <div> em que eles estão contidos em um flex container. Por padrão, os elementos em um container flex são alinhados em linha. Além disso, vamos adicionar um espaçamento entre eles de 5px.
.lembrar-me{
display: flex;
gap: 5px;
}Dessa forma, nosso formulário ficará mais organizado.
Porém, para criar espaçamentos uniformes entre os elementos dentro do formulário, vamos transformar todo ele em um flex container, com as propriedades flex-direction igual a column e o gap com o valor de 25px.
form {
background-color: white;
padding: 50px;
border-radius: 30px;
display: flex;
flex-direction: column;
gap: 25px;
}
Porém, agora, nosso título e nossa barra horizontal ficaram muito distantes. Para diminuir o espaçamento entre eles, podemos agrupá-los em uma mesma div, assim eles serão tratados pelo formulário como um único elemento.
Vamos criar essa div e atribuir a classe titulo a ela.
<div class="titulo">
<h1>Faça o seu login</h1>
<div class="barra-horizontal"></div>
</div>Feito isso, podemos criar um seletor para essa classe, transformando essa div em um flex container e definindo o espaçamento desejado entre a barra e o título.
.titulo {
display: flex;
flex-direction: column;
gap: 5px;
}
Como nesse projeto só temos a presença de um único botão na página, utilizaremos o seletor de tag mesmo dentro do CSS. Em projetos maiores é recomendado que você defina uma classe para ele.
Dentro desse seletor teremos de fazer uma série de edições para chegarmos ao resultado desejado.
Começaremos definindo o espaçamento interno dele com um padding de 10px. Em seguida, vamos definir a largura do botão para 160px e a propriedade align-self como center, para centralizar o botão no formulário.
Para arredondar as bordas dele, utilizaremos a propriedade border-radius, com o valor de 30px.
Feito isso, vamos definir a cor de fundo do nosso botão. Como queremos um gradiente de cores e não apenas uma única cor sólida, utilizaremos a propriedade background-image. Para essa propriedade vamos definir a função linear-gradient, definindo a cor que ele irá começar e qual cor irá finalizar.
Em sequência vamos estilizar a borda do botão, passando a propriedade border, com os valores solid, para uma borda sólida, com espessura de 1px e a cor correspondente.
No entanto, queremos que a borda inferior e a borda direita sejam maiores, criando um efeito visual em nosso botão. Para esse efeito, vamos definir as propriedades border-right-width e border-bottom-width com o valor de 4px.
Por fim, vamos personalizar o texto do nosso botão, definindo a cor (color), o tamanho da fonte (font-size), o peso da fonte (para deixar a fonte em negrito) e definir todas as letras do texto em maiúscula com a propriedade text-transform.
button {
padding: 10px;
align-self: center;
width: 160px;
border-radius: 30px;
background-image: linear-gradient(#256a8a, #3393c1);
border: solid 1px #256a8a;
border-right-width: 4px;
border-bottom-width: 4px;
font-size: 16px;
color: white;
text-transform: uppercase;
font-weight: 700;
}
Com nosso botão pronto, vamos estilizar nossos campos de input através do seletor de tag input.
Para eles vamos definir um padding de 10px em cima e embaixo e 20px para os lados, arredondar os cantos (border-radius), remover a borda (border: none) e definir a cor de fundo.
input {
padding: 10px 20px;
border-radius: 10px;
border: none;
background-color: #f1f1f1;
}
Vamos ajustar o link dentro do nosso formulário, ou seja, vamos estilizar a nossa âncora. Para isso, podemos utilizar o seletor para a tag <a> e definir a cor dela e o peso da fonte.
a {
color: rgb(0, 174, 255);
font-weight: 500;
}
Com essa estilização, nosso formulário está bem ajustado e semelhante ao exemplo que temos no gabarito. Agora, só precisamos adicionar uma imagem de fundo na página para finalizar.
Para adicionar e ajustar a imagem de fundo da nossa página de login em HTML e CSS, vamos definir as propriedades background-image, background-size e background-position, dentro do seletor do body.
Com a propriedade background-image, definimos a imagem de fundo, passando para ela a URL com o caminho para a imagem. Esse caminho pode ser tanto um site quanto o diretório local no computador, que é o que utilizaremos aqui.
Em seguida, com a propriedade background-size, configuramos o valor para cover, para que a imagem ocupe todo o espaço disponível. Por fim, com a propriedade background-position, centralizamos a imagem.
body{
font-family: "Montserrat";
color: #404040;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
background-color: brown;
background-image: url(imagem-fundo.png);
background-size: cover;
background-position: 50%;
}Ao definir o valor de background-position como 50%, estamos alinhando a nossa imagem tanto horizontalmente quanto verticalmente, com a metade da tela.
Isso garante que a imagem de fundo seja exibida de forma adequada, preenchendo todo o espaço disponível.
Os últimos ajustes que podemos fazer são adicionar um padding ao body de 20px. Assim, independentemente da resolução da tela, nosso formulário não irá encostar nos cantos da tela.
body{
font-family: "Montserrat";
color: #404040;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
background-color: brown;
background-image: url(imagem-fundo.png);
background-size: cover;
background-position: 50%;
padding: 20px;
}E por fim, podemos definir uma classe para o parágrafo “Esqueceu sua senha?”.
<p class="esqueceu-senha">
Esqueceu sua senha?
<a href="https://www.hashtagtreinamentos.com/">Clique aqui!</a>
</p>Com a classe criada, podemos alterar a propriedade text-align dela dentro do CSS, definindo o valor de center. Dessa forma, o texto sempre ficará centralizado.
.esqueceu-senha {
text-align: center;
}
Com esses ajustes finais, nosso formulário está pronto e totalmente estilizado, pronto para ser usado e integrado em seus projetos.
Nesta aula, você aprendeu a criar um formulário de login em HTML e CSS do zero! Desenvolvemos um projeto completo, passo a passo, exercitando e aprendendo diversos conceitos e conhecimentos sobre essas duas linguagens.
Além de ser um ótimo projeto para você desenvolver e aprimorar suas habilidades em HTML e CSS, essa página de login pode ser facilmente integrada em seus futuros projetos. É também uma excelente maneira de estudar e praticar essas duas linguagens essenciais para o desenvolvimento web.
Para acessar publicações de HTML e CSS, clique aqui!
Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.
Quer sair do zero no Python e virar uma referência na sua empresa? Inscreva-se agora mesmo no Python Impressionador