forms.html 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. <!-- This Source Code Form is subject to the terms of the Mozilla Public
  2. - License, v. 2.0. If a copy of the MPL was not distributed with this
  3. - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  5. "http://www.w3.org/TR/html4/strict.dtd">
  6. <html lang="en">
  7. <head>
  8. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  9. <title>Blueprint Forms Tests</title>
  10. <!-- Framework CSS -->
  11. <link rel="stylesheet" href="screen.css" type="text/css" media="screen, projection">
  12. <link rel="stylesheet" href="print.css" type="text/css" media="print">
  13. <!--[if IE]><link rel="stylesheet" href="ie.css" type="text/css" media="screen, projection"><![endif]-->
  14. </head>
  15. <body>
  16. <div class="container showgrid">
  17. <h1>Forms</h1>
  18. <hr>
  19. <div class="span-12">
  20. <form id="dummy" action="" method="post">
  21. <fieldset>
  22. <legend>Simple sample form</legend>
  23. <p><label for="dummy0">Text input (title)</label><br>
  24. <input type="text" class="title" name="dummy0" id="dummy0" value="Field with class .title"></p>
  25. <p><label for="dummy1">Another field</label><br>
  26. <input type="text" class="text" id="dummy1" name="dummy1" value="Field with class .text"></p>
  27. <p><label for="dummy2">Textarea</label><br>
  28. <textarea name="dummy2" id="dummy2" rows="5" cols="20"></textarea></p>
  29. <p><input type="submit" value="Submit">
  30. <input type="reset" value="Reset"></p>
  31. </fieldset>
  32. </form>
  33. </div>
  34. <div class="span-12 last">
  35. <div class="error">
  36. This is a &lt;div&gt; with the class <strong>.error</strong>. <a href="#">Link</a>.
  37. </div>
  38. <div class="notice">
  39. This is a &lt;div&gt; with the class <strong>.notice</strong>. <a href="#">Link</a>.
  40. </div>
  41. <div class="success">
  42. This is a &lt;div&gt; with the class <strong>.success</strong>. <a href="#">Link</a>.
  43. </div>
  44. <fieldset>
  45. <legend>Select, checkboxes, lists</legend>
  46. <p><label for="dummy3">Select field</label><br>
  47. <select id="dummy3" name="dummy3">
  48. <option value="1">Ottawa</option>
  49. <option value="2">Calgary</option>
  50. <option value="3">Moosejaw</option>
  51. </select></p>
  52. <p><label for="dummy4">Select with groups</label><br>
  53. <select id="dummy4" name="dummy4">
  54. <option>Favorite pet</option>
  55. <optgroup label="mammals">
  56. <option>dog</option>
  57. <option>cat</option>
  58. <option>rabbit</option>
  59. <option>horse</option>
  60. </optgroup>
  61. <optgroup label="reptiles">
  62. <option>iguana</option>
  63. <option>snake</option>
  64. </optgroup>
  65. </select></p>
  66. <p><label>Radio buttons</label><br>
  67. <input type="radio" name="example"> Radio one<br>
  68. <input type="radio" name="example"> Radio two<br>
  69. <input type="radio" name="example"> Radio three<br></p>
  70. <p><label>Checkboxes</label><br>
  71. <input type="checkbox"> Check one<br>
  72. <input type="checkbox"> Check two<br>
  73. <input type="checkbox"> Check three<br></p>
  74. </fieldset>
  75. </div>
  76. <hr>
  77. <p><a href="http://validator.w3.org/check?uri=referer">
  78. <img src="valid.png" alt="Valid HTML 4.01 Strict" height="31" width="88" class="top"></a></p>
  79. </div>
  80. </body>
  81. </html>