Post
Ask Question

Create Form Using HTML 5 and CSS

Introduction

 
HTML5 has been with us for a while now, roughly ten years. And, it hasn't really seen a major update. Sure there's XHTML, but that did little more than make things slightly stricter - making you write better quality code if you were at all concerned with compliance. HTML 5 does more than that. For one thing, it adds a few new features. Not a huge amount, but the ones that it does add are very useful.
 
Work on HTML 5 started way back in 2004, and now it's starting to get interesting. Browser support is increasing, and the element I'm most interested in - CANVAS - is supported by four out of the major five browsers. It is, however, not really feasible to use it since MSIE doesn't have any support for it.
 
Step 1: Open Macromedia Dreamweaver
 
Click Start button -> Macromedia Dreamweaver
 
startBar.jpg
 
Step 2: Create a new document Click File Menu -> New Document
 
Click the Create button.
 
newdocument.jpg
 
Step 3:- HTML 5 Doctype:
  1. <!DOCTYPE html>  
  2. <html dir="ltr" lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta charset=utf-8 />  
  5. <title>Title </title>  
  6.   
  7. </head>  
  8. <body>  
  9. Create Text here  
  10.   
  11. </body>  
  12. </html> 
Step 4: Define the body part and set the content of the Payment form.
 
Code
  1. <h1>Payment form</h1>  
  2. <form id=payment>  
  3.   <fieldset>  
  4.   <legend>Your details</legend>  
  5.   <ol>  
  6.     <li>  
  7.       <label for=name>Name</label>  
  8.       <input id=name namename=name type=text placeholder="First and last name" required autofocus>  
  9.     </li>  
  10.     <li>  
  11.       <label for=email>Email</label>  
  12.       <input id=email name=email type=email placeholder="[email protected]" required>  
  13.     </li>  
  14.     <li>  
  15.       <label for=phone>Phone</label>  
  16.       <input id=phone name=phone type=tel placeholder="Eg. +447500000000" required>  
  17.     </li>  
  18.   </ol>  
  19.   </fieldset>  
  20.   <fieldset>  
  21.   <legend>Delivery address</legend>  
  22.   <ol>  
  23.     <li>  
  24.       <label for=address>Address</label>  
  25.       <textarea id=address name=address rows=5 required>  
  26.       
  27.     <li>  
  28.       <label for="postcode">Post code</label>  
  29.       <input id="postcode" name="postcode" type="text" required="">  
  30.     </li>  
  31.     <li>  
  32.       <label for="country">Country</label>  
  33.       <input id="country" name="country" type="text" required="">  
  34.     </li>  
  35.     
  36.     
  37.   <fieldset>  
  38.   <legend>Card details</legend>  
  39.   <ol>  
  40.     <li>  
  41.       <fieldset>  
  42.       <legend>Card type</legend>  
  43.       <ol>  
  44.         <li>  
  45.           <input id="visa" name="cardtype" type="radio">  
  46.           <label for="visa">VISA</label>  
  47.         </li>  
  48.         <li>  
  49.           <input id="amex" name="cardtype" type="radio">  
  50.           <label for="amex">AmEx</label>  
  51.         </li>  
  52.         <li>  
  53.           <input id="mastercard" name="cardtype" type="radio">  
  54.           <label for="mastercard">Mastercard</label>  
  55.         </li>  
  56.       </ol>  
  57.       </fieldset>  
  58.     </li>  
  59.     <li>  
  60.       <label for="cardnumber">Card number</label>  
  61.       <input id="cardnumber" name="cardnumber" type="number" required="">  
  62.     </li>  
  63.     <li>  
  64.       <label for="secure">Security code</label>  
  65.       <input id="secure" name="secure" type="number" required="">  
  66.     </li>  
  67.     <li>  
  68.       <label for="namecard">Name on card</label>  
  69.       <input id="namecard" name="namecard" type="text" placeholder="Exact name as on the card" required="">  
  70.     </li>  
  71.   </ol>  
  72.   </fieldset>  
  73.   <fieldset>  
  74.   <button type="submit">Submit</button>  
  75.   </fieldset> 
