forms.html (4298B)
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 5 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 6 7 <html lang="en"> 8 <head> 9 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 10 <title>Blueprint Forms Tests</title> 11 12 <!-- Framework CSS --> 13 <link 14 rel="stylesheet" 15 href="screen.css" 16 type="text/css" 17 media="screen, projection" 18 /> 19 <link rel="stylesheet" href="print.css" type="text/css" media="print" /> 20 <!--[if IE 21 ]><link 22 rel="stylesheet" 23 href="ie.css" 24 type="text/css" 25 media="screen, projection" 26 /><![endif]--> 27 </head> 28 <body> 29 <div class="container showgrid"> 30 <h1>Forms</h1> 31 <hr /> 32 33 <div class="span-12"> 34 <form id="dummy" action="" method="post"> 35 <fieldset> 36 <legend>Simple sample form</legend> 37 38 <p> 39 <label for="dummy0">Text input (title)</label><br /> 40 <input 41 type="text" 42 class="title" 43 name="dummy0" 44 id="dummy0" 45 value="Field with class .title" 46 /> 47 </p> 48 49 <p> 50 <label for="dummy1">Another field</label><br /> 51 <input 52 type="text" 53 class="text" 54 id="dummy1" 55 name="dummy1" 56 value="Field with class .text" 57 /> 58 </p> 59 60 <p> 61 <label for="dummy2">Textarea</label><br /> 62 <textarea name="dummy2" id="dummy2" rows="5" cols="20"></textarea> 63 </p> 64 65 <p> 66 <input type="submit" value="Submit" /> 67 <input type="reset" value="Reset" /> 68 </p> 69 </fieldset> 70 </form> 71 </div> 72 <div class="span-12 last"> 73 <div class="error"> 74 This is a <div> with the class <strong>.error</strong>. 75 <a href="#">Link</a>. 76 </div> 77 <div class="notice"> 78 This is a <div> with the class <strong>.notice</strong>. 79 <a href="#">Link</a>. 80 </div> 81 <div class="success"> 82 This is a <div> with the class <strong>.success</strong>. 83 <a href="#">Link</a>. 84 </div> 85 86 <fieldset> 87 <legend>Select, checkboxes, lists</legend> 88 89 <p> 90 <label for="dummy3">Select field</label><br /> 91 <select id="dummy3" name="dummy3"> 92 <option value="1">Ottawa</option> 93 <option value="2">Calgary</option> 94 <option value="3">Moosejaw</option> 95 </select> 96 </p> 97 98 <p> 99 <label for="dummy4">Select with groups</label><br /> 100 <select id="dummy4" name="dummy4"> 101 <option>Favorite pet</option> 102 <optgroup label="mammals"> 103 <option>dog</option> 104 <option>cat</option> 105 <option>rabbit</option> 106 <option>horse</option> 107 </optgroup> 108 <optgroup label="reptiles"> 109 <option>iguana</option> 110 <option>snake</option> 111 </optgroup> 112 </select> 113 </p> 114 115 <p> 116 <label>Radio buttons</label><br /> 117 <input type="radio" name="example" /> Radio one<br /> 118 <input type="radio" name="example" /> Radio two<br /> 119 <input type="radio" name="example" /> Radio three<br /> 120 </p> 121 122 <p> 123 <label>Checkboxes</label><br /> 124 <input type="checkbox" /> Check one<br /> 125 <input type="checkbox" /> Check two<br /> 126 <input type="checkbox" /> Check three<br /> 127 </p> 128 </fieldset> 129 </div> 130 <hr /> 131 132 <p> 133 <a href="http://validator.w3.org/check?uri=referer"> 134 <img 135 src="valid.png" 136 alt="Valid HTML 4.01 Strict" 137 height="31" 138 width="88" 139 class="top" 140 /></a> 141 </p> 142 </div> 143 </body> 144 </html>