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

Unified Diff: pages/forms/basic.html

Issue 29510560: Issue 4633 - Default form styles (Closed) Base URL: https://hg.adblockplus.org/website-defaults
Patch Set: Addressed NITs Created Aug. 11, 2017, 3:23 p.m.
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View side-by-side diff with in-line comments
Download patch
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>
+ <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>

Powered by Google App Engine
This is Rietveld