Side by Side Diff: pages/forms/basic.html
Issue 29510560:
Issue 4633 - Default form styles (Closed)
Base URL: https://hg.adblockplus.org/website-defaults
Patch Set: Rebase on website-defaults with reset and namespaced content
Created Sept. 13, 2017, 7:39 a.m.
| Left: | ||
| Right: |
Use n/p to move between diff chunks;
N/P to move between comments.
« pages/forms/advanced.html ('K')
|
« pages/forms/advanced.html ('k')
|
pages/forms/buttons.html » ('j')
|
scss/forms/_advanced.scss » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
| OLD | NEW |
|---|---|
| (Empty) | |
| 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> | |
|
juliandoucette
2017/09/18 13:13:21
NIT: I would exclude the invalid state from this c
ire
2017/09/19 08:06:48
I think I would rather keep it, since we will styl
| |
| 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> | |
| OLD | NEW |
« pages/forms/advanced.html ('K')
|
« pages/forms/advanced.html ('k')
|
pages/forms/buttons.html » ('j')
|
scss/forms/_advanced.scss » ('J')
