Post
Ask Question

Simple Login Form using HTML 5

Introduction

 
This article helps to show how to design a simple Login form using HTML 5 tools. We know that HTML is an acronym for "HyperText Markup Language" that is used to display data in a browser. HTML 5 is the advanced version of HTML for developing 3D or animated applications. In this application, we have implemented some designing tools and developed the simple Login form. HTML5 is the latest version of HTML (Hypertext Markup Language). The initial phase for the development of HTML5 started in 2004 by Web Hypertext Application Technology Working Group that has been developed and edited by David Hyatt of Apple and Ian Hickson of Google. The extension for HTML is ".html".
 
Step 1: Open Notepad
  • Click->Start button->Notepad
  • Give the file a name of your choice
  • Click New button->save
  • There the name is "Tom.html"
notepad.gif
 
Step 2: Create a Folder the name of folder
  • Right-click of Desktop Screen-> New-> Folder
  • Name of Folder is "Sam"
  • Finally all HTML files and related sources are saved in that folder
folder.gif
 
Step 3: Apply the sheet of the form
 
Code
  1. <style type="text/css">  
  2.        * {  
  3.               margin: 0px;  
  4.               padding: 0px;outline: none;  
  5.        }  
  6.        body {  
  7.               background: #00FF99;  
  8.        }  
  9.        form {  
  10.               border: 1px solid #270644;  
  11.               width: 250px;  
  12.               -moz-border-radius: 20px;  
  13.               -webkit-border-radius: 20px;  
  14.               background:  -moz-linear-gradient(19% 75% 90deg,#CC66FF, #66FFFF);  
  15.               background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#66FFFF), to(#CC66FF));  
  16.               margin:50px auto;  
  17.               padding: 20px;  
  18.               -moz-box-shadow:0px -5px 300px #270644;  
  19.               -webkit-box-shadow:0px -5px 300px #270644;  
  20.        }  
  21.        label {  
  22.               font-size: 12px;  
  23.               font-family: arial, sans-serif;  
  24.               list-style-type: none;  
  25.               color: #fff;  
  26.               text-shadow: #000 1px 1px;  
  27.               margin-bottom: 10px;  
  28.               font-weight: bold;  
  29.               letter-spacing: 1px;  
  30.               text-transform: uppercase;  
  31.               display: block;  
  32.        }  
  33.        input {  
  34.          -webkit-transition-property: -webkit-box-shadow, background;  
  35.          -webkit-transition-duration: 0.25s;  
  36.               padding: 6px;  
  37.               border-bottom: 0px;  
  38.               border-left: 0px;  
  39.               border-right: 0px;  
  40.               border-top: 1px solid #ad64e0;  
  41.               -moz-box-shadow: 0px 0px 2px #000;  
  42.               -webkit-box-shadow: 0px 0px 2px #000;  
  43.               margin-bottom: 10px;  
  44.               background: #8a33c6;  
  45.               width: 230px;  
  46.        }  
  47.        input.submit {  
  48.          -webkit-transition-property: -webkit-box-shadow, background;  
  49.          -webkit-transition-duration: 0.25s;  
  50.               width: 100px;  
  51.               background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#66FFFF), to(#781bb9));   
  52.               background:  -moz-linear-gradient(19% 75% 90deg,#781bb9, #66FFFF);  
  53.               color: #fff;  
  54.               text-transform: uppercase;  
  55.               text-shadow: #000 1px 1px;  
  56.               border-top: 1px solid #ad64e0;  
  57.               margin-top: 10px;  
  58.        }  
  59.        input.submit:hover {  
  60.               -webkit-box-shadow: 0px 0px 2px #000;  
  61.               background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#66FFFF), to(#781bb9));  
  62.               background:  -moz-linear-gradient(19% 75% 90deg,#781bb9, #66FFFF);  
  63.        }   
  64.        input.submit:active {  
  65.               background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#781bb9), to(#66FFFF));  
  66.               background:  -moz-linear-gradient(19% 75% 90deg,#66FFFF, #781bb9);  
  67.        }  
  68.        input:hover {  
  69.               -webkit-box-shadow: 0px 0px 4px #000;  
  70.               background: #9d39e1;  
  71.        }  
  72.       </style>  
Step 4: Define the body part and set the content of the login form.
 
Code
  1. <body>  
  2.     <form action="">  
  3.         <label>Enter the Username</label>  
  4.         <input type="text" name="username" />  
  5.         <label>Enter the Password</label>  
  6.         <input type="password" name="password"  />  
  7.         <input type="submit" value="Login" name="submit" class="submit" />  
  8.     </form>  
  9. </body>  
Step 5: Write the complete code for the developed simple login form that uses the HTML 5 tools. The complete application is given below.
 
Code
  1. <html>  
  2.     <head>  
  3.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  4.         <title>Tom Login aplication</title>  
  5.         <meta name="description" content="create login form">  
  6.             <style type="text/css">  
  7.        * {  
  8.               margin: 0px;  
  9.               padding: 0px;outline: none;  
  10.        }  
  11.        body {  
  12.               background: #00FF99;  
  13.        }  
  14.        form {  
  15.               border: 1px solid #270644;  
  16.               width: 250px;  
  17.               -moz-border-radius: 20px;  
  18.               -webkit-border-radius: 20px;  
  19.               background:  -moz-linear-gradient(19% 75% 90deg,#CC66FF, #66FFFF);  
  20.               background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#66FFFF), to(#CC66FF));  
  21.               margin:50px auto;  
  22.               padding: 20px;  
  23.               -moz-box-shadow:0px -5px 300px #270644;  
  24.               -webkit-box-shadow:0px -5px 300px #270644;  
  25.        }  
  26.        label {  
  27.               font-size: 12px;  
  28.               font-family: arial, sans-serif;  
  29.               list-style-type: none;  
  30.               color: #fff;  
  31.               text-shadow: #000 1px 1px;  
  32.               margin-bottom: 10px;  
  33.               font-weight: bold;  
  34.               letter-spacing: 1px;  
  35.               text-transform: uppercase;  
  36.               display: block;  
  37.        }  
  38.        input {  
  39.          -webkit-transition-property: -webkit-box-shadow, background;  
  40.          -webkit-transition-duration: 0.25s;  
  41.               padding: 6px;  
  42.               border-bottom: 0px;  
  43.               border-left: 0px;  
  44.               border-right: 0px;  
  45.               border-top: 1px solid #ad64e0;  
  46.               -moz-box-shadow: 0px 0px 2px #000;  
  47.               -webkit-box-shadow: 0px 0px 2px #000;  
  48.               margin-bottom: 10px;  
  49.               background: #8a33c6;  
  50.               width: 230px;  
  51.        }  
  52.        input.submit {  
  53.          -webkit-transition-property: -webkit-box-shadow, background;  
  54.          -webkit-transition-duration: 0.25s;  
  55.               width: 100px;  
  56.               background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#66FFFF), to(#781bb9));   
  57.               background:  -moz-linear-gradient(19% 75% 90deg,#781bb9, #66FFFF);  
  58.               color: #fff;  
  59.               text-transform: uppercase;  
  60.               text-shadow: #000 1px 1px;  
  61.               border-top: 1px solid #ad64e0;  
  62.               margin-top: 10px;  
  63.        }  
  64.        input.submit:hover {  
  65.               -webkit-box-shadow: 0px 0px 2px #000;  
  66.               background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#66FFFF), to(#781bb9));  
  67.               background:  -moz-linear-gradient(19% 75% 90deg,#781bb9, #66FFFF);  
  68.        }   
  69.        input.submit:active {  
  70.               background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#781bb9), to(#66FFFF));  
  71.               background:  -moz-linear-gradient(19% 75% 90deg,#66FFFF, #781bb9);  
  72.        }  
  73.        input:hover {  
  74.               -webkit-box-shadow: 0px 0px 4px #000;  
  75.               background: #9d39e1;  
  76.        }  
  77.        </style>  
  78.         </head>  
  79.         <body>  
  80.             <form action="">  
  81.                 <label>Enter the Username</label>  
  82.                 <input type="text" name="username" />  
  83.                 <label>Enter the Password</label>  
  84.                 <input type="password" name="password"  />  
  85.                 <input type="submit" value="Login" name="submit" class="submit" />  
  86.             </form>         
  87. /body>  
  88.         </html>  
Output
 
 ramooo.gif
 
 3.gif
 
Resources


Similar Articles