HTML Responsive Modal Login Form

Last Updated : 06 Mar, 2024

In this article we will create a responsive modal login form in HTML by utilizing a combination of HTML, CSS, and JavaScript. Design the modal to overlay the page, adjusting its size and layout to fit various screen sizes. Incorporate form elements for username and password entry, with validation if required, and add a close button for user convenience.

Preview:

Approach:

Create an HTML modal login form with a button to trigger the modal’s display.Include form elements for username and password entry, a login button, and a checkbox for remembering the user.
Style the form using CSS to make it visually appealing and responsive.Design the modal background, set button styles, and adjust layout for different screen sizes.
Utilize JavaScript to handle modal behavior, making it appear on button click and disappear on the overlay or close button click. Implement a window onclick event to close the modal when clicking outside the modal box.
Ensure responsiveness by using percentage-based widths for inputs and setting media queries for small screens. Include a close button (“×”) within the modal for convenient closure.
Enhance accessibility by adding alt text to images and providing a link for password recovery,Apply hover effects to buttons and utilize animations for a smoother user experience.

Example: In this example, we creates a modal login form. It includes fields for username and password, with options for remembering the login and resetting the password. The form appears when the “Login” button is clicked and can be closed using the close button or by clicking outside the modal.

html

<!DOCTYPE html>
<html>
<style>
    * {
        text-align: center;
    }
 
    /*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: 40%;
    }
 
    /*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">×</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:

olp

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:

HTML Tutorial and HTML Examples.
CSS Tutorial and CSS Examples

Suggest improvement

HTML | DOM Column span Property

HTTP GET and POST Methods in PHP

Share your thoughts in the comments

HTML Responsive Modal Login Form

Preview:

Approach:

html

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?