LEFT | RIGHT |
(no file at all) | |
| 1 title=Basic Form Fields |
| 2 |
| 3 <h1>Basic Form Fields</h1> |
| 4 <p>Default styles for basic form elements.</p> |
| 5 |
| 6 <nav> |
| 7 <ol> |
| 8 <li><a href="#basic-text">Basic text</a></li> |
| 9 <li><a href="#textareas">Textareas</a></li> |
| 10 <li><a href="#selects">Selects</a></li> |
| 11 <li><a href="#checkboxes">Checkboxes</a></li> |
| 12 <li><a href="#radios">Radios</a></li> |
| 13 </ol> |
| 14 </nav> |
| 15 |
| 16 <section id="basic-text"> |
| 17 <h2>Basic text</h2> |
| 18 <p> |
| 19 <label for="default-text">Default text</label> |
| 20 <input id="default-text" type="text" placeholder="Placeholder" /> |
| 21 </p> |
| 22 <p> |
| 23 <label for="invalid-text">Invalid text</label> |
| 24 <input id="invalid-text" type="text" placeholder="Placeholder" aria-invalid=
"true" /> |
| 25 </p> |
| 26 <p> |
| 27 <label for="disabled-text">Disabled text</label> |
| 28 <input id="disabled-text" type="text" placeholder="Placeholder" disabled /> |
| 29 </p> |
| 30 </section> |
| 31 |
| 32 <section id="textareas"> |
| 33 <h2>Textareas</h2> |
| 34 <p> |
| 35 <label for="default-textarea">Default textarea</label> |
| 36 <textarea id="default-textarea"></textarea> |
| 37 </p> |
| 38 <p> |
| 39 <label for="invalid-textarea">Invalid textarea</label> |
| 40 <textarea id="invalid-textarea" aria-invalid="true"></textarea> |
| 41 </p> |
| 42 <p> |
| 43 <label for="disabled-textarea">Disabled textarea</label> |
| 44 <textarea id="disabled-textarea" disabled></textarea> |
| 45 </p> |
| 46 </section> |
| 47 |
| 48 <section id="selects"> |
| 49 <h2>Selects</h2> |
| 50 <p> |
| 51 <label for="default-select">Default select</label> |
| 52 <select id="default-select"> |
| 53 <option selected>Default option</option> |
| 54 <optgroup label="Group 1"> |
| 55 <option>Option 1</option> |
| 56 <option>Option 2</option> |
| 57 </optgroup> |
| 58 <optgroup label="Group 2"> |
| 59 <option>Option 3</option> |
| 60 <option disabled>Option 4</option> |
| 61 </optgroup> |
| 62 </select> |
| 63 </p> |
| 64 <p> |
| 65 <label for="invalid-select">Invalid select</label> |
| 66 <select id="invalid-select" aria-invalid="true"> |
| 67 <option selected>Default option</option> |
| 68 <optgroup label="Group 1"> |
| 69 <option>Option 1</option> |
| 70 <option>Option 2</option> |
| 71 </optgroup> |
| 72 <optgroup label="Group 2"> |
| 73 <option>Option 3</option> |
| 74 <option disabled>Option 4</option> |
| 75 </optgroup> |
| 76 </select> |
| 77 </p> |
| 78 <p> |
| 79 <label for="disabled-select">Disabled select</label> |
| 80 <select id="disabled-select" disabled> |
| 81 <option selected>Default option</option> |
| 82 <optgroup label="Group 1"> |
| 83 <option>Option 1</option> |
| 84 <option>Option 2</option> |
| 85 </optgroup> |
| 86 <optgroup label="Group 2"> |
| 87 <option>Option 3</option> |
| 88 <option disabled>Option 4</option> |
| 89 </optgroup> |
| 90 </select> |
| 91 </p> |
| 92 </section> |
| 93 |
| 94 <section id="checkboxes"> |
| 95 <h2>Checkboxes</h2> |
| 96 <p> |
| 97 <label> |
| 98 <input type="checkbox"> |
| 99 Default checkbox |
| 100 </label> |
| 101 </p> |
| 102 <p> |
| 103 <label> |
| 104 <input type="checkbox" aria-invalid="true"> |
| 105 Invalid checkbox |
| 106 </label> |
| 107 </p> |
| 108 <p> |
| 109 <label> |
| 110 <input type="checkbox" disabled> |
| 111 Disabled checkbox |
| 112 </label> |
| 113 </p> |
| 114 </section> |
| 115 |
| 116 <section id="radios"> |
| 117 <h2>Radios</h2> |
| 118 <fieldset> |
| 119 <legend>Radio group label</legend> |
| 120 <p> |
| 121 <label> |
| 122 <input type="radio" name="radios" value="default"> |
| 123 Default radio |
| 124 </label> |
| 125 </p> |
| 126 <p> |
| 127 <label> |
| 128 <input type="radio" name="radios" value="invalid" aria-invalid="true"> |
| 129 Invalid radio |
| 130 </label> |
| 131 </p> |
| 132 <p> |
| 133 <label> |
| 134 <input type="radio" name="radios" value="disabled" disabled> |
| 135 Disabled radio |
| 136 </label> |
| 137 </p> |
| 138 </fieldset> |
| 139 </section> |
LEFT | RIGHT |