Design a site like this with WordPress.com
Get started

How To Create A Responsive Login/Sign Up HTML Page ?.

Posted on by Shriniket Deshmukh

In this tutorial, we will be creating a responsive Login/Signup page for your next web application.

We will be using a bootstrap tabbed class, to make it more user friendly, thus making it more appealing to users.

Prerequisite:

To get started , we will be needing following libraries:

(Note : I have used CDN for both the libraries, you can install it manually and then add library path too)

Starter Page

Here’s a basic starter template with all essential libraries.

<!DOCTYPE html>
<html lang="en">
   <head>
      <style type="text/css">
      </style>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
      <meta name="description" content="">
      <meta name="author" content="">
      <!-- Latest compiled and minified Bootstrap CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
      <title>Mocial.com</title>
   </head>
   <body>
<!-- JQUERY LIBRARY -->   
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

 <!-- Latest compiled and minified Boostrap JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


</body>

</html>

Now, we are ready to build Navigation Header, Login Form & Sign Up Form.

Adding Navigation Header

Let’s first add Navigation Header to our site:

<!--NAV BAR -->
      <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
         <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Mocial</a>
         </div>
         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <div class="col-sm-3 col-md-3 pull-right">
               <form class="navbar-form" role="search">
                  <div class="input-group">
                     <input type="text" class="form-control" placeholder="Search" name="q">
                     <div class="input-group-btn">
                        <button class="btn btn-success" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                     </div>
                  </div>
               </form>
            </div>
         </div>
      </nav>
      <!-- ENDS HERE -->

(Note: We have used navbar navbar-collapse classes of bootstrap libraries, to make it mobile responsive)

Adding Login | Sign Up Form

Here’s Login & Sign Up Form

<div class="container">
         <div class="row">
            <div class="col-md-4 col-md-offset-4">
               <div class="panel">
                  <ul class="nav nav-tabs">
                     <li class="active">
                        <a  href="#1" data-toggle="tab">Login</a>
                     </li>
                     <li><a href="#2" data-toggle="tab">Sign Up</a>
                     </li>
                  </ul>
               </div>
               <div class="well"  style="background:white">
                  <div class="tab-content ">
                     <div class="tab-pane active" id="1">
                        <br/>
                        <form action="#" method="POST" enctype="multipart/form-data" name="logform">
                           <div class="form-group">
                              <label for="Email">Email</label>
                              <input type="email" class="form-control" placeholder="Email" name="email" id="myemail">
                           </div>
                           <div class="row hidden" id="logEmailAlert">
                              <div class="col-md-12">
                                 <div class="alert alert-danger "><strong>Please enter a valid Email address!</strong></div>
                              </div>
                           </div>
                           <div class="form-group">
                              <label for="Password">Password</label>
                              <input type="password" class="form-control" placeholder="Password" name="pass">
                           </div>
                           <div class="row hidden" id="logPassAlert">
                              <div class="col-md-12">
                                 <div class="alert alert-danger "><strong>Please enter a valid password !</strong> </div>
                              </div>
                           </div>
                           <input type="submit" value="Login" class="btn btn-primary btn-block" id="btnlog" onclick="return validateLogin()">
                        </form>
                     </div>
                     <div class="tab-pane" id="2">
                        <br/>
                        <form action="resoures/Signer?ref_type=normallogin" method="POST" name="sigform">
                           <div class="form-group">
                              <label for="First Name">
                              First Name
                              </label>
                              <input type="text" placeholder="First Name" class="form-control" name="FirstName">
                           </div>
                           <div class="row hidden" id="firstNameAlert">
                              <div class="col-md-12">
                                 <div class="alert alert-danger" ><strong>Please fill  FirstName !</strong> </div>
                              </div>
                           </div>
                           <div class="form-group">
                              <label for="Last Name">
                              Last Name
                              </label>
                              <input type="text" placeholder="Last Name" class="form-control" name="LastName">
                           </div>
                           <div class="row hidden" id="lastNameAlert" >
                              <div class="col-md-12">
                                 <div class="alert alert-danger " ><strong>Please fill LastName !</strong> </div>
                              </div>
                           </div>
                           <div class="form-group">
                              <label for="Email">
                              Email
                              </label>
                              <input type="Email" placeholder="Email" class="form-control" name="Email">
                           </div>
                           <div class="row hidden" id="emailAlert">
                              <div class="col-md-12">
                                 <div class="alert alert-danger" ><strong>Please fill email !</strong></div>
                              </div>
                           </div>
                           <div class="form-group">
                              <label for="Password">
                              Password
                              </label>
                              <input type="Password" placeholder="Password" class="form-control" name="Password">
                           </div>
                           <div class="row hidden" id="passwordAlert">
                              <div class="col-md-12">
                                 <div class="alert alert-danger " ><strong>Please fill password !</strong></div>
                              </div>
                           </div>
                           <input type="submit" value="Sign Up" class="btn btn-primary btn-block" onclick="return validate()">
                        </form>
                        <h3>
                           <center>Or</center>
                        </h3>
                        <a href="#" class="btn btn-block" style="background-color: #3b5998;color: white;">Sign up with Facebook</a>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>

