Atividade Aula 02 PW III - 3º DS

Aula 02 – Criando uma Tela de Login com HTML e CSS

🎯 Objetivos da Aula

  • Compreender a estrutura básica de uma página HTML
  • Entender o papel do CSS na estilização da interface
  • Criar um formulário simples de login
  • Aplicar estilos básicos em elementos da página

📚 Conteúdo da Aula

Nesta aula vamos criar uma interface de login contendo:

  • Campo de Email
  • Campo de Senha
  • Link "Esqueci a senha"
  • Botões Entrar e Limpar

Também vamos aplicar estilos com CSS para melhorar a aparência da página.


🧩 Estrutura HTML da Página

A interface de login será construída utilizando HTML para estruturar os elementos da página.

<div class="container">

<h2>Login</h2>

<form>

<label>Email</label>
<input type="text">

<label>Senha</label>
<input type="password">

<a href="#">Esqueci a senha</a>

<input type="submit" value="Entrar">
<input type="reset" value="Limpar">

</form>

</div>

Nesta estrutura utilizamos um container para organizar todos os elementos do formulário de login.


🎨 Estilização com CSS

Centralizando o conteúdo da página

body{
margin:0;
height:100vh;
display:flex;
justify-content:center;
align-items:center;
font-family: Arial, Helvetica, sans-serif;
background: linear-gradient(120deg,#4facfe,#00f2fe);
}

Esse código faz várias coisas importantes:

  • Remove a margem padrão do navegador
  • Centraliza o conteúdo horizontalmente e verticalmente
  • Aplica um fundo com gradiente

Estilizando o container do login

.container{
width:350px;
background:white;
padding:30px;
border-radius:10px;
box-shadow:0 8px 20px rgba(0,0,0,0.2);
}

Esse container cria a caixa branca onde ficará o formulário de login.

  • padding cria espaço interno
  • border-radius arredonda as bordas
  • box-shadow cria uma sombra

💻 Código Completo

Abaixo está o código completo da página de login.

<!DOCTYPE html>
<html lang="pt-br">
<head>

<meta charset="UTF-8">
<title>Login</title>

<style>

body{
margin:0;
height:100vh;
display:flex;
justify-content:center;
align-items:center;
font-family: Arial, Helvetica, sans-serif;
background: linear-gradient(120deg,#4facfe,#00f2fe);
}

.container{
width:350px;
background:white;
padding:30px;
border-radius:10px;
box-shadow:0 8px 20px rgba(0,0,0,0.2);
}

h2{
text-align:center;
margin-bottom:20px;
}

form{
display:flex;
flex-direction:column;
}

label{
margin-top:10px;
font-weight:bold;
}

input{
padding:8px;
margin-top:5px;
border:1px solid #ccc;
border-radius:5px;
}

.buttons{
margin-top:20px;
display:flex;
justify-content:space-between;
}

input[type="submit"]{
background:#4facfe;
border:none;
color:white;
cursor:pointer;
}

input[type="submit"]:hover{
background:#2c8ef4;
}

input.reset{
background:#eee;
cursor:pointer;
}

input.reset:hover{
background:#ddd;
}

a{
margin-top:10px;
font-size:14px;
text-decoration:none;
color:#2c8ef4;
}

a:hover{
text-decoration:underline;
}

</style>

</head>

<body>

<div class="container">

<h2>Login</h2>

<form action="/action_page.php">

<label for="Email">Email</label>
<input type="text" id="Email" name="Email" placeholder="Digite seu email">

<label for="Password">Senha</label>
<input type="password" id="Password" name="Password" placeholder="Digite sua senha">

<a href="recupera-senha.html">Esqueci a senha</a>

<div class="buttons">
<input type="submit" value="Entrar">
<input class="reset" type="reset" value="Limpar">
</div>

</form>

</div>

</body>
</html>

🚀 Atividade Desafio

Tente melhorar a interface criada nesta aula:

  • Adicione um campo Confirmar Senha
  • Inclua um botão Cadastrar
  • Mude as cores da página
  • Adicione um ícone nos campos de login

Desafio extra: tente criar uma página de Cadastro de Usuário usando os mesmos conceitos.


📌 Próxima Aula

Na próxima aula aprenderemos sobre:

  • Tipos de input
  • Validação de formulários
  • Campos obrigatórios
  • Placeholder

⚡Aula 03 – Validação do Formulário com JavaScript

Antes mesmo de enviar os dados para o servidor, podemos realizar uma verificação simples utilizando JavaScript.

Essa validação ocorre no navegador do usuário e evita que o formulário seja enviado com campos vazios.

📄 Exemplo de validação no formulário

<form action="valida.php" method="post" onsubmit="return validarLogin()">

<label>Email:</label><br>
<input type="text" id="email" name="email"><br><br>

<label>Senha:</label><br>
<input type="password" id="senha" name="senha"><br><br>

<input type="submit" value="Entrar">

</form>

Observe que o formulário possui o atributo: 

onsubmit="return validarLogin()"

Isso significa que a função validarLogin() será executada antes do envio do formulário.

📄 Script JavaScript de validação

<script>

function validarLogin(){

let email = document.getElementById("email").value;
let senha = document.getElementById("senha").value;

if(email == "" || senha == ""){
alert("Por favor, preencha todos os campos!");
return false;
}

return true;

}

</script>

🧠 Explicação do Script

1. Criando a função de validação

function validarLogin()

Essa função será executada quando o usuário clicar no botão Entrar.

2. Capturando os valores dos campos

let email = document.getElementById("email").value;

O método getElementById() busca um elemento da página utilizando seu identificador.

Depois usamos .value para acessar o conteúdo digitado no campo.

3. Verificando se os campos estão vazios

if(email == "" || senha == "")

O operador || significa OU lógico.

Se qualquer um dos campos estiver vazio, o sistema exibirá uma mensagem de alerta.

4. Cancelando o envio do formulário

return false;

Quando retornamos false, o formulário não é enviado para o servidor.

Se todos os campos estiverem preenchidos, retornamos true, permitindo o envio dos dados para o script PHP.


🔎 Comparação Importante

  • JavaScript → validação no navegador (mais rápida)
  • PHP → validação no servidor (mais segura)

Em aplicações reais é recomendado utilizar as duas validações.


🚀 Desafio para os alunos

Modifique o script JavaScript para implementar as seguintes melhorias:

  1. Verificar se o email possui o caractere @.
  2. Exibir uma mensagem diferente caso a senha tenha menos de 4 caracteres.
  3. Destacar os campos inválidos mudando a cor da borda.

Desafio extra:

Pesquisar como utilizar expressões regulares (Regex) para validar o formato de um email.

🔐 Aula 04 – Validação do Login com PHP

Após o envio do formulário, os dados digitados pelo usuário são enviados para um arquivo PHP responsável por verificar se o login é válido.

Neste exemplo utilizaremos um script simples chamado valida.php.

📄 Código do arquivo valida.php

<?php

$email = $_POST['email'];
$senha = $_POST['senha'];

$usuario_correto = "admin@email.com";
$senha_correta = "1234";

if($email == $usuario_correto && $senha == $senha_correta){

echo "Login realizado com sucesso!";
echo "<br>Bem-vindo ao sistema.";

}else{

echo "Usuário ou senha incorretos.";

}

?>

🧠 Explicação do Código

1. Recebendo os dados enviados pelo formulário

$email = $_POST['email'];
$senha = $_POST['senha'];

A variável global $_POST é utilizada para acessar os dados enviados pelo formulário HTML quando utilizamos method="post".

Nesse caso estamos armazenando os valores digitados pelo usuário nas variáveis $email e $senha.

2. Definindo um usuário e senha para validação

$usuario_correto = "admin@email.com";
$senha_correta = "1234";

Aqui estamos criando duas variáveis que representam um usuário válido do sistema. Esses valores serão usados para comparar com os dados digitados pelo usuário.

3. Verificando se o login está correto

if($email == $usuario_correto && $senha == $senha_correta)

A estrutura if verifica se:

  • o email digitado é igual ao email correto
  • e a senha digitada é igual à senha correta

O operador && significa E lógico, ou seja, as duas condições precisam ser verdadeiras.

4. Exibindo a resposta para o usuário

echo "Login realizado com sucesso!";

O comando echo é utilizado para exibir conteúdo na página.

Se o login estiver correto, o sistema mostra uma mensagem de sucesso. Caso contrário, será exibida a mensagem de erro.


🚀 Atividade Desafio

Modifique o script valida.php para implementar as seguintes melhorias:

  1. Exibir o email do usuário após o login.
  2. Adicionar uma mensagem personalizada de boas-vindas.
  3. Criar um botão para voltar à tela de login.
  4. Mostrar uma mensagem diferente caso os campos estejam vazios.

Desafio extra:

Pesquise como utilizar a função isset() em PHP para verificar se os dados do formulário foram realmente enviados antes de realizar a validação.

Comentários

Postar um comentário

Ficou com alguma dúvida? Quer compartilhar sua experiência? Tem uma sugestão de
melhoria? Seu comentário é muito importante!

Postagens mais visitadas deste blog

Introdução aos Sistemas de Gerenciamento de Banco de Dados

Banco de Dados Introdução aos Sistemas de Gerenciamento de Banco de Dados — do conceito à primeira tabela MySQL XAMPP SQL SGBD O que é um Banco de Dados? Um banco de dados é uma coleção organizada de informações armazenadas de forma estruturada para que possam ser facilmente acessadas, gerenciadas e atualizadas. Analogia do mundo real Imagine uma agenda de contatos : cada pessoa é um registro com nome, telefone e e-mail. O banco de dados faz o mesmo, de forma digital e muito mais poderosa. No mundo empresarial Empresas como iFood, Nubank e Magazine Luiza armazenam milhões de registros de clientes, pedidos e produtos em bancos de dados. No seu dia a dia Todo app que você usa possui um banco de dados: WhatsApp (mensagens), Instagram (fotos), Spotify (músicas e playli...
Read more »

Introdução ao HTML, CSS e JavaScript - Guia para Iniciantes

Apostila — Desenvolvimento Web Completo | HTML · CSS · JavaScript Apostila Completa · Desenvolvimento Web HTML, CSS & JavaScript do zero ao projeto Guia completo: da origem do HTML aos projetos práticos com JavaScript — com exemplos interativos para testar no navegador. 🏗 HTML5 🎨 CSS3 ⚡ JavaScript 📖 19 Capítulos ✅ 2 Projetos Capítulos 01 HTML 02 História 03 Estrutura 04 Tags 05 Texto 06 Listas 07 Links & Imgs 08 Tabelas 09 Formulários 10 Semântica 11 CSS 12 JavaScript 13 Integrado 14 Contador 15 Form JS 16 <script> 17 Boas Práticas 18 Ferramentas 19 Próximos Passos Início Sumário 📖 Sumário — 19 Capítulos ✕ 01 O que é HTML? ...
Read more »

Introdução ao Excel

Introdução ao Microsoft Excel: Guia Completo para Iniciantes Introdução ao Microsoft Excel Guia Completo para Iniciantes: Domine a Ferramenta de Planilhas Mais Utilizada no Mundo 📅 07 de Outubro de 2025 ⏱️ 15 min de leitura 👤 Aplicativos Informatizados X O Microsoft Excel é muito mais do que apenas uma ferramenta de planilhas. É uma das aplicações mais poderosas e versáteis do mundo corporativo, presente em praticamente todas as empresas e essencial para diversos setores profissionais. 🎯 O que é o Microsoft Excel? O Microsoft Excel é um software de planilhas eletrônicas desenvolvido pela Microsoft, que faz parte do pacote Microsoft Office (agora Microsoft 365). Sua principal função é organizar, calcular e analisar dados de forma estruturada através de célula...
Read more »