Creating a simple login form - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Login Panel

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Login Panel

Description

Creating a simple login form

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <style>
body {<!-- w ww  . j  a v a2 s.  c  om-->
   font-style:italic;
   width:51%;
   margin:0px auto;
}

#login_form {
}
#f1 {
   background-color:Chartreuse;
   border-style:solid;
   border-width:2px;
   padding:24px 2px 21px 115px;
}

.f1_label {
   white-space:nowrap;
}

span {
   color:yellow;
}

.new {
   background:black;
   text-align:center;
}
</style> 
 </head> 
 <body> 
  <div id="login_form"> 
   <div class="new"> 
    <span>Lorem ipsum dolor s</span> 
   </div> 
   <!-- This is your header text--> 
   <form name="f1" method="post" action="login.php" id="f1"> 
    <table> 
     <tbody> 
      <tr> 
       <td class="f1_label">Lorem ipsum</td> 
       <!-- This is your first Input Box Label--> 
       <td> <input type="text" name="username" value=""> 
        <!-- This is your first Input Box--> </td> 
      </tr> 
      <tr> 
       <td class="f1_label">Lorem ipsu</td> 
       <!-- This is your Second Input Box Label--> 
       <td> <input type="password" name="password" value=""> 
        <!-- This is your Second Input Box --> </td> 
      </tr> 
      <tr> 
       <td> <input type="submit" name="login" value="Log In" style="font-size:18px; "> 
        <!-- This is your submit button --> </td> 
      </tr> 
     </tbody> 
    </table> 
   </form> 
  </div>  
 </body>
</html>

Related Tutorials