HTML | Responsive Modal Login Form

Responsive Login Form

Follow the steps to create a responsive Login form using CSS.

Step 1 : Adding HTML
Add an image inside a container and add inputs with matching labels for each field. Wrap a “form” element around them to process the input.

Step 2 : Adding CSS

The code below is used to set border to the form.



The code below is used to assign full width inputs.

The code below is used to set a style for the buttons.

The code below is used to set a hover effect for the button.

The code below is used to set extra style for the cancel button.

The code below is used to centre the display image inside the container.

The code below is used to set image properties.

The code below is used to set padding to the container.

The code below is used to set the forgot password text.

The code below is used to set styles for span and cancel button on small screens.

INPUT :
filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<style>
form {
    border: 3px solid #f1f1f1;
}
  
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;
}
  
button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}
  
button: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;
}
  
span.psw {
    float: right;
    padding-top: 16px;
}
  
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
}
</style>
<body>
  
<h2>Login Form</h2>
  
<form action="/action_page.php">
  <div class="imgcontainer">
    <img src="img_avatar2.png" alt="Avatar" class="avatar">
  </div>
  
  <div class="container">
    <label><b>Username</b></label>
    <input type="text" placeholder="Enter Username" name="uname" required>
  
    <label><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" required>
          
    <button type="submit">Login</button>
    <input type="checkbox" checked="checked"> Remember me
  </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>
  
</body>
</html>

chevron_right


OUTPUT :




Kindly visit the link below for the output.

Login_form_output

Follow the steps to create a responsive Modal Login form

Step 1 : Adding HTML.

Use a “form” element to process the input. Then add inputs with matching labels for each field.

STEP 2 : Adding CSS

Using the same CSS as the above example with certain Modal modifications:

The code below is used to set the Modal background.
/>

The code below is used to style the model content box.

The code below is used to style the close button.

The code below is used to add zoom animation

INPUT :
filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<style>
  
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;
}
  
  
button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}
  
button:hover {
    opacity: 0.8;
}
  
  
.cancelbtn {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}
  
  
.imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
    position: relative;
}
  
img.avatar {
    width: 40%;
    border-radius: 50%;
}
  
.container {
    padding: 16px;
}
  
span.psw {
    float: right;
    padding-top: 16px;
}
  
  
.modal {
    display: none; 
    position: fixed;
    z-index: 1; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; 
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
    padding-top: 60px;
}
  
  
.modal-content {
    background-color: #fefefe;
    margin: 5% auto 15% auto; 
    border: 1px solid #888;
    width: 80%; 
}
  
.close {
    position: absolute;
    right: 25px;
    top: 0;
    color: #000;
    font-size: 35px;
    font-weight: bold;
}
  
.close:hover,
.close:focus {
    color: red;
    cursor: pointer;
}
  
.animate {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s
}
  
@-webkit-keyframes animatezoom {
    from {-webkit-transform: scale(0)} 
    to {-webkit-transform: scale(1)}
}
    @keyframes animatezoom {
    from {transform: scale(0)} 
    to {transform: scale(1)}
}
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
}
</style>
<body>
  
<h2>Modal Login Form</h2>
  
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Login</button>
  
<div id="id01" class="modal">
    
  <form class="modal-content animate" action="/action_page.php">
    <div class="imgcontainer">
      <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
      <img src="img_avatar2.png" alt="Avatar" class="avatar">
    </div>
  
    <div class="container">
      <label><b>Username</b></label>
      <input type="text" placeholder="Enter Username" name="uname" required>
  
      <label><b>Password</b></label>
      <input type="password" placeholder="Enter Password" name="psw" required>
          
      <button type="submit">Login</button>
      <input type="checkbox" checked="checked"> Remember me
    </div>
  
    <div class="container" style="background-color:#f1f1f1">
      <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
      <span class="psw">Forgot <a href="#">password?</a></span>
    </div>
  </form>
</div>
  
<script>
  
var modal = document.getElementById('id01');
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>
</body>
</html>

chevron_right


OUTPUT :




Kindly visit the link below to see the complete output of the above code.

modal_loginform_output



My Personal Notes arrow_drop_up

I am a technology enthusiast who has a keen interest in programming I am pursuing Engineering in Computer Science from GEU, Dehradun I like to unwind by watching movies and English sitcomsI have a keen interest in music

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.