Carregando...

Tela de Login Html

Postado: 27 de setembro de 2024 Tempo de Leitura: 2 Minutos

Tela de Login Html

Nesse tutorial você vai aprender como é simples desenvolver uma tela de login utilizando somente HTML e CSS.

Tela de Login Html

Tutorial Completo: Construindo uma Tela de Login Personalizada com HTML e CSS

Aprenda a construir telas de login personalizadas e eficientes utilizando HTML. Explore as principais tags e atributos para criar formulários intuitivos e garantir a segurança dos dados dos usuários. Descubra como combinar HTML com CSS para dar vida às suas interfaces e oferecer uma experiência de login memorável.

Código HTML:

Neste exemplo, criamos um formulário de login com um campo de USUÁRIO, SENHA e um BOTÃO de enviar os dados inseridos nos campos.

O atributo action do formulário especifica a página que processará o envio dos campos, quando o usuário clica no botão entrar.

HTML
    <form class="formulario-login" action="#" method="post">

        <h2>Formulário de Login</h2>
      
            <input type="text" name="usuario" placeholder="Usuário"/>
            <input type="password" name="senha" placeholder="Senha"/>
            <input type="submit" value="Entrar" />
            <a href="#" title="Cadastro">Cadastro</a>

    </form>

Estilização com Códigos CSS:

CSS é usado para estilizar a aparência do formulário. Você pode personalizar cores, fontes, bordas, espaçamento e outros aspectos visuais.

CSS
.formulario-login{

  background:#F3F3F3;
  margin:auto;
  width: 50%;
  max-width:400px;
  padding:30px;
  border:1px solid rgba(0,0,0,0.2);
  border-bottom:5px solid rgba(0, 124, 255);
  border-radius:15px;

}

.formulario-login h2 {
  
  text-align: center;
  margin-bottom:20px;
  color:rgba(0,0,0,0.5);

}

.formulario-login input{
  
  display:block;
  width:100%;
  background:#f3f3f3;
  border:none;
  margin:30px 0;
  padding:10px;
  border-bottom:1px solid rgba(0,0,0,0.2);
  outline:none;

}

.formulario-login input[type="text"]:focus , [type="password"]:focus{
  border-bottom:2px solid rgba(0,0,0,0.9);
} 

.formulario-login input[type="submit"]{

  background:rgba(0, 124, 255);
  opacity:0.9;
  border:none;
  border-radius:30px;
  color:white;
  font-size:1em; 
  cursor:pointer;

}

.formulario-login input[type="submit"]:hover{
  opacity:1;
  transition:.2s;
}

.formulario-login input[type="submit"]:active{
  transform:scale(0.95);
}

.formulario-login a{
  display:block;
  text-align:center;
  text-decoration:none;
  color:rgba(0,0,0,0.5);
}

.formulario-login a:hover{
 
  text-decoration:underline;
  color:rgba(0,0,0,0.8);

}

@media(max-width:780px){

  .formualrio-login { width:75%; }

}

@media(max-width:480px){
  
  .formulario-login { width:95%; }

}

Veja o Resultado baixo!

Tela de Login Html

Baixar Código Veja Funcionando

Neste artigo, você aprendeu o passo a passo de como criar uma tela de login com html css.

Lembre-se:

  • Este é apenas um exemplo básico. Você pode personalizar a aparência e a funcionalidade do seu formulário de acordo com suas necessidades.
  • Existem muitos recursos e bibliotecas disponíveis para ajudá-lo a criar formulários mais complexos.

Com um pouco de esforço, você pode criar telas de login personalizada que seja útil, bonita e aprimore a experiência do usuário em seu site.

existem diversas formas de estilizar Telas de logins com efeitos, cores, formas e animações diferentes.

Fica o desafio para você tentar criar um novo design do zero a criatividade é sua.

faça um exemplo e comente aqui em baixo e deixe um link do seu desafio.

Publicado por: Loop Nerd

486 Visualizações

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Artigos Relacionados