Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code
Issues
All Issues

Delta Between Two Patch Sets: pages/forms/basic.html

Issue 29510560: Issue 4633 - Default form styles (Closed) Base URL: https://hg.adblockplus.org/website-defaults
Left Patch Set: Separate forms into basic, advanced, and buttons Created Aug. 10, 2017, 11:44 a.m.
Right Patch Set: Addressed NITs Created Sept. 19, 2017, 8:07 a.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
Left: Side by side diff | Download
Right: Side by side diff | Download
« no previous file with change/comment | « pages/forms/advanced.html ('k') | pages/forms/buttons.html » ('j') | no next file with change/comment »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
LEFTRIGHT
1 title=Basic Form Fields 1 title=Basic Form Fields
2 2
3 <h1>Basic Form Fields</h1> 3 <h1>Basic Form Fields</h1>
4 <p>Default styles for native form elements.</p> 4 <p>Default styles for basic form elements.</p>
juliandoucette 2017/08/10 17:10:07 Note: I think this paragraph is technically a subt
ire 2017/08/11 15:25:15 Yes.
5
6 <p><a href="forms">Back to Forms</a></p>
juliandoucette 2017/08/10 17:10:06 NIT: We don't have back buttons on the other demo
ire 2017/08/11 15:25:15 Ack. Done.
7 5
8 <nav> 6 <nav>
9 <ol> 7 <ol>
10 <li><a href="#basic-text">Basic text</a></li> 8 <li><a href="#basic-text">Basic text</a></li>
11 <li><a href="#textareas">Textareas</a></li> 9 <li><a href="#textareas">Textareas</a></li>
12 <li><a href="#selects">Selects</a></li> 10 <li><a href="#selects">Selects</a></li>
13 <li><a href="#checkboxes">Checkboxes</a></li> 11 <li><a href="#checkboxes">Checkboxes</a></li>
14 <li><a href="#radios">Radios</a></li> 12 <li><a href="#radios">Radios</a></li>
ire 2017/08/10 11:46:40 I'm undecided whether all these qualify as "basic
juliandoucette 2017/08/10 17:10:07 I think they do. Are there any in particular you a
ire 2017/08/11 15:25:15 Okay. I was thinking, Selects, Radios, Checkboxes.
15 </ol> 13 </ol>
16 </nav> 14 </nav>
17 15
18 <section id="basic-text"> 16 <section id="basic-text">
19 <h2>Basic text</h2> 17 <h2>Basic text</h2>
20 <p> 18 <p>
21 <label for="default-text">Default text</label> 19 <label for="default-text">Default text</label>
22 <input id="default-text" type="text" placeholder="Placeholder" /> 20 <input id="default-text" type="text" placeholder="Placeholder" />
23 </p> 21 </p>
24 <p> 22 <p>
25 <label for="invalid-text">Invalid text</label> 23 <label for="invalid-text">Invalid text</label>
26 <input id="invalid-text" type="text" placeholder="Placeholder" aria-invali d="true" /> 24 <input id="invalid-text" type="text" placeholder="Placeholder" aria-invalid= "true" />
27 </p> 25 </p>
28 <p> 26 <p>
29 <label for="disabled-text">Disabled text</label> 27 <label for="disabled-text">Disabled text</label>
30 <input id="disabled-text" type="text" placeholder="Placeholder" disabled / > 28 <input id="disabled-text" type="text" placeholder="Placeholder" disabled />
31 </p> 29 </p>
32 </section> 30 </section>
33 31
34 <section id="textareas"> 32 <section id="textareas">
35 <h2>Textareas</h2> 33 <h2>Textareas</h2>
36 <p> 34 <p>
37 <label for="default-textarea">Default textarea</label> 35 <label for="default-textarea">Default textarea</label>
38 <textarea id="default-textarea"></textarea> 36 <textarea id="default-textarea"></textarea>
39 </p> 37 </p>
40 <p> 38 <p>
41 <label for="invalid-textarea">Invalid textarea</label> 39 <label for="invalid-textarea">Invalid textarea</label>
42 <textarea id="invalid-textarea" aria-invalid="true"></textarea> 40 <textarea id="invalid-textarea" aria-invalid="true"></textarea>
43 </p> 41 </p>
44 <p > 42 <p>
45 <label for="disabled-textarea">Disabled textarea</label> 43 <label for="disabled-textarea">Disabled textarea</label>
46 <textarea id="disabled-textarea" disabled></textarea> 44 <textarea id="disabled-textarea" disabled></textarea>
47 </p> 45 </p>
48 </section> 46 </section>
49 47
50 <section id="selects"> 48 <section id="selects">
51 <h2>Selects</h2> 49 <h2>Selects</h2>
52 <p> 50 <p>
53 <label for="default-select">Default select</label> 51 <label for="default-select">Default select</label>
54 <select id="default-select"> 52 <select id="default-select">
55 <option selected>Default option</option> 53 <option selected>Default option</option>
56 <optgroup label="Group 1"> 54 <optgroup label="Group 1">
57 <option>Option 1</option> 55 <option>Option 1</option>
58 <option>Option 2</option> 56 <option>Option 2</option>
59 </optgroup> 57 </optgroup>
60 <optgroup label="Group 2"> 58 <optgroup label="Group 2">
61 <option>Option 3</option> 59 <option>Option 3</option>
62 <option disabled>Option 4</option> 60 <option disabled>Option 4</option>
63 </optgroup> 61 </optgroup>
64 </select> 62 </select>
65 </p> 63 </p>
66 <p> 64 <p>
67 <label for="invalid-select">Invalid select</label> 65 <label for="invalid-select">Invalid select</label>
68 <select id="invalid-select" aria-invalid="true"> 66 <select id="invalid-select" aria-invalid="true">
69 <option selected>Default option</option> 67 <option selected>Default option</option>
70 <optgroup label="Group 1"> 68 <optgroup label="Group 1">
71 <option>Option 1</option> 69 <option>Option 1</option>
72 <option>Option 2</option> 70 <option>Option 2</option>
73 </optgroup> 71 </optgroup>
74 <optgroup label="Group 2"> 72 <optgroup label="Group 2">
75 <option>Option 3</option> 73 <option>Option 3</option>
76 <option disabled>Option 4</option> 74 <option disabled>Option 4</option>
77 </optgroup> 75 </optgroup>
78 </select> 76 </select>
79 </p> 77 </p>
80 <p> 78 <p>
81 <label for="disabled-select">Disabled select</label> 79 <label for="disabled-select">Disabled select</label>
82 <select id="disabled-select" disabled> 80 <select id="disabled-select" disabled>
83 <option selected>Default option</option> 81 <option selected>Default option</option>
84 <optgroup label="Group 1"> 82 <optgroup label="Group 1">
85 <option>Option 1</option> 83 <option>Option 1</option>
86 <option>Option 2</option> 84 <option>Option 2</option>
87 </optgroup> 85 </optgroup>
88 <optgroup label="Group 2"> 86 <optgroup label="Group 2">
89 <option>Option 3</option> 87 <option>Option 3</option>
90 <option disabled>Option 4</option> 88 <option disabled>Option 4</option>
91 </optgroup> 89 </optgroup>
92 </select> 90 </select>
93 </p> 91 </p>
94 </section> 92 </section>
95 93
96 <section id="checkboxes"> 94 <section id="checkboxes">
97 <h2>Checkboxes</h2> 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>
98 <p> 120 <p>
99 <label> 121 <label>
100 <input type="checkbox"> 122 <input type="radio" name="radios" value="default">
101 Default checkbox 123 Default radio
102 </label> 124 </label>
103 </p> 125 </p>
104 <p> 126 <p>
105 <label> 127 <label>
106 <input type="checkbox" aria-invalid="true"> 128 <input type="radio" name="radios" value="invalid" aria-invalid="true">
107 Invalid checkbox 129 Invalid radio
108 </label> 130 </label>
109 </p> 131 </p>
110 <p> 132 <p>
111 <label> 133 <label>
112 <input type="checkbox" disabled> 134 <input type="radio" name="radios" value="disabled" disabled>
113 Disabled checkbox 135 Disabled radio
114 </label> 136 </label>
115 </p> 137 </p>
116 </section> 138 </fieldset>
117
118 <section id="radios">
119 <h2>Radios</h2>
120 <fieldset>
121 <legend>Radio group label</legend>
122 <p>
123 <label>
124 <input type="radio" name="radios" value="default">
125 Default radio
126 </label>
127 </p>
128 <p>
129 <label>
130 <input type="radio" name="radios" value="invalid" aria-invalid="true">
131 Invalid radio
132 </label>
133 </p>
134 <p>
135 <label>
136 <input type="radio" name="radios" value="disabled" disabled>
137 Disabled radio
138 </label>
139 </p>
140 </fieldset>
141 </section> 139 </section>
LEFTRIGHT
« pages/forms/advanced.html ('k') | pages/forms/buttons.html » ('j') | Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Toggle Comments ('s')

Powered by Google App Engine
This is Rietveld