In the above code, we have used nav nav-tabs classes to create Login & Sign Up tabs , also tab-pane class helps to create a tabbed effect for Login & Sign Up modules.

We have also added validations for both the forms, thus making the form more interactive with used, these validations cover the basic like “checking whether a field is empty or not”. you can extend it further or other validations as well.

Adding JS Validation’s

<script type="text/javascript">
         function validateLogin()
         {
         var email=document.forms["logform"]["email"].value;
         var pass=document.forms["logform"]["pass"].value;
         
         //LOAD ALERTS 
         var newEmailAlert=document.getElementById('logEmailAlert');
         var newPassAlert=document.getElementById('logPassAlert');
         
         if(email=="")
         {
           newEmailAlert.classList.add('visible');
           newEmailAlert.classList.remove('hidden');
           return false;
         }
         else
         {
           newEmailAlert.classList.add('hidden');
           newEmailAlert.classList.remove('visible');
         }
         if(pass=="")
         { 
         
           newPassAlert.classList.add("visible");
           newPassAlert.classList.remove("hidden");
           return false;
         }
         else
         {
         
           newPassAlert.classList.add("hidden");
           newPassAlert.classList.remove("visible");
         
         }
         
         }
         
      </script>
      <script type="text/javascript">
         function validate(){
           var firstName=document.forms["sigform"]["FirstName"].value;
           var lastName=document.forms["sigform"]["LastName"].value;
           var email=document.forms["sigform"]["Email"].value;
           var password=document.forms["sigform"]["Password"].value;
           
           //LOAD ALERTS TOO
           var firstAlert=document.getElementById('firstNameAlert');
           var lastAlert=document.getElementById('lastNameAlert');
           var mailAlert=document.getElementById('emailAlert');
           var passAlert=document.getElementById('passwordAlert');
           //ENDS HERE//
         
           if(firstName==""){
           firstAlert.classList.add('visible');
           firstAlert.classList.remove('hidden');
             return false;
           }
           else
           {
         
             firstAlert.classList.add('hidden');
             firstAlert.classList.remove('visible');
           }
           if(lastName==""){
             
             lastAlert.classList.add('visible');
             lastAlert.classList.remove('hidden');
             return false;
           }
           else
           {
             lastAlert.classList.add('hidden');
             lastAlert.classList.remove('visible');
           }
           if(email==""){
             mailAlert.classList.add('visible');
             mailAlert.classList.remove('hidden');
             return false;
           }
           else
           {
             mailAlert.classList.add('hidden');
             mailAlert.classList.remove('visible');
           }
           if(password==""){
             passAlert.classList.add('visible');
             passAlert.classList.remove('hidden');
             return false;
           }
           else
           {
             passAlert.classList.add('hidden');
             passAlert.classList.remove('visible');
           }
         }
      </script>

In the above , code we have used bootstrap alert classes to raise alert & errors , when a field is kept empty. Bootstrap hidden & visible classes are serving the purpose here.

