Como Criar Um Formulário De Login Com HTML, CSS e JS Puro

Se você é um iniciante em desenvolvimento web ou deseja aprimorar suas habilidades em HTML, CSS e JavaScript, criar um formulário de login é um excelente ponto de partida.

Neste artigo, vamos explorar o processo de criação de um formulário de login simples e funcional utilizando apenas HTML, CSS e JavaScript puro.

Esta é uma ótima maneira de aprender a estruturar uma página web, estilizá-la e adicionar interatividade.

Vídeo Aula – Danki Code

Para deixar o conteúdo mais prático vou deixar aqui um vídeo completo do Guilherme Grillo construindo um formulário utilizando apenas HTML, CSS e JS.

Quer aprender a criar e programar qualquer tipo de site, sistemas web e até mesmo aplicativos? Clique no botão abaixo e aproveite o desconto exclusivo para o curso Pacote Full Stack Master:

INSCREVA-SE AGORA MESMO!

Por que Criar um Formulário de Login?

Formulários de login são componentes fundamentais em muitos sites e aplicativos, permitindo que os usuários acessem suas contas de maneira segura.

Ao criar um formulário de login, você estará aprendendo conceitos essenciais que podem ser aplicados em uma variedade de projetos web. Vamos mergulhar nesse processo passo a passo.

Passo 1: Estruturando com HTML

O HTML (Hypertext Markup Language) é a base de qualquer página web. Comece criando o esqueleto do seu formulário de login. Aqui está um exemplo básico:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulário de Login</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <form id="login-form">
        <h2>Formulário de Login</h2>
        <input type="text" id="email" placeholder="Seu e-mail" required>
        <input type="password" id="senha" placeholder="Sua senha" required>
        <input type="submit" value="Entrar">
    </form>
    <script src="script.js"></script>
</body>
</html>

Neste código HTML, criamos um formulário que inclui campos para e-mail, senha e um botão de envio.

Passo 2: Estilizando com CSS

O próximo passo é adicionar estilo ao nosso formulário de login com CSS (Cascading Style Sheets). Vamos criar um arquivo styles.css para estilizar nosso formulário:

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

#login-form {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

h2 {
    margin-bottom: 20px;
}

input {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}

input[type="submit"] {
    background-color: #007bff;
    color: #fff;
    cursor: pointer;
}

input[type="submit"]:hover {
    background-color: #0056b3;
}

Este código CSS aplica estilo ao nosso formulário de login, tornando-o visualmente atraente e fácil de usar.

Passo 3: Adicionando Interatividade com JavaScript

Agora, vamos tornar nosso formulário interativo com JavaScript. Criaremos um arquivo script.js para manipular eventos.

Aqui está um exemplo de como adicionar um efeito de destaque ao campo de e-mail quando ele recebe foco:

const emailInput = document.getElementById("email");

emailInput.addEventListener("focus", () => {
    emailInput.style.border = "2px solid #007bff";
});

emailInput.addEventListener("blur", () => {
    emailInput.style.border = "1px solid #ccc";
});

Este código JavaScript adiciona um evento de foco ao campo de e-mail que muda a borda para azul quando o campo está em foco e a restaura para cinza quando perde o foco.

Conclusão

Criar um formulário de login com HTML, CSS e JavaScript puro é uma ótima maneira de aprender e praticar suas habilidades de desenvolvimento web. Este artigo abordou os principais passos envolvidos no processo, desde a estruturação básica com HTML até a estilização com CSS e a adição de interatividade com JavaScript.

Lembre-se de que este é apenas o começo. À medida que você ganha mais experiência, pode expandir seu formulário de login, adicionar validações de entrada, conectar-se a um servidor e implementar recursos avançados de segurança. Continue praticando e explorando para se tornar um desenvolvedor web mais competente e versátil.

Caso queira aprender tudo que você precisa para se tornar um programador júnior recomendo clicar no botão abaixo e conhecer o Pacote Full-Stack Master da Danki Code (CEO Guilherme Grillo).

INSCREVA-SE AGORA MESMO!

Espero que este artigo tenha sido útil e inspirador para o seu próximo projeto de desenvolvimento web.