Issue 4633 - Default form styles

pages/forms/basic.html

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>