From f07256c5f0d15ce073a919ccd784de75b8c530d1 Mon Sep 17 00:00:00 2001 From: hongbinyu413 Date: Wed, 23 Aug 2023 09:44:24 -0400 Subject: [PATCH] wet-366 Create Working Examples for Utilities/Helpers: Forms (GCWeb) --- common/utilities/helpers/forms.html | 330 ++++++++++++++++++++++ common/utilities/helpers/formulaires.html | 39 +++ common/utilities/helpers/index.json-ld | 35 +++ 3 files changed, 404 insertions(+) create mode 100644 common/utilities/helpers/forms.html create mode 100644 common/utilities/helpers/formulaires.html create mode 100644 common/utilities/helpers/index.json-ld diff --git a/common/utilities/helpers/forms.html b/common/utilities/helpers/forms.html new file mode 100644 index 0000000000..d5533a86fb --- /dev/null +++ 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" +} +--- +
+ +
+

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 WHATWG section 4.10 as February 2023. This page may not contain all the possible forms element combination.

+
+ +

The form element

+
+
<form></form>
+ +

Form controls

+ +

Textual form controls—like <input>s, <select>s, and <textarea>s—are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more.

+ +

Be sure to explore our custom forms to further style <select>s.

+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
<form>
+  <div class="form-group">
+    <label for="exampleFormControlInput1">Email address</label>
+    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com" />
+  </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>
+ +

For file inputs, swap the .form-control for .form-control-file.

+ +
+
+ + +
+
+ +
<form>
+  <div class="form-group">
+    <label for="exampleFormControlFile1">Example file input</label>
+    <input type="file" class="form-control-file" id="exampleFormControlFile1" />
+  </div>
+</form>
+ +

Sizing

+ +

Set heights using classes like .form-control-lg and .form-control-sm.

+ + + + + +
<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" />
+ + + + +
<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>
+ +

Readonly

+ +

Add the readonly 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.

+ + +
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
+ +

Readonly plain text

+ +

If you want to have <input readonly> elements in your form styled as plain text, use the .form-control-plaintext class to remove the default form field styling and preserve the correct margin and padding.

+ +
+
+ +
+ +
+
+
+ +
+ +
+
+
+
<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@example.com" />
+    </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>
+ +
+
+ + +
+
+ + +
+ +
+ +
<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@example.com" />
+  </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>
+
+ +

Checkboxes and radios

+ +

Default (stacked)

+ +

By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked

+
+ + +
+
+ + +
+ +
<div class="checkbox">
+  <input  type="checkbox" value="" id="defaultCheck1" />
+  <label class="form-check-label" for="defaultCheck1">
+    Default checkbox
+  </label>
+</div>
+<div class="checkbox">
+  <input type="checkbox" value="" id="defaultCheck2" disabled="" />
+  <label for="defaultCheck2">
+    Disabled checkbox
+  </label>
+</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>
+
+ +

Inline

+ +

Group checkboxes or radios on the same horizontal row by adding .checkbox-inline or radio-inline + +

+ + +
+
+ + +
+
+ + +
+ +

+<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="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>
+ diff --git a/common/utilities/helpers/formulaires.html b/common/utilities/helpers/formulaires.html new file mode 100644 index 0000000000..8a14f48018 --- /dev/null +++ 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" +} +--- +
+ +

Cette page nécessite une traduction.

+ +
+
+

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 WHATWG section 4.10 as February 2023. This page may not contain all the possible forms element combination.

+
+ + +
+ + +
+
+ + +
+
+ + +
\ No newline at end of file diff --git a/common/utilities/helpers/index.json-ld b/common/utilities/helpers/index.json-ld new file mode 100644 index 0000000000..0641d789bb --- /dev/null +++ b/common/utilities/helpers/index.json-ld @@ -0,0 +1,35 @@ +{ + "@context": { + "@version": 1.1, + "dct": "http://purl.org/dc/terms/", + "title": { "@id": "dct:title", "@container": "@language" }, + "description": { "@id": "dct:description", "@container": "@language" }, + "modified": "dct:modified" + }, + "title": { + "en": " ", + "fr": "Utilitaires" + }, + "description": { + "en": "HTML elements used as is.", + "fr": "Les éléments HTML utilisé tel quel." + }, + "modified": "2023-02-21", + "componentName": " ", + "processing": "baseline", + "status": "stable", + "pages": { + "examples": [ + { + "title": "Forms", + "language": "en", + "path": "forms.html" + }, + { + "title": "Formulaires", + "language": "fr", + "path": "formulaires.html" + } + ] + } +}