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

Side by Side Diff: pages/forms.html

Issue 29510560: Issue 4633 - Default form styles (Closed) Base URL: https://hg.adblockplus.org/website-defaults
Patch Set: Created Aug. 9, 2017, 9:17 a.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
« no previous file with comments | « no previous file | pages/index.html » ('j') | scss/_forms.scss » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 title=Forms
2
3 <h1>Forms</h1>
4 <p>Default styles for native form elements.</p>
5
6 <nav>
7 <ul>
8 <li><a href="#basic-text">Basic text</a></li>
9 <li><a href="#advanced-text">Advanced text</a></li>
10 <li><a href="#media">Media</a></li>
11 <li><a href="#textareas">Textareas</a></li>
12 <li><a href="#selects">Selects</a></li>
13 <li><a href="#checkboxes">Checkboxes</a></li>
14 <li><a href="#radios">Radios</a></li>
15 <li><a href="#buttons">Buttons</a></li>
16 </ul>
17 </nav>
18
19 <section id="basic-text">
20 <h2>Basic text</h2>
21 <p>
22 <label for="default-text">Default text</label>
23 <input id="default-text" type="text" placeholder="Placeholder" />
24 </p>
25 <p>
26 <label for="invalid-text">Invalid text</label>
27 <input id="invalid-text" type="text" placeholder="Placeholder" aria-invali d="true" />
28 </p>
29 <p>
30 <label for="disabled-text">Disabled text</label>
31 <input id="disabled-text" type="text" placeholder="Placeholder" disabled / >
32 </p>
33 </section>
34
35 <section id="advanced-text">
36 <h2>Advanced text</h2>
juliandoucette 2017/08/09 13:23:57 Perhaps we should separate (at least): - basic fo
ire 2017/08/09 17:04:03 Do you mean separate the styles into separate SCSS
juliandoucette 2017/08/09 20:00:11 Yes. +Separate demo pages. Sorry for the confusion
ire 2017/08/10 11:46:40 Thanks. Done.
37 <p><input type="search" placeholder="Search terms" /></p>
38 <p><input type="tel" placeholder="+55-55-555-5555" /></p>
39 <p><input type="url" placeholder="example.com" /></p>
40 <p><input type="email" placeholder="user@example.com" /></p>
41 <p><input type="password" placeholder="Password" /></p>
42 <p><input type="date" placeholder="Date" /></p>
43 <p><input type="time" placeholder="Time" /></p>
44 <p><input type="datetime-local" placeholder="Datetime Local" /></p>
45 <p><input type="number" placeholder="5" /></p>
46 </section>
47
48 <section id="advanced-text">
49 <h2>Media</h2>
50 <p>
51 <label for="file">File</label>
52 <input id="file" type="file" />
53 </p>
54 </section>
55
56 <section id="textareas">
57 <h2>Textareas</h2>
58 <p>
59 <label for="default-textarea">Default textarea</label>
60 <textarea id="default-textarea"></textarea>
61 </p>
62 <p>
63 <label for="invalid-textarea">Invalid textarea</label>
64 <textarea id="invalid-textarea" aria-invalid="true"></textarea>
65 </p>
66 <p >
67 <label for="disabled-textarea">Disabled textarea</label>
68 <textarea id="disabled-textarea" disabled></textarea>
69 </p>
70 </section>
71
72 <section id="selects">
73 <h2>Selects</h2>
74 <p>
75 <label for="default-select">Default select</label>
76 <select id="default-select">
77 <option selected>Default option</option>
78 <optgroup label="Group 1">
79 <option>Option 1</option>
80 <option>Option 2</option>
81 </optgroup>
82 <optgroup label="Group 2">
83 <option>Option 3</option>
84 <option disabled>Option 4</option>
85 </optgroup>
86 </select>
87 </p>
88 <p>
89 <label for="invalid-select">Invalid select</label>
90 <select id="invalid-select" aria-invalid="true">
91 <option selected>Default option</option>
92 <optgroup label="Group 1">
93 <option>Option 1</option>
94 <option>Option 2</option>
95 </optgroup>
96 <optgroup label="Group 2">
97 <option>Option 3</option>
98 <option disabled>Option 4</option>
99 </optgroup>
100 </select>
101 </p>
102 <p>
103 <label for="disabled-select">Disabled select</label>
104 <select id="disabled-select" disabled>
105 <option selected>Default option</option>
106 <optgroup label="Group 1">
107 <option>Option 1</option>
108 <option>Option 2</option>
109 </optgroup>
110 <optgroup label="Group 2">
111 <option>Option 3</option>
112 <option disabled>Option 4</option>
113 </optgroup>
114 </select>
115 </p>
116 </section>
117
118 <section id="checkboxes">
119 <h2>Checkboxes</h2>
120 <p>
121 <label>
122 <input type="checkbox">
123 Default checkbox
124 </label>
125 </p>
126 <p>
127 <label>
128 <input type="checkbox" aria-invalid="true">
129 Invalid checkbox
130 </label>
131 </p>
132 <p>
133 <label>
134 <input type="checkbox" disabled>
135 Disabled checkbox
136 </label>
137 </p>
138 </section>
139
140 <section id="radios">
141 <h2>Radios</h2>
142 <fieldset>
143 <legend>Radio group label</legend>
144 <p>
145 <label>
146 <input type="radio" name="radios" value="default">
147 Default radio
148 </label>
149 </p>
150 <p>
151 <label>
152 <input type="radio" name="radios" value="invalid" aria-invalid="true">
153 Invalid radio
154 </label>
155 </p>
156 <p>
157 <label>
158 <input type="radio" name="radios" value="disabled" disabled>
159 Disabled radio
160 </label>
161 </p>
162 </fieldset>
163 </section>
164
165 <section id="buttons">
166 <h2>Buttons</h2>
167 <p>
168 <button type="button">Default button</button>
169 <input type="button" value="Default input" />
170 </p>
171 <p>
172 <button type="reset">Reset button</button>
173 <input type="reset" value="Reset input" />
174 </p>
175 <p>
176 <button type="submit">Submit button</button>
177 <input type="submit" value="Submit input" />
178 </p>
179 <p>
180 <button type="button" disabled>Disabled default button</button>
181 <input type="button" disabled value="Disabled default input" />
182 </p>
183 </section>
OLDNEW
« no previous file with comments | « no previous file | pages/index.html » ('j') | scss/_forms.scss » ('J')

Powered by Google App Engine
This is Rietveld