Unified Diff: pages/forms/basic.html
Issue 29510560:
Issue 4633 - Default form styles (Closed)
Base URL: https://hg.adblockplus.org/website-defaults
Patch Set: Separate forms into basic, advanced, and buttons
Created Aug. 10, 2017, 11:44 a.m.
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')
|
pages/forms/index.html » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
| Index: pages/forms/basic.html |
| =================================================================== |
| new file mode 100644 |
| --- /dev/null |
| +++ b/pages/forms/basic.html |
| @@ -0,0 +1,141 @@ |
| +title=Basic Form Fields |
| + |
| +<h1>Basic Form Fields</h1> |
| +<p>Default styles for native 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.
|
| + |
| +<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.
|
| + |
| +<nav> |
| + <ol> |
| + <li><a href="#basic-text">Basic text</a></li> |
| + <li><a href="#textareas">Textareas</a></li> |
| + <li><a href="#selects">Selects</a></li> |
| + <li><a href="#checkboxes">Checkboxes</a></li> |
| + <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.
|
| + </ol> |
| +</nav> |
| + |
| +<section id="basic-text"> |
| + <h2>Basic text</h2> |
| + <p> |
| + <label for="default-text">Default text</label> |
| + <input id="default-text" type="text" placeholder="Placeholder" /> |
| + </p> |
| + <p> |
| + <label for="invalid-text">Invalid text</label> |
| + <input id="invalid-text" type="text" placeholder="Placeholder" aria-invalid="true" /> |
| + </p> |
| + <p> |
| + <label for="disabled-text">Disabled text</label> |
| + <input id="disabled-text" type="text" placeholder="Placeholder" disabled /> |
| + </p> |
| +</section> |
| + |
| +<section id="textareas"> |
| + <h2>Textareas</h2> |
| + <p> |
| + <label for="default-textarea">Default textarea</label> |
| + <textarea id="default-textarea"></textarea> |
| + </p> |
| + <p> |
| + <label for="invalid-textarea">Invalid textarea</label> |
| + <textarea id="invalid-textarea" aria-invalid="true"></textarea> |
| + </p> |
| + <p > |
| + <label for="disabled-textarea">Disabled textarea</label> |
| + <textarea id="disabled-textarea" disabled></textarea> |
| + </p> |
| +</section> |
| + |
| +<section id="selects"> |
| + <h2>Selects</h2> |
| + <p> |
| + <label for="default-select">Default select</label> |
| + <select id="default-select"> |
| + <option selected>Default option</option> |
| + <optgroup label="Group 1"> |
| + <option>Option 1</option> |
| + <option>Option 2</option> |
| + </optgroup> |
| + <optgroup label="Group 2"> |
| + <option>Option 3</option> |
| + <option disabled>Option 4</option> |
| + </optgroup> |
| + </select> |
| + </p> |
| + <p> |
| + <label for="invalid-select">Invalid select</label> |
| + <select id="invalid-select" aria-invalid="true"> |
| + <option selected>Default option</option> |
| + <optgroup label="Group 1"> |
| + <option>Option 1</option> |
| + <option>Option 2</option> |
| + </optgroup> |
| + <optgroup label="Group 2"> |
| + <option>Option 3</option> |
| + <option disabled>Option 4</option> |
| + </optgroup> |
| + </select> |
| + </p> |
| + <p> |
| + <label for="disabled-select">Disabled select</label> |
| + <select id="disabled-select" disabled> |
| + <option selected>Default option</option> |
| + <optgroup label="Group 1"> |
| + <option>Option 1</option> |
| + <option>Option 2</option> |
| + </optgroup> |
| + <optgroup label="Group 2"> |
| + <option>Option 3</option> |
| + <option disabled>Option 4</option> |
| + </optgroup> |
| + </select> |
| + </p> |
| +</section> |
| + |
| +<section id="checkboxes"> |
| + <h2>Checkboxes</h2> |
| + <p> |
| + <label> |
| + <input type="checkbox"> |
| + Default checkbox |
| + </label> |
| + </p> |
| + <p> |
| + <label> |
| + <input type="checkbox" aria-invalid="true"> |
| + Invalid checkbox |
| + </label> |
| + </p> |
| + <p> |
| + <label> |
| + <input type="checkbox" disabled> |
| + Disabled checkbox |
| + </label> |
| + </p> |
| +</section> |
| + |
| +<section id="radios"> |
| + <h2>Radios</h2> |
| + <fieldset> |
| + <legend>Radio group label</legend> |
| + <p> |
| + <label> |
| + <input type="radio" name="radios" value="default"> |
| + Default radio |
| + </label> |
| + </p> |
| + <p> |
| + <label> |
| + <input type="radio" name="radios" value="invalid" aria-invalid="true"> |
| + Invalid radio |
| + </label> |
| + </p> |
| + <p> |
| + <label> |
| + <input type="radio" name="radios" value="disabled" disabled> |
| + Disabled radio |
| + </label> |
| + </p> |
| + </fieldset> |
| +</section> |
« pages/forms/advanced.html ('K')
|
« pages/forms/advanced.html ('k')
|
pages/forms/buttons.html » ('j')
|
pages/forms/index.html » ('J')
