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>
  7. </head>
  8. <body>
  9. Create Text here
  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>
  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>
  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. }
  7. body {
  8. background: #ffffff;
  9. color: #111111;
  10. font-family: Georgia, "Times New Roman", Times, serif;
  11. padding: 20px;
  12. }
  14. h1 {
  15. font-size: 28px;
  16. margin-bottom: 20px;
  17. }
  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. }
  30. form#payment fieldset {
  31. border: none;
  32. margin-bottom: 10px;
  33. }
  35. form#payment fieldset:last-of-type {
  36. margin-bottom: 0;
  37. }
  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. }
  47. form#payment > fieldset > legend:before {
  48. content: "Step " counter(fieldsets) ": ";
  49. counter-increment: fieldsets;
  50. }
  52. form#payment fieldset fieldset legend {
  53. color: #111111;
  54. font-size: 13px;
  55. font-weight: normal;
  56. padding-bottom: 0;
  57. }
  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. }
  76. form#payment ol ol li {
  77. background: none;
  78. border: none;
  79. float: left;
  80. }
  82. form#payment label {
  83. float: left;
  84. font-size: 13px;
  85. width: 110px;
  86. }
  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. }
  95. form#payment label[for=visa] {
  96. background-image: url(visa.gif);
  97. }
  99. form#payment label[for=amex] {
  100. background-image: url(amex.gif);
  101. }
  103. form#payment label[for=mastercard] {
  104. background-image: url(mastercard.gif);
  105. }
  107. form#payment fieldset fieldset label:hover {
  108. cursor: pointer;
  109. }
  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. }
  124. form#payment input:not([type=submit]):focus,form#payment textarea:focus {
  125. background: #eaeaea;
  126. }
  128. form#payment input[type=radio] {
  129. float: left;
  130. margin-right: 5px;
  131. }
  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. }
  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. }
  12. body {
  13. background: #ffffff;
  14. color: #111111;
  15. font-family: Georgia, "Times New Roman", Times, serif;
  16. padding: 20px;
  17. }
  19. h1 {
  20. font-size: 28px;
  21. margin-bottom: 20px;
  22. }
  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. }
  35. form#payment fieldset {
  36. border: none;
  37. margin-bottom: 10px;
  38. }
  40. form#payment fieldset:last-of-type {
  41. margin-bottom: 0;
  42. }
  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. }
  52. form#payment > fieldset > legend:before {
  53. content: "Step " counter(fieldsets) ": ";
  54. counter-increment: fieldsets;
  55. }
  57. form#payment fieldset fieldset legend {
  58. color: #111111;
  59. font-size: 13px;
  60. font-weight: normal;
  61. padding-bottom: 0;
  62. }
  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. }
  81. form#payment ol ol li {
  82. background: none;
  83. border: none;
  84. float: left;
  85. }
  87. form#payment label {
  88. float: left;
  89. font-size: 13px;
  90. width: 110px;
  91. }
  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. }
  100. form#payment label[for=visa] {
  101. background-image: url(visa.gif);
  102. }
  104. form#payment label[for=amex] {
  105. background-image: url(amex.gif);
  106. }
  108. form#payment label[for=mastercard] {
  109. background-image: url(mastercard.gif);
  110. }
  112. form#payment fieldset fieldset label:hover {
  113. cursor: pointer;
  114. }
  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. }
  130. form#payment input:not([type=submit]):focus,
  131. form#payment textarea:focus {
  132. background: #eaeaea;
  133. }
  135. form#payment input[type=radio] {
  136. float: left;
  137. margin-right: 5px;
  138. }
  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. }
  157. form#payment button:hover {
  158. background: #1e2506;
  159. cursor: pointer;
  160. }
  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>
  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>
  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