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
notepad.gif
Step 2: Create a Folder the name of 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