Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App
geeksforgeeks
Browser
Continue

Related Articles

HTML | Responsive Modal Login Form

Improve Article
Save Article
Like Article
author
Shubrodeep Banerjee
scholar
583 published articles
Improve Article
Save Article
Like Article

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 Add the required CSS to design the login page try to keep the design as simple as possible. 

Program: This code will guide you through comments that how to design design and which property is used for which design to create. 

html




<!DOCTYPE html>
<html>
<style>
    /*set border to the form*/
     
    form {
        border: 3px solid #f1f1f1;
    }
    /*assign full width 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;
    }
    /*set a style for the buttons*/
     
    button {
        background-color: #4CAF50;
        color: white;
        padding: 14px 20px;
        margin: 8px 0;
        border: none;
        cursor: pointer;
        width: 100%;
    }
    /* set a hover effect for the button*/
     
    button:hover {
        opacity: 0.8;
    }
    /*set extra style for the cancel button*/
     
    .cancelbtn {
        width: auto;
        padding: 10px 18px;
        background-color: #f44336;
    }
    /*centre the display image inside the container*/
     
    .imgcontainer {
        text-align: center;
        margin: 24px 0 12px 0;
    }
    /*set image properties*/
     
    img.avatar {
        width: 40%;
        border-radius: 50%;
    }
    /*set padding to the container*/
     
    .container {
        padding: 16px;
    }
    /*set the forgot password text*/
     
    span.psw {
        float: right;
        padding-top: 16px;
    }
    /*set styles for span and cancel button on small screens*/
     
    @media screen and (max-width: 300px) {
        span.psw {
            display: block;
            float: none;
        }
        .cancelbtn {
            width: 100%;
        }
    }
</style>
 
<body>
 
    <h2>Login Form</h2>
    <!--Step 1 : Adding HTML-->
    <form action="/action_page.php">
        <div class="imgcontainer">
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.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>

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 Add the required CSS to design the login page try to keep the design as simple as possible. 
Program: 
html



<!DOCTYPE html>
<html>
<style>
   
    /*assign full width 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;
    }
   
    /*set a style for the buttons*/
    button {
        background-color: #4CAF50;
        color: white;
        padding: 14px 20px;
        margin: 8px 0;
        border: none;
        cursor: pointer;
        width: 100%;
    }
   
    /* set a hover effect for the button*/
    button:hover {
        opacity: 0.8;
    }
   
    /*set extra style for the cancel button*/
    .cancelbtn {
        width: auto;
        padding: 10px 18px;
        background-color: #f44336;
    }
   
    /*centre the display image inside the container*/
    .imgcontainer {
        text-align: center;
        margin: 24px 0 12px 0;
        position: relative;
    }
   
    /*set image properties*/
    img.avatar {
        width: 40%;
        border-radius: 50%;
    }
   
    /*set padding to the container*/
    .container {
        padding: 16px;
    }
     
    /*set the forgot password text*/
    span.psw {
        float: right;
        padding-top: 16px;
    }
   
    /*set the Modal background*/
    .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;
    }
   
    /*style the model content box*/
    .modal-content {
        background-color: #fefefe;
        margin: 5% auto 15% auto;
        border: 1px solid #888;
        width: 80%;
    }
   
    /*style the close button*/
    .close {
        position: absolute;
        right: 25px;
        top: 0;
        color: #000;
        font-size: 35px;
        font-weight: bold;
    }
     
    .close:hover,
    .close:focus {
        color: red;
        cursor: pointer;
    }
   
    /* add zoom animation*/
    .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>
    <!--Step 1 : Adding HTML-->
    <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">&times;</span>
                <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.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>
Output:
  
 
 
HTML and CSS both are foundation of webpages. HTML is used for webpage development by structuring websites, webapps and CSS used for styling websites and webapps. You can learn more about HTML and CSS from the links given below:

My Personal Notes
arrow_drop_up
Last Updated :
18 May, 2022
Like Article

Save Article

Similar Reads
1.
How to make responsive sliding login and registration form using HTML CSS and JavaScript ?
2.
Design a Responsive Sliding Login & Registration Form using HTML CSS & JavaScript
3.
How to create a responsive Modal Sign-Up form for a Website ?
4.
How to add a Login Form to an Image using HTML and CSS ?
5.
HTML Neumorphism Login Form
6.
LinkedIn Login Form Using HTML and CSS
7.
Design a transparent login/Sign Up webpage using HTML and CSS
8.
HTML | Responsive full page image using CSS
9.
HTML | Viewport meta tag for Responsive Web Design
10.
How to create responsive image gallery using HTML, CSS, jQuery and Bootstrap?
Related Tutorials
1.
Onsen UI
2.
React Material UI
3.
NuxtJS
4.
D3.js
5.
Spectre CSS
Next

How to create a responsive Modal Sign-Up form for a Website ?
Article Contributed By :
https://media.geeksforgeeks.org/auth/avatar.png
Shubrodeep Banerjee
Shubrodeep Banerjee
Vote for difficulty
Current difficulty :
Medium





Improved By :
Article Tags :
Practice Tags :
Report Issue 
We use cookies to ensure you have the best browsing experience on our website. By using our site, you
acknowledge that you have read and understood our
Cookie Policy &
        Privacy Policy

Lightbox