Step 5: Apply the Stylesheet of the form Code
  1. <style>  
  2. html, body, h1, form, fieldset, legend, ol, li {  
  3.   margin: 0;  
  4.   padding: 0;  
  5. }  
  6.   
  7. body {  
  8.   background: #ffffff;  
  9.   color: #111111;  
  10.   font-family: Georgia, "Times New Roman", Times, serif;  
  11.   padding: 20px;  
  12. }  
  13.   
  14. h1 {  
  15.   font-size: 28px;  
  16.   margin-bottom: 20px;  
  17. }  
  18.   
  19. form#payment {  
  20.   background: #9cbc2c;  
  21.   -moz-border-radius: 5px;  
  22.   -webkit-border-radius: 5px;  
  23.   -khtml-border-radius: 5px;  
  24.   border-radius: 5px;  
  25.   counter-reset: fieldsets;  
  26.   padding: 20px;  
  27.   width: 400px;  
  28. }  
  29.   
  30. form#payment fieldset {  
  31.   border: none;  
  32.   margin-bottom: 10px;  
  33. }  
  34.   
  35. form#payment fieldset:last-of-type {  
  36.   margin-bottom: 0;  
  37. }  
  38.   
  39. form#payment legend {  
  40.   color: #384313;  
  41.   font-size: 16px;  
  42.   font-weight: bold;  
  43.   padding-bottom: 10px;  
  44.   text-shadow: 0 1px 1px #c0d576;  
  45. }  
  46.   
  47. form#payment > fieldset > legend:before {  
  48.   content: "Step " counter(fieldsets) ": ";  
  49.   counter-increment: fieldsets;  
  50. }  
  51.   
  52. form#payment fieldset fieldset legend {  
  53.   color: #111111;  
  54.   font-size: 13px;  
  55.   font-weight: normal;  
  56.   padding-bottom: 0;  
  57. }  
  58.   
  59. form#payment ol li {  
  60.   background: #b9cf6a;  
  61.   background: rgba(255,255,255,.3);  
  62.   border-color: #e3ebc3;  
  63.   border-color: rgba(255,255,255,.6);  
  64.   border-style: solid;  
  65.   border-width: 2px;  
  66.   -moz-border-radius: 5px;  
  67.   -webkit-border-radius: 5px;  
  68.   -khtml-border-radius: 5px;  
  69.   border-radius: 5px;  
  70.   line-height: 30px;  
  71.   list-style: none;  
  72.   padding: 5px 10px;  
  73.   margin-bottom: 2px;  
  74. }  
  75.   
  76. form#payment ol ol li {  
  77.   background: none;  
  78.   border: none;  
  79.   float: left;  
  80. }  
  81.   
  82. form#payment label {  
  83.   float: left;  
  84.   font-size: 13px;  
  85.   width: 110px;  
  86. }  
  87.   
  88. form#payment fieldset fieldset label {  
  89.   background: none no-repeat left 50%;  
  90.   line-height: 20px;  
  91.   padding: 0 0 0 30px;  
  92.   width: auto;  
  93. }  
  94.   
  95. form#payment label[for=visa] {  
  96.   background-image: url(visa.gif);  
  97. }  
  98.   
  99. form#payment label[for=amex] {  
  100.   background-image: url(amex.gif);  
  101. }  
  102.   
  103. form#payment label[for=mastercard] {  
  104.   background-image: url(mastercard.gif);  
  105. }  
  106.   
  107. form#payment fieldset fieldset label:hover {  
  108.   cursor: pointer;  
  109. }  
  110.   
  111. form#payment input:not([type=radio]),form#payment textarea {  
  112.   background: #ffffff;  
  113.   border: none;  
  114.   -moz-border-radius: 3px;  
  115.   -webkit-border-radius: 3px;  
  116.   -khtml-border-radius: 3px;  
  117.   border-radius: 3px;  
  118.   font: italic 13px Georgia, "Times New Roman", Times, serif;  
  119.   outline: none;  
  120.   padding: 5px;  
  121.   width: 200px;  
  122. }  
  123.   
  124. form#payment input:not([type=submit]):focus,form#payment textarea:focus {  
  125.   background: #eaeaea;  
  126. }  
  127.   
  128. form#payment input[type=radio] {  
  129.   float: left;  
  130.   margin-right: 5px;  
  131. }  
  132.   
  133. form#payment button {  
  134.   background: #384313;  
  135.   border: none;  
  136.   -moz-border-radius: 20px;  
  137.   -webkit-border-radius: 20px;  
  138.   -khtml-border-radius: 20px;  
  139.   border-radius: 20px;  
  140.   color: #ffffff;  
  141.   display: block;  
  142.   font: 18px Georgia, "Times New Roman", Times, serif;  
  143.   letter-spacing: 1px;  
  144.   margin: auto;  
  145.   padding: 7px 25px;  
  146.   text-shadow: 0 1px 1px #000000;  
  147.   text-transform: uppercase;  
  148. }  
  149.   
  150. form#payment button:hover {  
  151.   background: #1e2506;  
  152.   cursor: pointer;  
  153. }  
  154. </style>
