Saturday, 5 April 2014

Different style Login Form using Css and jquery in HTML

In this article we are going to see create a login form in different look by using Css and jquery. For this we have to use the span tags which make the tag inner style. Create the username and password as span tag inside a another span tag.

using Css give a different style and look
using jquery make a action to fire and design the tag.

linkLogin Form output

Please click on the username, password and login button to animate.





Output:






Html
         <html>
<head>
<link type="text/css" rel="stylesheet" href="css.css"/>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500' rel='stylesheet' type='text/css'>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>
<body>

<div class="login" id="" >

    <span id="slogin">
        <span class="spass rpad" id="passd">
            <span id="uname" ><span id="actuname">Username &nbsp;</span><input type="text" id="username" placeholder="Enter the username" required />
                <span class="spass lpad" id="upad"><span id="pp1">                                     &nbsp;Password  &nbsp;</span>  
                       <input type="password" id="pwd" placeholder="Enter the                                         password" required /></span>
            </span>
            <span id="pp">&nbsp;Password </span>
        </span> &nbsp; <input id="log" value="login" type="submit" />
    </span>
   
   
   
   
</div>

</body>
</html>

Css


body
{
width: 100%;
      height: 100%;
      margin: 0 auto;
      background-color: #efefef;
      margin-top: 50px;
}

#username
{
background:rgb(26, 78, 107);
width:40%;
height:34px;
font-size: medium;
color:white;
padding-left: 15px;
padding-right: 15px;
border-radius:25px;

}
#pwd
{
font-size: medium;
background:rgb(9, 85, 12);
width:40%;
height:34px;
display:none;
padding-left: 15px;
padding-right: 15px;
border-radius:25px;

}
#uname
{
background: rgb(100, 150, 197);
width: 100%;
/* height: 36px; */
padding-left: 10px;
padding-right: 0px;
padding-top: 6px;
border-radius: 25px;
padding-bottom: 8px;
border: black;
font-family: 'Roboto', sans-serif;
      font-weight: 400;
      color:white;
/*position: relative;
left: -30px;*/
}
#log
{
      background-color: #e0514b;
border: 0px;
      width: 50px;
      height: 30px;

}

.lpad
{
padding-left:10px;
display:none;
}
.rpad
{
padding-right:15px;
}
.spass
{
font-family: 'Roboto', sans-serif;
font-weight: 300;
position:relative;
background: rgb(48, 194, 48);
width: 100%;
/* height: 36px; */
/*padding-left: 10px;*/
padding-top: 6px;
border-radius: 25px;
padding-bottom: 8px;
border: black;
/*position: relative;
left: -30px;*/
}
#slogin
{
font-family: 'Roboto', sans-serif;
font-weight: 300;
background: #e0514b;
width: 100%;
/* height: 36px; */
/*padding-left: 27px;*/
padding-right: 15px;
padding-top: 6px;
border-radius: 25px;
padding-bottom: 8px;
border: black;
/*position: relative;
left: -30px;*/
}
#passwor
{
font-family: 'Roboto', sans-serif;
font-weight: 300;
background:blue;
width:60px;

}
#logbt
{
font-family: 'Roboto', sans-serif;
font-weight: 300;
background:green;
width:60px;
}
.login
{

width:550px;
position:relative;
left:10%;
top:40%

}

#upad
{
font-family: 'Roboto', sans-serif;
      font-weight: 300;
left:5px;
padding-right: 2px;
}



Jquery:

                                                          
$(document).ready(function(){                             
  $("#pp").click(function(){                              
    $("#pp").hide();                                      
    $("#upad").show(),$( "#passd" ).removeClass( "rpad" );
                                                          
                                                          
    $("#username").hide(500), $("#pwd").show(500);        
  });                                                     
                                                          
    $("#actuname").click(function(){                      
    $("#upad").hide(),$( "#passd" ).addClass( "rpad" );   
    $("#pp").show();                                      
    $("#username").show(500),$("#pwd").hide(500);         
  });                                                     
                                                          
  $("#log").click(function()                              
  {                                                       
  $("#username").hide(500),$("#pwd").hide(500,function(){ 
  $("#pp").show();                                        
  $( "#passd" ).addClass( "rpad" );                       
  $("#upad").hide();                                      
  });                                                     
                                                          
                                                          
                                                          
                                                          
  });                                                     
                                                          
});                                                       
                                                          




From this article you can see how we can create a different style of login forms.

No comments:

Post a Comment