O início da jornada no desenvolvimento da Web (front-end) pode ser assustador. A marcação é muito estranha no início. CSS algumas vezes deixa sua página bonita, outras vezes você não tem ideia de por que uma única propriedade transformou sua página em uma bagunça. E no caso de ser a primeira vez que você está trabalhando com uma linguagem de programação, JavaScript pode ser o mais assustador dos três.
Mas, quando você finalmente domina HTML, CSS e JavaScript, o que fazer com eles? Prática. Pense em algo que você quer fazer com o seu conhecimento recém-adquirido, não importa se é “útil”, não importa o quão complexo seja. Basta fazer algo que o ajude a melhorar em HTML, CSS e JavaScript.
Hoje, como você já descobriu pelo título, irei acompanhá-lo na criação de uma página de login usando HTML, CSS e JavaScript. Mas não se preocupe. Novamente, como o título diz, esta é sua primeira página de login, o que significa que o código é o mais simples possível e haverá uma explicação para acompanhar cada parte do código.
HTML
Começaremos pelo HTML, pois é o responsável pelas informações apresentadas na página. Em outras palavras, primeiro vamos escrever e estruturar todas as informações contidas na página sem nos preocupar com o estilo (CSS) ou a interatividade (JavaScript). Analise o arquivo HTML completo pelo tempo que desejar e, quando estiver pronto, prossiga para a explicação.
Como de costume em arquivos HTML, temos duas partes: o e o . O primeiro inclui metainformações sobre a nossa página web, como a codificação de caracteres usada, o título da página (o nome que você vê na guia do seu navegador) e referências aos arquivos CSS e JavaScript que este arquivo HTML fará uso. Observe que há um atributo defer na tag para que o script JavaScript só seja executado depois que o HTML estiver totalmente carregado.</p>
No <body> , incluímos todas as informações que ficarão visíveis em nossa página. Usamos um elemento <main>
para envolver todo o conteúdo da página em vez de uma <div> simples. Enquanto <main> e os outros elementos semânticos são funcionalmente iguais aos <div> no sentido de que envolvem outros elementos, os primeiros fornecem ao navegador mais informações sobre o conteúdo das páginas da web e facilitam o trabalho de ferramentas como leitores de tela, que são essenciais para tornar a web mais acessível.
Dentro do elemento <main>, ou seja, o retângulo branco, temos todas as informações vistas na tela: o título “Login” como um elemento <h1>, um <div> que está apenas configurando o espaço necessário para a mensagem de erro (<p>) e por último, o formulário de login, <form>. Este formulário é composto por três elementos <input>: um campo de texto para o nome de usuário, um campo de senha para a senha e o respectivo botão de envio do formulário. Usar uma senha como o tipo do segundo campo é importante para que, quando o usuário digitar sua senha, ela mostre pontos em vez da senha real. Além disso, observe o atributo placeholder. O valor que você dá a esse atributo é mostrado como, você adivinhou, o texto do marcador de posição dos campos do formulário.
A propósito, se você está se perguntando por que os elementos <input> não estão fechados, é porque eles não precisam de tags de fechamento (</input> ou algo entre essas linhas). É o que chamamos de tags de fechamento automático.
Claro, usamos bastante ids e classes para facilitar nosso trabalho com CSS. Os ids nos permitem selecionar elementos HTML de forma inequívoca, ou seja, cada id representa um único elemento do nosso arquivo. Por outro lado, as classes são usadas quando temos um conjunto de estilos CSS que queremos repetir para vários elementos. Veremos o uso prático desses ids e classes a seguir.
Continue lendo Primeira página de login com HTML, CSS e JavaScript – Parte 2
Continue lendo Primeira página de login com HTML, CSS e JavaScript – Parte 3
Se você deseja brincar com uma demonstração ao vivo, pode encontrar o código completo no GitHub aqui.