Step 6: Write the complete code for the developed simple Payment form that uses the HTML 5 tools. The complete application is given below.
 
Code:
  1. <!DOCTYPE html>  
  2. <html dir="ltr" lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta charset=utf-8 />  
  5. <title>Form HTML 5 </title>  
  6. <style>  
  7. html, body, h1, form, fieldset, legend, ol, li {  
  8.   margin: 0;  
  9.   padding: 0;  
  10. }  
  11.   
  12. body {  
  13.   background: #ffffff;  
  14.   color: #111111;  
  15.   font-family: Georgia, "Times New Roman", Times, serif;  
  16.   padding: 20px;  
  17. }  
  18.   
  19. h1 {  
  20.   font-size: 28px;  
  21.   margin-bottom: 20px;  
  22. }  
  23.   
  24. form#payment {  
  25.   background: #9cbc2c;  
  26.   -moz-border-radius: 5px;  
  27.   -webkit-border-radius: 5px;  
  28.   -khtml-border-radius: 5px;  
  29.   border-radius: 5px;  
  30.   counter-reset: fieldsets;  
  31.   padding: 20px;  
  32.   width: 400px;  
  33. }  
  34.   
  35. form#payment fieldset {  
  36.   border: none;  
  37.   margin-bottom: 10px;  
  38. }  
  39.   
  40. form#payment fieldset:last-of-type {  
  41.   margin-bottom: 0;  
  42. }  
  43.   
  44. form#payment legend {  
  45.   color: #384313;  
  46.   font-size: 16px;  
  47.   font-weight: bold;  
  48.   padding-bottom: 10px;  
  49.   text-shadow: 0 1px 1px #c0d576;  
  50. }  
  51.   
  52. form#payment > fieldset > legend:before {  
  53.   content: "Step " counter(fieldsets) ": ";  
  54.   counter-increment: fieldsets;  
  55. }  
  56.   
  57. form#payment fieldset fieldset legend {  
  58.   color: #111111;  
  59.   font-size: 13px;  
  60.   font-weight: normal;  
  61.   padding-bottom: 0;  
  62. }  
  63.   
  64. form#payment ol li {  
  65.   background: #b9cf6a;  
  66.   background: rgba(255,255,255,.3);  
  67.   border-color: #e3ebc3;  
  68.   border-color: rgba(255,255,255,.6);  
  69.   border-style: solid;  
  70.   border-width: 2px;  
  71.   -moz-border-radius: 5px;  
  72.   -webkit-border-radius: 5px;  
  73.   -khtml-border-radius: 5px;  
  74.   border-radius: 5px;  
  75.   line-height: 30px;  
  76.   list-style: none;  
  77.   padding: 5px 10px;  
  78.   margin-bottom: 2px;  
  79. }  
  80.   
  81. form#payment ol ol li {  
  82.   background: none;  
  83.   border: none;  
  84.   float: left;  
  85. }  
  86.   
  87. form#payment label {  
  88.   float: left;  
  89.   font-size: 13px;  
  90.   width: 110px;  
  91. }  
  92.   
  93. form#payment fieldset fieldset label {  
  94.   background: none no-repeat left 50%;  
  95.   line-height: 20px;  
  96.   padding: 0 0 0 30px;  
  97.   width: auto;  
  98. }  
  99.   
  100. form#payment label[for=visa] {  
  101.   background-image: url(visa.gif);  
  102. }  
  103.   
  104. form#payment label[for=amex] {  
  105.   background-image: url(amex.gif);  
  106. }  
  107.   
  108. form#payment label[for=mastercard] {  
  109.   background-image: url(mastercard.gif);  
  110. }  
  111.   
  112. form#payment fieldset fieldset label:hover {  
  113.   cursor: pointer;  
  114. }  
  115.   
  116. form#payment input:not([type=radio]),  
  117. form#payment textarea {  
  118.   background: #ffffff;  
  119.   border: none;  
  120.   -moz-border-radius: 3px;  
  121.   -webkit-border-radius: 3px;  
  122.   -khtml-border-radius: 3px;  
  123.   border-radius: 3px;  
  124.   font: italic 13px Georgia, "Times New Roman", Times, serif;  
  125.   outline: none;  
  126.   padding: 5px;  
  127.   width: 200px;  
  128. }  
  129.   
  130. form#payment input:not([type=submit]):focus,  
  131. form#payment textarea:focus {  
  132.   background: #eaeaea;  
  133. }  
  134.   
  135. form#payment input[type=radio] {  
  136.   float: left;  
  137.   margin-right: 5px;  
  138. }  
  139.   
  140. form#payment button {  
  141.   background: #384313;  
  142.   border: none;  
  143.   -moz-border-radius: 20px;  
  144.   -webkit-border-radius: 20px;  
  145.   -khtml-border-radius: 20px;  
  146.   border-radius: 20px;  
  147.   color: #ffffff;  
  148.   display: block;  
  149.   font: 18px Georgia, "Times New Roman", Times, serif;  
  150.   letter-spacing: 1px;  
  151.   margin: auto;  
  152.   padding: 7px 25px;  
  153.   text-shadow: 0 1px 1px #000000;  
  154.   text-transform: uppercase;  
  155. }  
  156.   
  157. form#payment button:hover {  
  158.   background: #1e2506;  
  159.   cursor: pointer;  
  160. }  
  161.   
  162. </style>  
  163. </head>  
  164. <body>  
  165. <h1>Payment form</h1>  
  166. <form id=payment>  
  167.   <fieldset>  
  168.   <legend>Your details</legend>  
  169.   <ol>  
  170.     <li>  
  171.       <label for=name>Name</label>  
  172.       <input id=name namename=name type=text placeholder="First and last name" required autofocus>  
  173.     </li>  
  174.     <li>  
  175.       <label for=email>Email</label>  
  176.       <input id=email name=email type=email placeholder="[email protected]" required>  
  177.     </li>  
  178.     <li>  
  179.       <label for=phone>Phone</label>  
  180.       <input id=phone name=phone type=tel placeholder="Eg. +447500000000" required>  
  181.     </li>  
  182.   </ol>  
  183.   </fieldset>  
  184.   <fieldset>  
  185.   <legend>Delivery address</legend>  
  186.   <ol>  
  187.     <li>  
  188.       <label for=address>Address</label>  
  189.       <textarea id=address name=address rows=5 required>  
  190.       
  191.     <li>  
  192.       <label for="postcode">Post code</label>  
  193.       <input id="postcode" name="postcode" type="text" required="">  
  194.     </li>  
  195.     <li>  
  196.       <label for="country">Country</label>  
  197.       <input id="country" name="country" type="text" required="">  
  198.     </li>  
  199.     
  200.     
  201.   <fieldset>  
  202.   <legend>Card details</legend>  
  203.   <ol>  
  204.     <li>  
  205.       <fieldset>  
  206.       <legend>Card type</legend>  
  207.       <ol>  
  208.         <li>  
  209.           <input id="visa" name="cardtype" type="radio">  
  210.           <label for="visa">VISA</label>  
  211.         </li>  
  212.         <li>  
  213.           <input id="amex" name="cardtype" type="radio">  
  214.           <label for="amex">AmEx</label>  
  215.         </li>  
  216.         <li>  
  217.           <input id="mastercard" name="cardtype" type="radio">  
  218.           <label for="mastercard">Mastercard</label>  
  219.         </li>  
  220.       </ol>  
  221.       </fieldset>  
  222.     </li>  
  223.     <li>  
  224.       <label for="cardnumber">Card number</label>  
  225.       <input id="cardnumber" name="cardnumber" type="number" required="">  
  226.     </li>  
  227.     <li>  
  228.       <label for="secure">Security code</label>  
  229.       <input id="secure" name="secure" type="number" required="">  
  230.     </li>  
  231.     <li>  
  232.       <label for="namecard">Name on card</label>  
  233.       <input id="namecard" name="namecard" type="text" placeholder="Exact name as on the card" required="">  
  234.     </li>  
  235.   </ol>  
  236.   </fieldset>  
  237.   <fieldset>  
  238.   <button type="submit">Submit</button>  
  239.   </fieldset> 
Output:
output.jpg


Similar Articles