Learn to code - Login Form



In this lesson you will learn how to create responsive login form.


We will show two version, Javascript (for pop up button) and without javascript.


Click the button below to test Javascript version form.



Try yourself >>


This lesson include:


  • HTML Instructions
  • CSS Instructions
  • Javascript Instructions


We will add comments inside the example code boxes to explain as much as we can, comments are in grey color.







Part 1

No Javascript version form


Add HTML



Follow our comments inside the code example box ( in grey ).


Visit our HTML Editors lesson if you don't know how to open and edit HTML file:


HTML Editors >>


Visit our HTML Forms Guide to learn more about HTML Forms


Visit our CSS Forms Guide to learn more about CSS Forms


Code Example:

        
          <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>
<form action="/action_page.php" method="post">
  <div class="imagecontainer">
    <img src="../img/login_image.png" alt="Avatar" class="avatar">
  </div>

  <div class="container">
    <label for="usernamename"><b>Username</b></label>
    <input type="text" placeholder="Enter Username" name="usernamename" required>

    <label for="password"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="password" 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="registered_button">Already registered?</button>
    <span class="password">Forgot <a href="#">password?</a></span>
  </div>
</form>

</body>
</html>  
    
      
  




Part 2


Add CSS

Add the style sheets:


Code Example:

      
      
      <style>
body {font-family: Arial, Helvetica, sans-serif;}
form {border: 2px solid #f1f1f1;}

.container {
  padding: 15px;
}

span.password {
  float: right;
  padding-top: 14px;
}
.registered_button {
  width: auto;
  padding: 10px 17px;
  background-color: #323652
;
}
button {
  background-color: #7F89CD;




  color: white;
  padding: 15px 18px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}
/* when hovering with mouse on button */

button:hover {
  opacity: 0.7;
}

/* inputs */

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;
}
/* image of the avatar */

.imagecontainer {
  text-align: center;
  margin: 22px 0 12px 0;
}

image.avatar {
  width: 40%;
  border-radius: 50%;
}


/* responsive style for small screens */
@media screen and (max-width: 320px) {
  span.password {
     display: block;
     float: none;
  }
  .registered_button {
     width: 100%;
  }
}
</style>
      
    
      
  
Try yourself >>








Part 1

Javascript version form


Add HTML



Follow our comments inside the code example box ( in grey ).


Visit our HTML Editors lesson if you don't know how to open and edit HTML file:


HTML Editors >>



Code Example:

        
          <!-- Pop up button -->
<button onclick="document.getElementById('popup').style.display='block'">Login</button>

<div id="popup" class="modal">
  <span onclick="document.getElementById('popup').style.display='none'"
class="close" title="close pop up">&times;</span>

  <form class="modal-content animate" action="/action_page.php">
    <div class="imagecontainer">
    <img src="../img/login_image.png" alt="Avatar" class="avatar">
    </div>

    <div class="container">
      <label for="username"><b>Username</b></label>
      <input type="text" placeholder="Enter Username" name="username" required>

      <label for="pasword"><b>Password</b></label>
      <input type="password" placeholder="Enter Password" name="password" 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" onclick="document.getElementById('popup').style.display='none'" class="registered_button">Already registered?</button>
      <span class="password">Forgot <a href="#">password?</a></span>
    </div>
  </form>
</div>  
    
      
  








Part 2


Add CSS

Add the style sheets:


Code Example:

      
      <style>
      /* background */
.modal {
  display: none; 
  z-index: 1; /* Sit on top */
  position: fixed; /* Not move */
  top: 0;
  left: 0;
  height: 100%; 
  width: 100%; 
  overflow: auto; /* Enable scrolling */
  background-color: rgba(0,0,0,0.3); 
  background-color: rgb(0,0,0); 
  padding-top: 60px;
}

/* Modal Content/Box */
.modal-content {
  margin: 5px auto; /* 15% from the top  */
  border: 1px solid #888;
  width: 75%; 
  background-color: #fefefe;

}

.close {
  right: 25px;
  top: 0;
  position: absolute;

  font-size: 32px;
  font-weight: bold;
  color: #000;

}
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}
.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}



@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)}
  to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
  from {transform: scale(0)}
  to {transform: scale(1)}
}
</style>
      
    
      
  









Part 3


Add Javascript

Code Example:

      
      <script>
var modal = document.getElementById('popup');

// When the user clicks outside box, close 
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>
      
    
      
  
Try yourself >>

Visit our HTML Forms Guide to learn more about HTML Forms Guide


Visit our CSS Forms Guide to learn more about CSS Forms Guide





we provide computer coding classes online free , with us you can easily learn programming online, our main goal is to allow students to learn computer coding for beginners, learn front end development to server side development easily and free

Navigation