Issue 4633 - Default form styles

pages/forms.html

Index: pages/forms.html
===================================================================
new file mode 100644
--- /dev/null
+++ b/pages/forms.html
@@ -0,0 +1,183 @@
+title=Forms
+
+<h1>Forms</h1>
+<p>Default styles for native form elements.</p>
+
+<nav>
+  <ul>
+    <li><a href="#basic-text">Basic text</a></li>
+    <li><a href="#advanced-text">Advanced text</a></li>
+    <li><a href="#media">Media</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>
+    <li><a href="#buttons">Buttons</a></li>
+  </ul>
+</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="advanced-text">
+    <h2>Advanced text</h2>

[juliandoucette, 2017/08/09 13:23:57]

Perhaps we should separate (at least):

- basic form fields
- advanced form fields
- buttons

Because:

- many of our pages want button styles but not forms
- most of our forms are not advanced

If we separate them then we can exclude unnecessary styles from our stylesheets.

[ire, 2017/08/09 17:04:03]

Do you mean separate the styles into separate SCSS files? Because they are
already separate here in the markup.

[juliandoucette, 2017/08/09 20:00:11]

Yes. +Separate demo pages. Sorry for the confusion.

[ire, 2017/08/10 11:46:40]

Thanks. Done.

+    <p><input type="search" placeholder="Search terms" /></p>
+    <p><input type="tel" placeholder="+55-55-555-5555" /></p>
+    <p><input type="url" placeholder="example.com" /></p>
+    <p><input type="email" placeholder="user@example.com" /></p>
+    <p><input type="password" placeholder="Password" /></p>
+    <p><input type="date" placeholder="Date" /></p>
+    <p><input type="time" placeholder="Time" /></p>
+    <p><input type="datetime-local" placeholder="Datetime Local" /></p>
+    <p><input type="number" placeholder="5" /></p>
+</section>
+
+<section id="advanced-text">
+    <h2>Media</h2>
+    <p>
+      <label for="file">File</label>
+      <input id="file" type="file" />
+    </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>
+
+<section id="buttons">
+    <h2>Buttons</h2>
+    <p>
+      <button type="button">Default button</button>
+      <input type="button" value="Default input" />
+    </p>
+    <p>
+      <button type="reset">Reset button</button>
+      <input type="reset" value="Reset input" />
+    </p>
+    <p>
+      <button type="submit">Submit button</button>
+      <input type="submit" value="Submit input" />
+    </p>
+    <p>
+      <button type="button" disabled>Disabled default button</button>
+      <input type="button" disabled value="Disabled default input" />
+    </p>
+</section>