Formulario de login (diseno)

Username Password Remember me

Forgot password?

---

Formulario de login

Formulario de login, onde dejare el codigo para que lo utilizen si necessitan, en vuestros proyectos

los estilos, son configurables, o sea que los pueden poner a vuestro gusto

...

Codigo del ejemplo de los estilos CSS

          body {font-family: Arial, Helvetica, sans-serif;}
             form {border: 3px solid #f1f1f1;
               width:350px;
                 margin:auto;
               background-color:green;}
             
             input[type=text], input[type=password] {
               width: 100%;
               padding: 12px 20px;
               margin: 8px 0;
               display: inline-block;
               border: 1px solid #ccc;
               box-sizing: border-box;
             }
             
             .btn_login {
               background-color: #AD9AA4;
               color: white;
               padding: 14px 20px;
               margin: 8px 0;
               border: none;
               cursor: pointer;
               width: 100%;
             }
             
             btn:hover {
               opacity: 0.8;
             }
             
             .cancelbtn {
               width: auto;
               padding: 10px 18px;
               background-color: #f44336;
             }
             
             .imgcontainer {
               text-align: center;
               margin: 24px 0 12px 0;
             }
             
             img.avatar {
               width: 40%;
               border-radius: 50%;
             }
             
             .container {
               padding: 16px;
               align-items: center;
               justify-content: center;
             
             }
             
             span.psw {
               float: right;
               padding-top: 16px;
             }
             
             /* Change styles for span and cancel button on extra small screens */
             @media screen and (max-width: 300px) {
               span.psw {
                  display: block;
                  float: none;
               }
               .cancelbtn {
                  width: 100%;
               }
             }
         

El formulario se puede hacer mas agradable, cambiando los estilos del mismo

Codigo del ejemplo del formulario

           <div class="container">
             <form action="/action_page.php" method="post">
                 <div class="imgcontainer">
                     <img src="https://cdn-icons-png.flaticon.com/512/295/295128.png" alt="Avatar" class="avatar">
                 </div>
         
                 <div class="container">
                     <label for="uname"><b>Username</b></label>
                     <input type="text" placeholder="Enter Username" name="uname" required>
         
                     <label for="psw"><b>Password</b></label>
                     <input type="password" placeholder="Enter Password" name="psw" required>
         
                     <button type="submit">Login</button>
                     <label>
                         <input type="checkbox" checked="checked" name="remember"> Remember me
                     </label>
                 </div>
         
                 <div class="container" style="background-color:#f1f1f1">
                     <button type="button" class="cancelbtn">Cancel</button>
                     <span class="psw">Forgot <a href="#">password?</a></span>
                 </div>
             </form>
         </div>         
     

Centrar formulario absoluto

             .container{
                 display:flex;
                align-items: center;
                justify-content: center;
                 min-height:100vh;
             }
         

Ir al índice