Final Code:

Here’s the final code, for the webpage

<!DOCTYPE html>
<html lang="en">
   <head>
      <style type="text/css">
      </style>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
      <meta name="description" content="">
      <meta name="author" content="">
      <link rel="icon" href="../../favicon.ico">
      <link rel="stylesheet" href="css/footer.css">
      <!-- Latest compiled and minified CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
      <title>Mocial.com</title>
   </head>
   <body>
      <!--NAV BAR -->
      <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
         <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Mocial</a>
         </div>
         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <div class="col-sm-3 col-md-3 pull-right">
               <form class="navbar-form" role="search">
                  <div class="input-group">
                     <input type="text" class="form-control" placeholder="Search" name="q">
                     <div class="input-group-btn">
                        <button class="btn btn-success" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                     </div>
                  </div>
               </form>
            </div>
         </div>
      </nav>
      <!-- ENDS HERE -->
      <!-- CLEAR FIX EXXAMPLE -->
      <!-- <div class="clearfix hidden-lg hidden-sm"-->
      <!--best site-->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <br><br><br><br><br>
     
      <script type="text/javascript">
         function validateLogin()
         {
         var email=document.forms["logform"]["email"].value;
         var pass=document.forms["logform"]["pass"].value;
         
         //LOAD ALERTS 
         var newEmailAlert=document.getElementById('logEmailAlert');
         var newPassAlert=document.getElementById('logPassAlert');
         
         if(email=="")
         {
           newEmailAlert.classList.add('visible');
           newEmailAlert.classList.remove('hidden');
           return false;
         }
         else
         {
           newEmailAlert.classList.add('hidden');
           newEmailAlert.classList.remove('visible');
         }
         if(pass=="")
         { 
         
           newPassAlert.classList.add("visible");
           newPassAlert.classList.remove("hidden");
           return false;
         }
         else
         {
         
           newPassAlert.classList.add("hidden");
           newPassAlert.classList.remove("visible");
         
         }
         
         }
          
         
      </script>
      <script type="text/javascript">
         function validate(){
           var firstName=document.forms["sigform"]["FirstName"].value;
           var lastName=document.forms["sigform"]["LastName"].value;
           var email=document.forms["sigform"]["Email"].value;
           var password=document.forms["sigform"]["Password"].value;
           
           //LOAD ALERTS TOO
           var firstAlert=document.getElementById('firstNameAlert');
           var lastAlert=document.getElementById('lastNameAlert');
           var mailAlert=document.getElementById('emailAlert');
           var passAlert=document.getElementById('passwordAlert');
           //ENDS HERE//
         
           if(firstName==""){
           firstAlert.classList.add('visible');
           firstAlert.classList.remove('hidden');
             return false;
           }
           else
           {
         
             firstAlert.classList.add('hidden');
             firstAlert.classList.remove('visible');
           }
           if(lastName==""){
             
             lastAlert.classList.add('visible');
             lastAlert.classList.remove('hidden');
             return false;
           }
           else
           {
             lastAlert.classList.add('hidden');
             lastAlert.classList.remove('visible');
           }
           if(email==""){
             mailAlert.classList.add('visible');
             mailAlert.classList.remove('hidden');
             return false;
           }
           else
           {
             mailAlert.classList.add('hidden');
             mailAlert.classList.remove('visible');
           }
           if(password==""){
             passAlert.classList.add('visible');
             passAlert.classList.remove('hidden');
             return false;
           }
           else
           {
             passAlert.classList.add('hidden');
             passAlert.classList.remove('visible');
           }
         }
      </script>
      <div class="container">
         <div class="row">
            <div class="col-md-4 col-md-offset-4">
               <div class="panel">
                  <ul class="nav nav-tabs">
                     <li class="active">
                        <a  href="#1" data-toggle="tab">Login</a>
                     </li>
                     <li><a href="#2" data-toggle="tab">Sign Up</a>
                     </li>
                  </ul>
               </div>
               <div class="well"  style="background:white">
                  <div class="tab-content ">
                     <div class="tab-pane active" id="1">
                        <br/>
                        <form action="#" method="POST" enctype="multipart/form-data" name="logform">
                           <div class="form-group">
                              <label for="Email">Email</label>
                              <input type="email" class="form-control" placeholder="Email" name="email" id="myemail">
                           </div>
                           <div class="row hidden" id="logEmailAlert">
                              <div class="col-md-12">
                                 <div class="alert alert-danger "><strong>Please enter a valid Email address!</strong></div>
                              </div>
                           </div>
                           <div class="form-group">
                              <label for="Password">Password</label>
                              <input type="password" class="form-control" placeholder="Password" name="pass">
                           </div>
                           <div class="row hidden" id="logPassAlert">
                              <div class="col-md-12">
                                 <div class="alert alert-danger "><strong>Please enter a valid password !</strong> </div>
                              </div>
                           </div>
                           <input type="submit" value="Login" class="btn btn-primary btn-block" id="btnlog" onclick="return validateLogin()">
                        </form>
                     </div>
                     <div class="tab-pane" id="2">
                        <br/>
                        <form action="#" method="POST" name="sigform">
                           <div class="form-group">
                              <label for="First Name">
                              First Name
                              </label>
                              <input type="text" placeholder="First Name" class="form-control" name="FirstName">
                           </div>
                           <div class="row hidden" id="firstNameAlert">
                              <div class="col-md-12">
                                 <div class="alert alert-danger" ><strong>Please fill  FirstName !</strong> </div>
                              </div>
                           </div>
                           <div class="form-group">
                              <label for="Last Name">
                              Last Name
                              </label>
                              <input type="text" placeholder="Last Name" class="form-control" name="LastName">
                           </div>
                           <div class="row hidden" id="lastNameAlert" >
                              <div class="col-md-12">
                                 <div class="alert alert-danger " ><strong>Please fill LastName !</strong> </div>
                              </div>
                           </div>
                           <div class="form-group">
                              <label for="Email">
                              Email
                              </label>
                              <input type="Email" placeholder="Email" class="form-control" name="Email">
                           </div>
                           <div class="row hidden" id="emailAlert">
                              <div class="col-md-12">
                                 <div class="alert alert-danger" ><strong>Please fill email !</strong></div>
                              </div>
                           </div>
                           <div class="form-group">
                              <label for="Password">
                              Password
                              </label>
                              <input type="Password" placeholder="Password" class="form-control" name="Password">
                           </div>
                           <div class="row hidden" id="passwordAlert">
                              <div class="col-md-12">
                                 <div class="alert alert-danger " ><strong>Please fill password !</strong></div>
                              </div>
                           </div>
                           <input type="submit" value="Sign Up" class="btn btn-primary btn-block" onclick="return validate()">
                        </form>
                        <h3>
                           <center>Or</center>
                        </h3>
                        <a href=" # " class="btn btn-block" style="background-color: #3b5998;color: white;">Sign up with Facebook</a>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- Latest compiled and minified JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
   </body>
</html>

So, we have completed our webpage with Login | Sign Up form with all basic validation’s.

Output :-

Login | Sign Up HTML Page

Validations Sign Up | Login Page

Thanks for reading this article, Hope you like it.

Do let me know, if you face any difficulties in the code, i would be happy to help.

Happy Coding !

3 thoughts on “How To Create A Responsive Login/Sign Up HTML Page ?.”

  1. Walter Lowd
    April 15, 2020 at 2:59 am

    Saved as a favorite!, I really like your web site!

    Liked by 1 person

    Reply
    1. shriniket deshmukh
      April 24, 2020 at 2:25 pm

      Thank you so much

      Like

      Reply
  2. Mabelle Opitz
    June 29, 2020 at 5:19 pm

    Do you know that the speed of your wordpress website effect your website ranking in google ? you need to check your website speed and chooss the best wordpress hosting company >>https://www.best-wordpress-hostings.org

    Like

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

Gravatar
WordPress.com Logo

You are commenting using your WordPress.com account. ( Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. ( Log Out /  Change )

Cancel

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: