Unified 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.
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')
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,139 @@ |
| +title=Basic Form Fields |
| + |
| +<h1>Basic Form Fields</h1> |
| +<p>Default styles for basic form elements.</p> |
| + |
| +<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> |
| + </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> |
|
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
|
| + <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')
|
scss/forms/_advanced.scss » ('J')
