HTML | Responsive Modal Login Form - GeeksforGeeks

29 Jul, 2021
Responsive Login Form
Follow the steps to create a responsive Login form using CSS.
Step 1 : Adding HTMLAdd 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 CSSAdd 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.
<!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 CSSAdd the required CSS to design the login page try to keep the design as simple as possible.
Program:
<!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">×</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 is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Insert Form Data into Database using PHP ?
REST API (Introduction)
How to position a div at the bottom of its container using CSS?
HTTP headers | Content-Type
Design a web page using HTML and CSS
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript