Formulário com Validações

Veja o projeto aqui!

📷 Preview do projeto:

📌 Sobre

Este é um projeto de Formulário com Validações desenvolvido com o objetivo de praticar conceitos fundamentais de HTML, CSS e JavaScript. A ideia principal foi explorar o uso correto das tags de formulário, aplicar validações de entrada e melhorar a experiência do usuário ao preencher os campos.

📚 Aprendizados

Durante o desenvolvimento deste projeto de formulário com validações, pude aprofundar meus conhecimentos em HTML5, CSS3 e JavaScript, com foco nos seguintes pontos:

• HTML5: utilização de tags de formulário (input, label, button) com seus respectivos tipos (text, email, password), aplicando boas práticas de semântica.

• CSS3: aplicação de estilização, com espaçamentos, alinhamentos e responsividade, seguindo a abordagem mobile first e uso de media queries para adaptação da página a diferentes dispositivos e orientações de tela.

• JavaScript: implementação de validações em tempo real, com o uso de eventos (input, submit, click) e funções para verificar o preenchimento correto de cada campo.

• Expressões Regulares (Regex): validação de formato de e-mail para garantir entradas válidas.

• DOM API: manipulação de elementos HTML de forma dinâmica, exibindo mensagens de erro personalizadas para indicar erros ou sucesso nos campos.

• Interatividade adicional: implementação do recurso de mostrar/esconder senha, alternando ícones com manipulação de classes.

Esse projeto me permitiu reforçar conceitos básicos de formulários, semântica, design responsivo e lógica de programação para criar interfaces mais funcionais e acessíveis.

🔨 Ferramentas

• HTML5
• CSS3
• Javascript
• Media Queries
• DOM
• Regex
• Font Awesome

🧠 Desafios e Melhorias Futuras

▶ DESAFIOS:

• Implementar a responsividade do formulário de maneira eficiente usando conceitos de mobile first, garantindo uma boa adaptação em diferentes dispositivos sem causar quebras no layout.

• Desenvolver e integrar corretamente as funcionalidades de validação em tempo real no JavaScript, como regex para e-mails, exibição de mensagens de erro e lógica para senhas.

▶ MELHORIAS:

• Expandir as validações para casos mais complexos (ex: verificação de força da senha, e-mails com domínios específicos).

• Integrar com armazenamento local (LocalStorage) ou até mesmo backend no futuro, simulando login real.