wet-366 Create Working Examples for Utilities/Helpers: Forms (GCWeb)

wet-boew · Aug 24, 2023 · 99fabde · 99fabde
1 parent 25ad5e5
commit 99fabde
Show file tree

Hide file tree

Showing 3 changed files with 404 additions and 0 deletions.
diff --git a/common/utilities/helpers/forms.html b/common/utilities/helpers/forms.html
@@ -0,0 +1,330 @@
+---
+{
+	"title": "Forms - Utilities/Helpers",
+	"language": "en",
+	"altLangPage": "formulaires.html",
+	"breadcrumbs": [
+		{ "title": "GCWeb home", "link": "https://wet-boew.github.io/GCWeb/index-en.html" }
+	],
+	"dateModified": "2023-08-20"
+}
+---
+<div class="wb-prettify all-pre hide"></div>
+
+<div class="alert alert-warning">
+<p>The purpose of this page is to test all native forms related elements, if they are aligned with our design and are compliant to our accessibility guideline when used as is without any special customization. The following include all form elements in the HTML5 specification and a few examples was inspired by the <a href="https://html.spec.whatwg.org/multipage/forms.html#forms">WHATWG section 4.10</a> as February 2023. This page may not contain all the possible forms element combination.</p>
+</div>
+
+<h2>The <code>form</code> element</h2>
+<form></form>
+<pre><code>&lt;form>&lt;/form></code></pre>
+
+<h2 id="form-controls">Form controls</h2>
+
+<p>Textual form controls—like <code class="prettyprint prettyprinted">&lt;input&gt;</code>s, <code class="prettyprint prettyprinted">&lt;select&gt;</code>s, and <code class="prettyprint prettyprinted">&lt;textarea&gt;</code>s—are styled with the <code class="prettyprint prettyprinted">.form-control</code> class. Included are styles for general appearance, focus state, sizing, and more.</p>
+
+<p>Be sure to explore our <a href="#custom-forms">custom forms</a> to further style <code class="prettyprint prettyprinted">&lt;select&gt;</code>s.</p>
+
+<form>
+	<div class="form-group">
+	<label for="exampleFormControlInput1">Email address</label>
+		<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]" />
+	</div>
+  <div class="form-group">
+    <label for="exampleFormControlSelect1">Example select</label>
+    <select class="form-control" id="exampleFormControlSelect1">
+      <option>1</option>
+      <option>2</option>
+      <option>3</option>
+      <option>4</option>
+      <option>5</option>
+    </select>
+  </div>
+  <div class="form-group">
+    <label for="exampleFormControlSelect2">Example multiple select</label>
+    <select multiple="" class="form-control" id="exampleFormControlSelect2">
+      <option>1</option>
+      <option>2</option>
+      <option>3</option>
+      <option>4</option>
+      <option>5</option>
+    </select>
+  </div>
+  <div class="form-group">
+    <label for="exampleFormControlTextarea1">Example textarea</label>
+    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
+  </div>
+</form>
+
+<div class="prettyprint prettyprinted"><pre><code class="prettyprint prettyprinted" data-lang="html">&lt;form&gt;
+  &lt;div class="form-group"&gt;
+    &lt;label for="exampleFormControlInput1"&gt;Email address&lt;/label&gt;
+    &lt;input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]" /&gt;
+  &lt;/div&gt;
+  &lt;div class="form-group"&gt;
+    &lt;label for="exampleFormControlSelect1"&gt;Example select&lt;/label&gt;
+    &lt;select class="form-control" id="exampleFormControlSelect1"&gt;
+      &lt;option&gt;1&lt;/option&gt;
+      &lt;option&gt;2&lt;/option&gt;
+      &lt;option&gt;3&lt;/option&gt;
+      &lt;option&gt;4&lt;/option&gt;
+      &lt;option&gt;5&lt;/option&gt;
+    &lt;/select&gt;
+  &lt;/div&gt;
+  &lt;div class="form-group"&gt;
+    &lt;label for="exampleFormControlSelect2"&gt;Example multiple select&lt;/label&gt;
+    &lt;select multiple="" class="form-control" id="exampleFormControlSelect2"&gt;
+      &lt;option&gt;1&lt;/option&gt;
+      &lt;option&gt;2&lt;/option&gt;
+      &lt;option&gt;3&lt;/option&gt;
+      &lt;option&gt;4&lt;/option&gt;
+      &lt;option&gt;5&lt;/option&gt;
+    &lt;/select&gt;
+  &lt;/div&gt;
+  &lt;div class="form-group"&gt;
+    &lt;label for="exampleFormControlTextarea1"&gt;Example textarea&lt;/label&gt;
+    &lt;textarea class="form-control" id="exampleFormControlTextarea1" rows="3"&gt;&lt;/textarea&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</code></pre></div>
+
+<p>For file inputs, swap the <code class="prettyprint prettyprinted">.form-control</code> for <code class="prettyprint prettyprinted">.form-control-file</code>.</p>
+
+<form>
+  <div class="form-group">
+    <label for="exampleFormControlFile1">Example file input</label>
+    <input type="file" class="form-control-file" id="exampleFormControlFile1" />
+  </div>
+</form>
+
+<div class="prettyprint prettyprinted"><pre><code class="language-html" data-lang="html">&lt;form&gt;
+  &lt;div class="form-group"&gt;
+    &lt;label for="exampleFormControlFile1"&gt;Example file input&lt;/label&gt;
+    &lt;input type="file" class="form-control-file" id="exampleFormControlFile1" /&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</code></pre></div>
+
+<h3 id="sizing">Sizing</h3>
+
+<p>Set heights using classes like <code class="prettyprint prettyprinted">.form-control-lg</code> and <code class="prettyprint prettyprinted">.form-control-sm</code>.</p>
+
+<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" />
+<input class="form-control" type="text" placeholder="Default input" />
+<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" />
+
+<div class="prettyprint prettyprinted"><pre><code class="language-html" data-lang="html">&lt;input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" /&gt;
+&lt;input class="form-control" type="text" placeholder="Default input" /&gt;
+&lt;input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" /&gt;</code></pre></div>
+
+<select class="form-control form-control-lg">
+  <option>Large select</option>
+</select>
+<select class="form-control">
+  <option>Default select</option>
+</select>
+<select class="form-control form-control-sm">
+  <option>Small select</option>
+</select>
+<div class="prettyprint prettyprinted"><pre><code class="language-html" data-lang="html">&lt;select class="form-control form-control-lg"&gt;
+  &lt;option&gt;Large select&lt;/option&gt;
+&lt;/select&gt;
+&lt;select class="form-control"&gt;
+  &lt;option&gt;Default select&lt;/option&gt;
+&lt;/select&gt;
+&lt;select class="form-control form-control-sm"&gt;
+  &lt;option&gt;Small select&lt;/option&gt;
+&lt;/select&gt;</code></pre></div>
+
+<h3 id="readonly">Readonly</h3>
+
+<p>Add the <code class="prettyprint prettyprinted">readonly</code> boolean attribute on an input to prevent modification of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.</p>
+
+<input class="form-control" type="text" placeholder="Readonly input here…" readonly="" />
+<div class="prettyprint prettyprinted"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Readonly input here…"</span> <span class="na">readonly</span><span class="nt">&gt;</span></code></pre></div>
+
+<h3 id="readonly-plain-text">Readonly plain text</h3>
+
+<p>If you want to have <code class="prettyprint prettyprinted">&lt;input readonly&gt;</code> elements in your form styled as plain text, use the <code class="prettyprint prettyprinted">.form-control-plaintext</code> class to remove the default form field styling and preserve the correct margin and padding.</p>
+
+<form>
+  <div class="form-group">
+    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
+    <div class="col-sm-10">
+      <input type="text" readonly="" class="form-control-plaintext" id="staticEmail" value="[email protected]" />
+    </div>
+  </div>
+  <div class="form-group">
+    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
+    <div class="col-sm-10">
+      <input type="password" class="form-control" id="inputPassword" placeholder="Password" />
+    </div>
+  </div>
+</form>
+<div class="prettyprint prettyprinted"><pre><code class="language-html" data-lang="html">&lt;form&gt;
+  &lt;div class="form-group"&gt;
+    &lt;label for="staticEmail" class="col-sm-2 col-form-label"&gt;Email&lt;/label&gt;
+    &lt;div class="col-sm-10"&gt;
+      &lt;input type="text" readonly="" class="form-control-plaintext" id="staticEmail" value="[email protected]" /&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="form-group"&gt;
+    &lt;label for="inputPassword" class="col-sm-2 col-form-label"&gt;Password&lt;/label&gt;
+    &lt;div class="col-sm-10"&gt;
+      &lt;input type="password" class="form-control" id="inputPassword" placeholder="Password" /&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</code></pre></div>
+
+<form class="form-inline">
+  <div class="form-group">
+    <label for="staticEmail2" class="sr-only">Email</label>
+    <input type="text" readonly="" class="form-control-plaintext" id="staticEmail2" value="[email protected]" />
+  </div>
+  <div class="form-group">
+    <label for="inputPassword2" class="sr-only">Password</label>
+    <input type="password" class="form-control" id="inputPassword2" placeholder="Password" />
+  </div>
+  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
+</form>
+
+<div class="prettyprint prettyprinted"><pre><code class="language-html" data-lang="html">&lt;form class="form-inline"&gt;
+  &lt;div class="form-group"&gt;
+    &lt;label for="staticEmail2" class="sr-only"&gt;Email&lt;/label&gt;
+    &lt;input type="text" readonly="" class="form-control-plaintext" id="staticEmail2" value="[email protected]" /&gt;
+  &lt;/div&gt;
+  &lt;div class="form-group"&gt;
+    &lt;label for="inputPassword2" class="sr-only"&gt;Password&lt;/label&gt;
+    &lt;input type="password" class="form-control" id="inputPassword2" placeholder="Password" /&gt;
+  &lt;/div&gt;
+  &lt;button type="submit" class="btn btn-primary mb-2"&gt;Confirm identity&lt;/button&gt;
+&lt;/form&gt;
+</code></pre></div>
+
+<h2 id="checkboxes-and-radios">Checkboxes and radios</h2>
+
+<h3 id="default-stacked">Default (stacked)</h3>
+
+<p>By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked</p>
+<div class="checkbox">
+  <input type="checkbox" value="" id="defaultCheck1" />
+  <label class="form-check-label" for="defaultCheck1">
+    Default checkbox
+  </label>
+</div>
+<div class="form-check  checkbox">
+  <input type="checkbox" value="" id="defaultCheck2" disabled="" />
+  <label for="defaultCheck2">
+    Disabled checkbox
+  </label>
+</div>
+
+<div class="prettyprint prettyprinted"><pre><code class="language-html" data-lang="html">&lt;div class="checkbox"&gt;
+  &lt;input  type="checkbox" value="" id="defaultCheck1" /&gt;
+  &lt;label class="form-check-label" for="defaultCheck1"&gt;
+    Default checkbox
+  &lt;/label&gt;
+&lt;/div&gt;
+&lt;div class="checkbox"&gt;
+  &lt;input type="checkbox" value="" id="defaultCheck2" disabled="" /&gt;
+  &lt;label for="defaultCheck2"&gt;
+    Disabled checkbox
+  &lt;/label&gt;
+&lt;/div&gt;
+</code></pre></div>
+
+<div class="radio">
+  <input type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked="" />
+  <label for="exampleRadios1">
+    Default radio
+  </label>
+</div>
+<div class="radio">
+  <input  type="radio" name="exampleRadios" id="exampleRadios2" value="option2" />
+  <label for="exampleRadios2">
+    Second default radio
+  </label>
+</div>
+<div class=" radio disabled">
+  <input type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled="" />
+  <label for="exampleRadios3">
+    Disabled radio
+  </label>
+</div>
+
+<div class="prettyprint prettyprinted"><pre><code class="language-html" data-lang="html">&lt;div class="radio"&gt;
+  &lt;input type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked="" /&gt;
+  &lt;label for="exampleRadios1"&gt;
+    Default radio
+  &lt;/label&gt;
+&lt;/div&gt;
+&lt;div class="radio"&gt;
+  &lt;input  type="radio" name="exampleRadios" id="exampleRadios2" value="option2" /&gt;
+  &lt;label for="exampleRadios2"&gt;
+    Second default radio
+  &lt;/label&gt;
+&lt;/div&gt;
+&lt;div class=" radio disabled"&gt;
+  &lt;input type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled="" /&gt;
+  &lt;label for="exampleRadios3"&gt;
+    Disabled radio
+  &lt;/label&gt;
+&lt;/div&gt;
+</code></pre></div>
+
+<h3 id="inline">Inline</h3>
+
+<p>Group checkboxes or radios on the same horizontal row by adding <code class="prettyprint prettyprinted">.checkbox-inline or radio-inline</code>
+
+<div class="checkbox-inline">
+  <input type="checkbox" id="inlineCheckbox1" value="option1" />
+  <label  for="inlineCheckbox1">1</label>
+</div>
+<div class="checkbox-inline">
+  <input type="checkbox" id="inlineCheckbox2" value="option2" />
+  <label  for="inlineCheckbox2">2</label>
+</div>
+<div class="checkbox-inline">
+  <input  type="checkbox" id="inlineCheckbox3" value="option3" disabled="" />
+  <label for="inlineCheckbox3">3 (disabled)</label>
+</div>
+
+<div class="prettyprint prettyprinted"><pre><code class="language-html" data-lang="html">
+&lt;div class="checkbox-inline"&gt;
+  &lt;input type="checkbox" id="inlineCheckbox1" value="option1" /&gt;
+  &lt;label  for="inlineCheckbox1">1&lt;/label&gt;
+&lt;/div&gt;
+&lt;div class="checkbox-inline"&gt;
+  &lt;input type="checkbox" id="inlineCheckbox2" value="option2" /&gt;
+  &lt;label  for="inlineCheckbox2">2&lt;/label&gt;
+&lt;/div&gt;
+&lt;div class="checkbox-inline"&gt;
+  &lt;input  type="checkbox" id="inlineCheckbox3" value="option3" disabled="" /&gt;
+  &lt;label for="inlineCheckbox3">3 (disabled)&lt;/label&gt;
+&lt;/div&gt;
+</code></pre></div>
+
+<div class="radio-inline">
+  <input  type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1" />
+  <label for="inlineRadio1">1</label>
+</div>
+<div class="radio-inline">
+  <input  type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2" />
+  <label  for="inlineRadio2">2</label>
+</div>
+<div class="radio-inline">
+  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled="" />
+  <label  for="inlineRadio3">3 (disabled)</label>
+</div>
+
+<div class="prettyprint prettyprinted"><pre><code class="language-html" data-lang="html">&lt;div class="radio-inline"&gt;
+  &lt;input  type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1" /&gt;
+  &lt;label for="inlineRadio1">1&lt;/label&gt;
+&lt;/div&gt;
+&lt;div class="radio-inline"&gt;
+  &lt;input  type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2" /&gt;
+  &lt;label  for="inlineRadio2">2&lt;/label>
+&lt;/div&gt;
+&lt;div class="radio-inline">
+  &lt;input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled="" /&gt;
+  &lt;label  for="inlineRadio3">&gt;3 (disabled)&lt;/label&gt;
+&lt;/div&gt;</code></pre></div>
+
diff --git a/common/utilities/helpers/formulaires.html b/common/utilities/helpers/formulaires.html
@@ -0,0 +1,39 @@
+---
+{
+    "title": "Formulaires - Échafaudage",
+    "language": "fr",
+    "altLangPage": "forms.html",
+    "breadcrumbs": [
+        { "title": "GCWeb accueil", "link": "https://wet-boew.github.io/GCWeb/index-fr.html" }
+    ],
+    "dateModified": "2023-08-20"
+}
+---
+<div class="wb-prettify all-pre hide"></div>
+
+<p>Cette page nécessite une traduction.</p>
+
+<div lang="en">
+<div class="alert alert-warning">
+<p>The purpose of this page is to test all native forms related elements, if they are aligned with our design and are compliant to our accessibility guideline when used as is without any special customization. The following include all form elements in the HTML5 specification and a few examples was inspired by the <a href="https://html.spec.whatwg.org/multipage/forms.html#forms">WHATWG section 4.10</a> as February 2023. This page may not contain all the possible forms element combination.</p>
+</div>
+
+
+<div class="radio">
+  <input type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked="" />
+  <label for="exampleRadios1">
+    Default radio
+  </label>
+</div>
+<div class="radio">
+  <input type="radio" name="exampleRadios" id="exampleRadios2" value="option2" />
+  <label for="exampleRadios2">
+    Second default radio
+  </label>
+</div>
+<div class=" radio disabled">
+  <input type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled="" />
+  <label for="exampleRadios3">
+    Disabled radio
+  </label>
+</div>