diff --git a/common/scaffolding/forms.html b/common/scaffolding/forms.html index 0e6b9f7b0..ae8afab6b 100644 --- a/common/scaffolding/forms.html +++ b/common/scaffolding/forms.html @@ -17,15 +17,15 @@

The form element

-
<form></form>
+
<form></form>

The label element

-
<form>
-	<label>This is a label</label>
-</form>
+
<form>
+	<label>This is a label</label>
+</form>

The input element

@@ -34,18 +34,18 @@

Implicit labeling

- 
<form>
-	<label>Label: <input></label>
-</form>
+ 
<form>
+	<label>Label: <input></label>
+</form>

Explicit labeling

- 
<form>
-	<label for="input">Label: </label><input id="input">
-</form>
+ 
<form>
+	<label for="input">Label: </label><input id="input">
+</form>
@@ -55,9 +55,9 @@

Hidden state (type=hidden)

-
<form>
-	<input type="hidden">
-</form>
+
<form>
+	<input type="hidden">
+</form>

Text (type=text) state

@@ -66,18 +66,18 @@

Implicit labeling

- 
<form>
-	<label>Label: <input type="text"></label>
-</form>
+ 
<form>
+	<label>Label: <input type="text"></label>
+</form>

Explicit labeling

- 
<form>
-	<label for="input-text">Label: </label><input id="input-text" type="text">
-</form>
+ 
<form>
+	<label for="input-text">Label: </label><input id="input-text" type="text">
+</form>
@@ -85,17 +85,17 @@

With the input mode text (inputmode=text)

-
<form>
-	<label>Label: <input type="text" inputmode="text"></label>
-</form>
+
<form>
+	<label>Label: <input type="text" inputmode="text"></label>
+</form>

With the input mode none (inputmode=none)

-
<form>
-	<label>Label: <input type="text" inputmode="none"></label>
-</form>
+
<form>
+	<label>Label: <input type="text" inputmode="none"></label>
+</form>

Search state (type=search)

@@ -104,18 +104,18 @@

Implicit labeling

- 
<form>
-	<label>Label: <input type="search"></label>
-</form>
+ 
<form>
+	<label>Label: <input type="search"></label>
+</form>

Explicit labeling

- 
<form>
-	<label for="input-search">Label: </label><input id="input-search" type="search">
-</form>
+ 
<form>
+	<label for="input-search">Label: </label><input id="input-search" type="search">
+</form>
@@ -123,9 +123,9 @@

With the input mode search (inputmode=search)

-
<form>
-	<label>Label: <input type="search" inputmode="search"></label>
-</form>
+
<form>
+	<label>Label: <input type="search" inputmode="search"></label>
+</form>

Telephone state (type=tel)

@@ -134,18 +134,18 @@

Implicit labeling

- 
<form>
-	<label>Label: <input type="tel"></label>
-</form>
+ 
<form>
+	<label>Label: <input type="tel"></label>
+</form>

Explicit labeling

- 
<form>
-	<label for="input-tel">Label: </label><input id="input-tel" type="tel">
-</form>
+ 
<form>
+	<label for="input-tel">Label: </label><input id="input-tel" type="tel">
+</form>
@@ -153,9 +153,9 @@

With the input mode tel (inputmode=tel)

-
<form>
-	<label>Label: <input type="tel" inputmode="tel"></label>
-</form>
+
<form>
+	<label>Label: <input type="tel" inputmode="tel"></label>
+</form>

URL state (type=url)

@@ -163,18 +163,18 @@

Implicit labeling

- 
<form>
-	<label>Label: <input type="url"></label>
-</form>
+ 
<form>
+	<label>Label: <input type="url"></label>
+</form>

Explicit labeling

- 
<form>
-	<label for="input-url">Label: </label><input id="input-url" type="url">
-</form>
+ 
<form>
+	<label for="input-url">Label: </label><input id="input-url" type="url">
+</form>
@@ -182,9 +182,9 @@

With the input mode url (inputmode=url)

-
<form>
-	<label>Label: <input type="url" inputmode="url"></label>
-</form>
+
<form>
+	<label>Label: <input type="url" inputmode="url"></label>
+</form>

Email state (type=email)

@@ -193,18 +193,18 @@

Implicit labeling

- 
<form>
-	<label>Label: <input type="email"></label>
-</form>
+ 
<form>
+	<label>Label: <input type="email"></label>
+</form>

Explicit labeling

- 
<form>
-	<label for="input-email">Label: </label><input id="input-email" type="email">
-</form>
+ 
<form>
+	<label for="input-email">Label: </label><input id="input-email" type="email">
+</form>
@@ -212,9 +212,9 @@

With the input mode email (inputmode=email)

-
<form>
-	<label>Label: <input type="email" inputmode="email"></label>
-</form>
+
<form>
+	<label>Label: <input type="email" inputmode="email"></label>
+</form>

Password state (type=password)

@@ -223,18 +223,18 @@

Implicit labeling

- 
<form>
-	<label>Label: <input type="password"></label>
-</form>
+ 
<form>
+	<label>Label: <input type="password"></label>
+</form>

Explicit labeling

- 
<form>
-	<label for="input-password">Label: </label><input id="input-password" type="password">
-</form>
+ 
<form>
+	<label for="input-password">Label: </label><input id="input-password" type="password">
+</form>
@@ -244,18 +244,18 @@

Implicit labeling

- 
<form>
-	<label>Label: <input type="date"></label>
-</form>
+ 
<form>
+	<label>Label: <input type="date"></label>
+</form>

Explicit labeling

- 
<form>
-	<label for="input-date">Label: </label><input id="input-date" type="date">
-</form>
+ 
<form>
+	<label for="input-date">Label: </label><input id="input-date" type="date">
+</form>
@@ -265,18 +265,16 @@

Implicit labeling

- 
<form>
-	<label>Label: <input type="month"></label>
-</form>
+ 
<form><label>Label: <input type="month"></label>
+</form>

Explicit labeling

- 
<form>
-	<label for="input-month">Label: </label><input id="input-month" type="month">
-</form>
+ 
<form><label for="input-month">Label: </label><input id="input-month" type="month">
+</form>
@@ -286,18 +284,17 @@

Implicit labeling

- 
<form>
-	<label>Label: <input type="week"></label>
-</form>
+ 
<form>
+	<label>Label: <input type="week"></label>
+</form>

Explicit labeling

- 
<form>
-	<label for="input-week">Label: </label><input id="input-week" type="week">
-</form>
+ 
<form><label for="input-week">Label: </label><input id="input-week" type="week">
+</form>
@@ -307,18 +304,20 @@

Implicit labeling

- 
<form>
-	<label>Label: <input type="time"></label>
-</form>
+ 
<form>
+	<label>Label: <input type="time"></label>
+</form>

Explicit labeling

- 
<form>
-	<label for="input-time">Label: </label><input id="input-time" type="time">
-</form>
+ 

+	<form>
+	<label for="input-time">Label: </label><input id="input-time" type="time">
+</form>
+
@@ -328,18 +327,19 @@

Implicit labeling

- 
<form>
-	<label>Label: <input type="datetime-local"></label>
-</form>
+ 
<form>
+	<label>Label: <input type="datetime-local"></label>
+</form>
+

Explicit labeling

- 
<form>
-	<label for="input-datetime-local">Label: </label><input id="input-datetime-local" type="datetime-local">
-</form>
+ 
<form>
+	<label for="input-datetime-local">Label: </label><input id="input-datetime-local" type="datetime-local">
+</form>
@@ -349,18 +349,18 @@

Implicit labeling

- 
<form>
-	<label>Label: <input type="number"></label>
-</form>
+ 
<form>
+	<label>Label: <input type="number"></label>
+</form>

Explicit labeling

- 
<form>
-	<label for="input-number">Label: </label><input id="input-number" type="number">
-</form>
+ 
<form>
+	<label for="input-number">Label: </label><input id="input-number" type="number">
+</form>
@@ -368,17 +368,17 @@

With the input mode numeric (inputmode=numeric)

-
<form>
-	<label>Label: <input type="number" inputmode="numeric"></label>
-</form>
+
<form>
+	<label>Label: <input type="number" inputmode="numeric"></label>
+</form>

With the input mode decimal (inputmode=decimal)

-
<form>
-	<label>Label: <input type="number" inputmode="decimal"></label>
-</form>
+
<form>
+	<label>Label: <input type="number" inputmode="decimal"></label>
+</form>

Range state (type=range)

@@ -387,18 +387,18 @@

Implicit labeling

- 
<form>
-	<label>Label: <input type="range"></label>
-</form>
+ 
<form>
+	<label>Label: <input type="range"></label>
+</form>

Explicit labeling

- 
<form>
-	<label for="input-range">Label: </label><input id="input-range" type="range">
-</form>
+ 
<form>
+	<label for="input-range">Label: </label><input id="input-range" type="range">
+</form>
@@ -408,18 +408,18 @@

Implicit labeling

- 
<form>
-	<label>Label: <input type="color"></label>
-</form>
+ 
<form>
+	<label>Label: <input type="color"></label>
+</form>

Explicit labeling

- 
<form>
-	<label for="input-color">Label: </label><input id="input-color" type="color">
-</form>
+ 
<form>
+	<label for="input-color">Label: </label><input id="input-color" type="color">
+</form>
@@ -437,17 +437,17 @@

Implicit labeling

- 
<form>
-	<p><label>(single) Label: <input type="checkbox"></label>
+	
<form>
+	<p><label>(single) Label: <input type="checkbox"></label>
 	<p>
-	<label>(multiple) Label 1: <input type="checkbox" name="input-checkbox-implicit"></label>
-	<label>(multiple) Label 2: <input type="checkbox" name="input-checkbox-implicit"></label>
-	<label>(multiple) Label 3: <input type="checkbox" name="input-checkbox-implicit"></label>
+	<label>(multiple) Label 1: <input type="checkbox" name="input-checkbox-implicit"></label>
+	<label>(multiple) Label 2: <input type="checkbox" name="input-checkbox-implicit"></label>
+	<label>(multiple) Label 3: <input type="checkbox" name="input-checkbox-implicit"></label>
 	<p>
-	<label><input type="checkbox" name="input-checkbox-implicit"> (multiple) Label after 1</label>
-	<label><input type="checkbox" name="input-checkbox-implicit"> (multiple) Label after 2</label>
-	<label><input type="checkbox" name="input-checkbox-implicit"> (multiple) Label after 3</label>
-</form>

+	<label><input type="checkbox" name="input-checkbox-implicit"> (multiple) Label after 1</label>
+	<label><input type="checkbox" name="input-checkbox-implicit"> (multiple) Label after 2</label>
+	<label><input type="checkbox" name="input-checkbox-implicit"> (multiple) Label after 3</label>
+</form>

Explicit labeling

@@ -462,17 +462,17 @@

Explicit labeling

- 
<form>
-	<p><label for="input-checkbox">(single) Label: </label><input id="input-checkbox" type="checkbox">
+	
<form>
+	<p><label for="input-checkbox">(single) Label: </label><input id="input-checkbox" type="checkbox">
 	<p>
-	<label for="input-checkbox-a1">(multiple) Label 1: </label><input id="input-checkbox-a1" type="checkbox" name="input-checkbox-explicit">
-	<label for="input-checkbox-a2">(multiple) Label 2: </label><input id="input-checkbox-a2" type="checkbox" name="input-checkbox-explicit">
-	<label for="input-checkbox-a3">(multiple) Label 3: </label><input id="input-checkbox-a3" type="checkbox" name="input-checkbox-explicit">
+	<label for="input-checkbox-a1">(multiple) Label 1: </label><input id="input-checkbox-a1" type="checkbox" name="input-checkbox-explicit">
+	<label for="input-checkbox-a2">(multiple) Label 2: </label><input id="input-checkbox-a2" type="checkbox" name="input-checkbox-explicit">
+	<label for="input-checkbox-a3">(multiple) Label 3: </label><input id="input-checkbox-a3" type="checkbox" name="input-checkbox-explicit">
 	<p>
-	<input id="input-checkbox-b1" type="checkbox" name="input-checkbox-explicit"><label for="input-checkbox-b1"> (multiple) Label after 1</label>
-	<input id="input-checkbox-b2" type="checkbox" name="input-checkbox-explicit"><label for="input-checkbox-b2"> (multiple) Label after 2</label>
-	<input id="input-checkbox-b3" type="checkbox" name="input-checkbox-explicit"><label for="input-checkbox-b3"> (multiple) Label after 3</label>
-</form>

+	<input id="input-checkbox-b1" type="checkbox" name="input-checkbox-explicit"><label for="input-checkbox-b1"> (multiple) Label after 1</label>
+	<input id="input-checkbox-b2" type="checkbox" name="input-checkbox-explicit"><label for="input-checkbox-b2"> (multiple) Label after 2</label>
+	<input id="input-checkbox-b3" type="checkbox" name="input-checkbox-explicit"><label for="input-checkbox-b3"> (multiple) Label after 3</label>
+</form>
@@ -490,17 +490,17 @@

Implicit labeling

- 
<form>
-	<label>(single) Label: <input type="radio"></label>
-	<p>
-	<label>(multiple) Label 1: <input type="radio" name="input-radio-implicit"></label>
-	<label>(multiple) Label 2: <input type="radio" name="input-radio-implicit"></label>
-	<label>(multiple) Label 3: <input type="radio" name="input-radio-implicit"></label>
-	<p>
-	<label><input type="radio" name="input-radio-implicit"> (multiple) Label after 1</label>
-	<label><input type="radio" name="input-radio-implicit"> (multiple) Label after 2</label>
-	<label><input type="radio" name="input-radio-implicit"> (multiple) Label after 3</label>
-</form>
+ 
<form>
+	<label>(single) Label: <input type="radio"></label>
+	<p>
+	<label>(multiple) Label 1: <input type="radio" name="input-radio-implicit"></label>
+	<label>(multiple) Label 2: <input type="radio" name="input-radio-implicit"></label>
+	<label>(multiple) Label 3: <input type="radio" name="input-radio-implicit"></label>
+	<p>
+	<label><input type="radio" name="input-radio-implicit"> (multiple) Label after 1</label>
+	<label><input type="radio" name="input-radio-implicit"> (multiple) Label after 2</label>
+	<label><input type="radio" name="input-radio-implicit"> (multiple) Label after 3</label>
+</form>

Explicit labeling

@@ -515,17 +515,17 @@

Explicit labeling

- 
<form>
-	<label for="input-radio">(single) Label: </label><input id="input-radio" type="radio">
+	
<form>
+	<label for="input-radio">(single) Label: </label><input id="input-radio" type="radio">
 	<p>
-	<label for="input-radio-a1">(multiple) Label 1: </label><input id="input-radio-a1" type="radio" name="input-radio-explicit">
-	<label for="input-radio-a2">(multiple) Label 2: </label><input id="input-radio-a2" type="radio" name="input-radio-explicit">
-	<label for="input-radio-a3">(multiple) Label 3: </label><input id="input-radio-a3" type="radio" name="input-radio-explicit">
-	<p>
-	<input id="input-radio-b1" type="radio" name="input-radio-explicit"><label for="input-radio-b1"> (multiple) Label after 1</label>
-	<input id="input-radio-b2" type="radio" name="input-radio-explicit"><label for="input-radio-b2"> (multiple) Label after 2</label>
-	<input id="input-radio-b3" type="radio" name="input-radio-explicit"><label for="input-radio-b3"> (multiple) Label after 3</label>
-</form>

+	<label for="input-radio-a1">(multiple) Label 1: </label><input id="input-radio-a1" type="radio" name="input-radio-explicit">
+	<label for="input-radio-a2">(multiple) Label 2: </label><input id="input-radio-a2" type="radio" name="input-radio-explicit">
+	<label for="input-radio-a3">(multiple) Label 3: </label><input id="input-radio-a3" type="radio" name="input-radio-explicit">
+	<p>
+	<input id="input-radio-b1" type="radio" name="input-radio-explicit"><label for="input-radio-b1"> (multiple) Label after 1</label>
+	<input id="input-radio-b2" type="radio" name="input-radio-explicit"><label for="input-radio-b2"> (multiple) Label after 2</label>
+	<input id="input-radio-b3" type="radio" name="input-radio-explicit"><label for="input-radio-b3"> (multiple) Label after 3</label>
+</form>
@@ -535,18 +535,18 @@

Implicit labeling

- 
<form>
-	<label>Label: <input type="file"></label>
-</form>
+ 
<form>
+	<label>Label: <input type="file"></label>
+</form>

Explicit labeling

- 
<form>
-	<label for="input-file">Label: </label><input id="input-file" type="file">
-</form>
+ 
<form>
+	<label for="input-file">Label: </label><input id="input-file" type="file">
+</form>
@@ -557,12 +557,12 @@

Submit Button state (type=submit)

-
<form>
-	<input type="submit">
-</form>
-<form>
-	<input type="submit" value="Submit">
-</form>
+
<form>
+	<input type="submit">
+</form>
+<form>
+	<input type="submit" value="Submit">
+</form>

Image Button state (type=image)

Note: It will submit the coordinate of the mouse click on the image. @@ -570,17 +570,17 @@

Implicit labeling

-
<form>
-	<label>Label: <input type="image" src="img/input-image-sample.jpg" alt="Implicit image input type example"></label>
-</form>
+
<form>
+	<label>Label: <input type="image" src="img/input-image-sample.jpg" alt="Implicit image input type example"></label>
+</form>

Explicit labeling

-
<form>
-	<label for="input-image">Label: </label><input id="input-image" type="image" src="img/input-image-sample.jpg" alt="Explicit image input type example">
-</form>
+
<form>
+	<label for="input-image">Label: </label><input id="input-image" type="image" src="img/input-image-sample.jpg" alt="Explicit image input type example">
+</form>

Reset Button state (type=reset)

@@ -592,22 +592,22 @@

Reset Button state (type=reset)

-
<form>s
-	<label>Label: <input type="text" value="This is a value"></label>
+
<form>s
+	<label>Label: <input type="text" value="This is a value"></label>
 	<input type="reset">
-</form>
-<form>
-	<label>Label: <input type="text" value="This is a value"></label>
-	<input type="reset" value="Reset">
-</form>

+</form>
+<form>
+	<label>Label: <input type="text" value="This is a value"></label>
+	<input type="reset" value="Reset">
+</form>

Button state (type=button)

-
<form>
-	<input type="button" value="Button">
-</form>
+
<form>
+	<input type="button" value="Button">
+</form>

Common input element attributes

@@ -616,43 +616,43 @@

The value attribute

-
<form>
-	<label>Label: <input type="text" value="This is a value"></label>
-</form>
+
<form>
+	<label>Label: <input type="text" value="This is a value"></label>
+</form>

The readonly attribute

-
<form>
-	<label>Label: <input readonly value="this is a value"></label>
-</form>
+
<form>
+	<label>Label: <input readonly value="this is a value"></label>
+</form>

The disabled attribute

-
<form>
-	<label>Label: <input disabled value="this is a value"></label>
-</form>
+
<form>
+	<label>Label: <input disabled value="this is a value"></label>
+</form>

The placeholder attribute

-
<form>
-	<p><label>Description: <input type="text" name="desc" placeholder="My Email Account"></label></p>
-</form>
+
<form>
+	<p><label>Description: <input type="text" name="desc" placeholder="My Email Account"></label></p>
+</form>

The required attribute

-
<form>
-	<label>Label: <input required></label>
-	<input type="submit">
-</form>
+
<form>
+	<label>Label: <input required></label>
+	<input type="submit">
+</form>

The multiple attribute

@@ -661,12 +661,12 @@

The multiple attribute

-
<form>
-	<label>To: <input type=email multiple name=to></label>
-</form>
-<form>
-	<label>Attachments: <input type=file multiple name=att></label>
-</form>
+
<form>
+	<label>To: <input type=email multiple name=to></label>
+</form>
+<form>
+	<label>Attachments: <input type=file multiple name=att></label>
+</form>

The pattern attribute

@@ -676,13 +676,13 @@

The pattern attribute

-
<form>
-	<label> Part number:
+
<form>
+	<label> Part number:
 	<input pattern="[0-9][A-Z]{3}" name="part"
-		title="A part number is a digit followed by three uppercase letters."/>
-</label>
-<input type="submit">
-</form>

+		title="A part number is a digit followed by three uppercase letters."/>
+</label>
+<input type="submit">
+</form>

The maxlength and minlength attributes

@@ -690,27 +690,27 @@

The maxlength and minlength attributes

-
<form>
-	<p><label>What are you doing? <input name=status maxlength=25></label>
-	<p><label>Username: <input name=u required></label>
-	<p><label>Password: <input name=p required minlength=12></label>
-</form>
+
<form>
+	<p><label>What are you doing? <input name=status maxlength=25></label>
+	<p><label>Username: <input name=u required></label>
+	<p><label>Password: <input name=p required minlength=12></label>
+</form>

The size attribute

-
<form>
-	<label>Size <input size=50></label>
-</form>
+
<form>
+	<label>Size <input size=50></label>
+</form>

The min and max attributes

-
<form>
-	<label>Quantity <input name=quantity required="" type="number" min="1" max="10" value="1"></label>
-</form>
+
<form>
+	<label>Quantity <input name=quantity required="" type="number" min="1" max="10" value="1"></label>
+</form>

The step attribute

@@ -722,15 +722,15 @@

The step attribute

-
<form>
-	<label>Sleep start <input name="sleepStart" type=time min="21:00" max="06:00" step="60" value="00:00"></label>
-</form>
-<form>
-	<label>Opacity (256 steps) <input name=opacity type=range min=0 max=1 step=0.00392156863></label>
-</form>
-<form>
-	<label>Favority time (any steps) <input name=favtime type=time step=any></label>
-</form>
+
<form>
+	<label>Sleep start <input name="sleepStart" type=time min="21:00" max="06:00" step="60" value="00:00"></label>
+</form>
+<form>
+	<label>Opacity (256 steps) <input name=opacity type=range min=0 max=1 step=0.00392156863></label>
+</form>
+<form>
+	<label>Favority time (any steps) <input name=favtime type=time step=any></label>
+</form>

The list attribute

@@ -745,17 +745,17 @@

The list attribute

-
<form>
-	<label>Function types <input type="text" list="function-types"></label>
-	<datalist id="function-types">
-		<option value="function">function</option>
-		<option value="async function">async function</option>
-		<option value="function*">generator function</option>
-		<option value="=>">arrow function</option>
-		<option value="async =>">async arrow function</option>
-		<option value="async function*">async generator function</option>
-	</datalist>
-</form>
+
<form>
+	<label>Function types <input type="text" list="function-types"></label>
+	<datalist id="function-types">
+		<option value="function">function</option>
+		<option value="async function">async function</option>
+		<option value="function*">generator function</option>
+		<option value="=>">arrow function</option>
+		<option value="async =>">async arrow function</option>
+		<option value="async function*">async generator function</option>
+	</datalist>
+</form>

The button element

@@ -772,19 +772,19 @@

The button element

-
<form>
-	<button>Default</button>
-</form>
-<form>
-	<button type="submit">Submit</button>
-</form>
-<form>
-	<button type="reset">Reset</button>
-</form>
-<form>
-	<button type="button">Button</button>
-</form>
-<button type="button">Button in no form</button>
+
<form>
+	<button>Default</button>
+</form>
+<form>
+	<button type="submit">Submit</button>
+</form>
+<form>
+	<button type="reset">Reset</button>
+</form>
+<form>
+	<button type="button">Button</button>
+</form>
+<button type="button">Button in no form</button>

The select element

@@ -802,18 +802,18 @@

No default, explicit label

-
<form>
-<p>
-	<label for="unittype">Select unit type:</label>
-	<select id="unittype" name="unittype">
-		<option value="1"> Miner </option>
-		<option value="2"> Puffer </option>
-		<option value="3" selected> Snipey </option>
-		<option value="4"> Max </option>
-		<option value="5"> Firebot </option>
-	</select>
-</p>
-</form>
+
<form>
+<p>
+	<label for="unittype">Select unit type:</label>
+	<select id="unittype" name="unittype">
+		<option value="1"> Miner </option>
+		<option value="2"> Puffer </option>
+		<option value="3" selected> Snipey </option>
+		<option value="4"> Max </option>
+		<option value="5"> Firebot </option>
+	</select>
+</p>
+</form>

No default, implicit label

@@ -830,19 +830,19 @@

No default, implicit label

-
<form>
-<p>
-	<label>Select unit type:
-	<select name="unittype">
-		<option value="1"> Miner </option>
-		<option value="2"> Puffer </option>
-		<option value="3" selected> Snipey </option>
-		<option value="4"> Max </option>
-		<option value="5"> Firebot </option>
-	</select>
-	</label>
-</p>
-</form>
+
<form>
+<p>
+	<label>Select unit type:
+	<select name="unittype">
+		<option value="1"> Miner </option>
+		<option value="2"> Puffer </option>
+		<option value="3" selected> Snipey </option>
+		<option value="4"> Max </option>
+		<option value="5"> Firebot </option>
+	</select>
+	</label>
+</p>
+</form>

With placeholder

@@ -859,19 +859,19 @@

With placeholder

-
<form>
-<p>
-	<label for="unittypeplaceholder">Select unit type:</label>
-	<select id="unittypeplaceholder" name="unittypeplaceholder" required>
-	<option value=""> Select unit type </option>
-	<option value="1"> Miner </option>
-	<option value="2"> Puffer </option>
-	<option value="3"> Snipey </option>
-	<option value="4"> Max </option>
-	<option value="5"> Firebot </option>
-</select>
-</p>
-</form>
+
<form>
+<p>
+	<label for="unittypeplaceholder">Select unit type:</label>
+	<select id="unittypeplaceholder" name="unittypeplaceholder" required>
+	<option value=""> Select unit type </option>
+	<option value="1"> Miner </option>
+	<option value="2"> Puffer </option>
+	<option value="3"> Snipey </option>
+	<option value="4"> Max </option>
+	<option value="5"> Firebot </option>
+</select>
+</p>
+</form>

All selected

@@ -887,18 +887,18 @@

All selected

-
<form>
-<p>
-	<label for="allowedunits">Select unit types to enable on this map:</label>
-	<select id="allowedunits" name="allowedunits" multiple>
-		<option value="1" selected> Miner </option>
-		<option value="2" selected> Puffer </option>
-		<option value="3" selected> Snipey </option>
-		<option value="4" selected> Max </option>
-		<option value="5" selected> Firebot </option>
-	</select>
-</p>
-</form>
+
<form>
+<p>
+	<label for="allowedunits">Select unit types to enable on this map:</label>
+	<select id="allowedunits" name="allowedunits" multiple>
+		<option value="1" selected> Miner </option>
+		<option value="2" selected> Puffer </option>
+		<option value="3" selected> Snipey </option>
+		<option value="4" selected> Max </option>
+		<option value="5" selected> Firebot </option>
+	</select>
+</p>
+</form>

With option group (optgroup)

@@ -920,24 +920,24 @@

With option group (optgroup)

-
<form>
-	<p><label>Course:
-		<select name="c">
-			<optgroup label="8.01 Physics I: Classical Mechanics">
-				<option value="8.01.1">Lecture 01: Powers of Ten
-				<option value="8.01.2">Lecture 02: 1D Kinematics
-				<option value="8.01.3">Lecture 03: Vectors
-			<optgroup label="8.02 Electricity and Magnetism">
-				<option value="8.02.1">Lecture 01: What holds our world together?
-				<option value="8.02.2">Lecture 02: Electric Field
-				<option value="8.02.3">Lecture 03: Electric Flux
-			<optgroup label="8.03 Physics III: Vibrations and Waves">
-				<option value="8.03.1">Lecture 01: Periodic Phenomenon
-				<option value="8.03.2">Lecture 02: Beats
-				<option value="8.03.3">Lecture 03: Forced Oscillations with Damping
-		</select>
-	</label>
-</form>
+
<form>
+	<p><label>Course:
+		<select name="c">
+			<optgroup label="8.01 Physics I: Classical Mechanics">
+				<option value="8.01.1">Lecture 01: Powers of Ten
+				<option value="8.01.2">Lecture 02: 1D Kinematics
+				<option value="8.01.3">Lecture 03: Vectors
+			<optgroup label="8.02 Electricity and Magnetism">
+				<option value="8.02.1">Lecture 01: What holds our world together?
+				<option value="8.02.2">Lecture 02: Electric Field
+				<option value="8.02.3">Lecture 03: Electric Flux
+			<optgroup label="8.03 Physics III: Vibrations and Waves">
+				<option value="8.03.1">Lecture 01: Periodic Phenomenon
+				<option value="8.03.2">Lecture 02: Beats
+				<option value="8.03.3">Lecture 03: Forced Oscillations with Damping
+		</select>
+	</label>
+</form>

The datalist element

@@ -951,16 +951,16 @@

The datalist element

-
<form>
-<label>
+
<form>
+<label>
 	Animal:
-	<input name=animal list=animals>
-	<datalist id=animals>
-		<option value="Cat">
-		<option value="Dog">
-	</datalist>
-</label>
-</form>

+	<input name=animal list=animals>
+	<datalist id=animals>
+		<option value="Cat">
+		<option value="Dog">
+	</datalist>
+</label>
+</form>

textarea element

@@ -975,8 +975,8 @@

textarea element

...
-
<form>
-<label>Textarea: <textarea>Dear Madam Speaker,
+
<form>
+<label>Textarea: <textarea>Dear Madam Speaker,
 
 Regarding your letter dated ...
 
@@ -984,9 +984,9 @@ 
textarea element

 
 Yours Sincerely,
 
-...</textarea>
-</label>
-</form>

+...</textarea>
+</label>
+</form>

With placeholder text

@@ -999,41 +999,41 @@

With placeholder text

Daddy">
-
<form>
-<label>Textarea: <textarea placeholder="Dear Francine,
+
<form>
+<label>Textarea: <textarea placeholder="Dear Francine,
 
 They closed the parks this week, so we won't be able to
 meet your there. Should we just have dinner?
 
 Love,
-Daddy"></textarea>
-</label>
-</form>

+Daddy"></textarea>
+</label>
+</form>

The output element

-
<form>
-<output id="resultEmpty"></output>
-</form>
+
<form>
+<output id="resultEmpty"></output>
+</form>

With a value

With a non empty result
-
<form>
+
<form>
 <output id="resultNonEmpty">With a non empty result</output>
-</form>

+</form>

The progress element

-
<p><label>Progress: <progress id=p max=100 value="30"><span>30</span>%</progress></label></p>
+
<p><label>Progress: <progress id=p max=100 value="30"><span>30</span>%</progress></label></p>

Indeterminate state

-
<p><label>Loading: <progress></progress></label></p>
+
<p><label>Loading: <progress></progress></label></p>

The meter element

@@ -1049,18 +1049,18 @@

The meter element

-

<p><label>Measure 10%: <meter value="10" max="100">10 percent</meter></label>
-<p><label>Measure 60%: <meter value="60" max="100">60 percent</meter></label>
-<p><label>Low: <meter value="30" max="100" low="40" high="80">30 percent</meter></label>
-<p><label>Normal: <meter value="50" max="100" low="40" high="80">50 percent</meter></label>
-<p><label>High: <meter value="90" max="100" low="40" high="80">90 percent</meter></label>
-<p><label>Optimum value (39) is higher: <meter value="30" max="100" optimum="39">30 percent</meter></label>
-<p><label>Optimum value (39) is lower: <meter value="69" max="100" optimum="39">69 percent</meter></label>
-<p><label>Optimum value (39) is on it: <meter value="39" max="100" optimum="39">39 percent</meter></label>
-<p><label>Optimum value (default) is on it: <meter value="50" max="100">50 percent</meter></label>
-<p><label>Optimum region low: <meter value="20" max="100" low="40" high="80" optimum="30">20 percent</meter></label>
-<p><label>Optimum region normal: <meter value="50" max="100" low="40" high="80" optimum="51">50 percent</meter></label>
-<p><label>Optimum region high: <meter value="95" max="100" low="40" high="80" optimum="90">95 percent</meter></label>
+
<p><label>Measure 10%: <meter value="10" max="100">10 percent</meter></label>
+<p><label>Measure 60%: <meter value="60" max="100">60 percent</meter></label>
+<p><label>Low: <meter value="30" max="100" low="40" high="80">30 percent</meter></label>
+<p><label>Normal: <meter value="50" max="100" low="40" high="80">50 percent</meter></label>
+<p><label>High: <meter value="90" max="100" low="40" high="80">90 percent</meter></label>
+<p><label>Optimum value (39) is higher: <meter value="30" max="100" optimum="39">30 percent</meter></label>
+<p><label>Optimum value (39) is lower: <meter value="69" max="100" optimum="39">69 percent</meter></label>
+<p><label>Optimum value (39) is on it: <meter value="39" max="100" optimum="39">39 percent</meter></label>
+<p><label>Optimum value (default) is on it: <meter value="50" max="100">50 percent</meter></label>
+<p><label>Optimum region low: <meter value="20" max="100" low="40" high="80" optimum="30">20 percent</meter></label>
+<p><label>Optimum region normal: <meter value="50" max="100" low="40" high="80" optimum="51">50 percent</meter></label>
+<p><label>Optimum region high: <meter value="95" max="100" low="40" high="80" optimum="90">95 percent</meter></label>

The fieldset and legend element

@@ -1079,21 +1079,21 @@

The fieldset and legend element

-
<form>
-<fieldset>
-	<legend>Display</legend>
-	<p><label><input type=radio name=c value=0 checked> Black on White</label>
-	<p><label><input type=radio name=c value=1> White on Black</label>
-	<p><label><input type=checkbox name=g> Use grayscale</label>
-	<p><label>Enhance contrast <input type=range name=e list=contrast min=0 max=100 value=0 step=1></label>
-	<datalist id=contrast>
-		<option label=Normal value=0>
-		<option label=Middle value=50>
-		<option label="Middle high" value="78">
-		<option label=Maximum value=100>
-	</datalist>
-</fieldset>
-</form>
+
<form>
+<fieldset>
+	<legend>Display</legend>
+	<p><label><input type=radio name=c value=0 checked> Black on White</label>
+	<p><label><input type=radio name=c value=1> White on Black</label>
+	<p><label><input type=checkbox name=g> Use grayscale</label>
+	<p><label>Enhance contrast <input type=range name=e list=contrast min=0 max=100 value=0 step=1></label>
+	<datalist id=contrast>
+		<option label=Normal value=0>
+		<option label=Middle value=50>
+		<option label="Middle high" value="78">
+		<option label=Maximum value=100>
+	</datalist>
+</fieldset>
+</form>

Disabled fieldset

@@ -1107,17 +1107,17 @@

Disabled fieldset

-
<form>
-<fieldset name="clubfields" disabled>
-	<legend> <label>
-		<input type=checkbox name=club onchange="form.clubfields.disabled = !checked">
+
<form>
+<fieldset name="clubfields" disabled>
+	<legend> <label>
+		<input type=checkbox name=club onchange="form.clubfields.disabled = !checked">
 		Use Club Card
-	</label> </legend>
-	<p><label>Name on card: <input name=clubname required></label></p>
-	<p><label>Card number: <input name=clubnum required pattern="[-0-9]+"></label></p>
-	<p><label>Expiry date: <input name=clubexp type=month></label></p>
-</fieldset>
-</form>

+	</label> </legend>
+	<p><label>Name on card: <input name=clubname required></label></p>
+	<p><label>Card number: <input name=clubnum required pattern="[-0-9]+"></label></p>
+	<p><label>Expiry date: <input name=clubexp type=month></label></p>
+</fieldset>
+</form>

Grouping controls

@@ -1139,22 +1139,22 @@

Grouping controls

-
<form>
-<fieldset>
-	<legend> <h4>
+
<form>
+<fieldset>
+	<legend> <h4>
 		How can we best reach you?
-	</h4> </legend>
-	<p> <label>
-	<input type=radio checked name=contact_pref>
+	</h4> </legend>
+	<p> <label>
+	<input type=radio checked name=contact_pref>
 		Phone
-	</label> </p>
-	<p> <label>
-		<input type=radio name=contact_pref>
+	</label> </p>
+	<p> <label>
+		<input type=radio name=contact_pref>
 		Text
-	</label> </p>
-	<p> <label>
-		<input type=radio name=contact_pref>
+	</label> </p>
+	<p> <label>
+		<input type=radio name=contact_pref>
 		Email
-	</label> </p>
-</fieldset>
-</form>

+	</label> </p>
+</fieldset>
+</form>
diff --git a/common/scaffolding/formulaires.html b/common/scaffolding/formulaires.html index 9c9b251e2..cebe1b5be 100644 --- a/common/scaffolding/formulaires.html +++ b/common/scaffolding/formulaires.html @@ -20,15 +20,15 @@

The form element

-
<form></form>
+
<form></form>

The label element

-
<form>
-	<label>This is a label</label>
-</form>
+
<form>
+	<label>This is a label</label>
+</form>

The input element

@@ -37,18 +37,18 @@

Implicit labeling

- 
<form>
-	<label>Label: <input></label>
-</form>
+ 
<form>
+	<label>Label: <input></label>
+</form>

Explicit labeling

- 
<form>
-	<label for="input">Label: </label><input id="input">
-</form>
+ 
<form>
+	<label for="input">Label: </label><input id="input">
+</form>
@@ -58,9 +58,9 @@

Hidden state (type=hidden)

-
<form>
-	<input type="hidden">
-</form>
+
<form>
+	<input type="hidden">
+</form>

Text (type=text) state

@@ -69,18 +69,18 @@

Implicit labeling

- 
<form>
-	<label>Label: <input type="text"></label>
-</form>
+ 
<form>
+	<label>Label: <input type="text"></label>
+</form>

Explicit labeling

- 
<form>
-	<label for="input-text">Label: </label><input id="input-text" type="text">
-</form>
+ 
<form>
+	<label for="input-text">Label: </label><input id="input-text" type="text">
+</form>
@@ -88,17 +88,17 @@

With the input mode text (inputmode=text)

-
<form>
-	<label>Label: <input type="text" inputmode="text"></label>
-</form>
+
<form>
+	<label>Label: <input type="text" inputmode="text"></label>
+</form>

With the input mode none (inputmode=none)

-
<form>
-	<label>Label: <input type="text" inputmode="none"></label>
-</form>
+
<form>
+	<label>Label: <input type="text" inputmode="none"></label>
+</form>

Search state (type=search)

@@ -107,18 +107,18 @@

Implicit labeling

- 
<form>
-	<label>Label: <input type="search"></label>
-</form>
+ 
<form>
+	<label>Label: <input type="search"></label>
+</form>

Explicit labeling

- 
<form>
-	<label for="input-search">Label: </label><input id="input-search" type="search">
-</form>
+ 
<form>
+	<label for="input-search">Label: </label><input id="input-search" type="search">
+</form>
@@ -126,9 +126,9 @@

With the input mode search (inputmode=search)

-
<form>
-	<label>Label: <input type="search" inputmode="search"></label>
-</form>
+
<form>
+	<label>Label: <input type="search" inputmode="search"></label>
+</form>

Telephone state (type=tel)

@@ -137,18 +137,18 @@

Implicit labeling

- 
<form>
-	<label>Label: <input type="tel"></label>
-</form>
+ 
<form>
+	<label>Label: <input type="tel"></label>
+</form>

Explicit labeling

- 
<form>
-	<label for="input-tel">Label: </label><input id="input-tel" type="tel">
-</form>
+ 
<form>
+	<label for="input-tel">Label: </label><input id="input-tel" type="tel">
+</form>
@@ -156,9 +156,9 @@

With the input mode tel (inputmode=tel)

-
<form>
-	<label>Label: <input type="tel" inputmode="tel"></label>
-</form>
+
<form>
+	<label>Label: <input type="tel" inputmode="tel"></label>
+</form>

URL state (type=url)

@@ -166,18 +166,18 @@

Implicit labeling

- 
<form>
-	<label>Label: <input type="url"></label>
-</form>
+ 
<form>
+	<label>Label: <input type="url"></label>
+</form>

Explicit labeling

- 
<form>
-	<label for="input-url">Label: </label><input id="input-url" type="url">
-</form>
+ 
<form>
+	<label for="input-url">Label: </label><input id="input-url" type="url">
+</form>
@@ -185,9 +185,9 @@

With the input mode url (inputmode=url)

-
<form>
-	<label>Label: <input type="url" inputmode="url"></label>
-</form>
+
<form>
+	<label>Label: <input type="url" inputmode="url"></label>
+</form>

Email state (type=email)

@@ -196,18 +196,18 @@

Implicit labeling

- 
<form>
-	<label>Label: <input type="email"></label>
-</form>
+ 
<form>
+	<label>Label: <input type="email"></label>
+</form>

Explicit labeling

- 
<form>
-	<label for="input-email">Label: </label><input id="input-email" type="email">
-</form>
+ 
<form>
+	<label for="input-email">Label: </label><input id="input-email" type="email">
+</form>
@@ -215,9 +215,9 @@

With the input mode email (inputmode=email)

-
<form>
-	<label>Label: <input type="email" inputmode="email"></label>
-</form>
+
<form>
+	<label>Label: <input type="email" inputmode="email"></label>
+</form>

Password state (type=password)

@@ -226,18 +226,18 @@

Implicit labeling

- 
<form>
-	<label>Label: <input type="password"></label>
-</form>
+ 
<form>
+	<label>Label: <input type="password"></label>
+</form>

Explicit labeling

- 
<form>
-	<label for="input-password">Label: </label><input id="input-password" type="password">
-</form>
+ 
<form>
+	<label for="input-password">Label: </label><input id="input-password" type="password">
+</form>
@@ -247,18 +247,18 @@

Implicit labeling

- 
<form>
-	<label>Label: <input type="date"></label>
-</form>
+ 
<form>
+	<label>Label: <input type="date"></label>
+</form>

Explicit labeling

- 
<form>
-	<label for="input-date">Label: </label><input id="input-date" type="date">
-</form>
+ 
<form>
+	<label for="input-date">Label: </label><input id="input-date" type="date">
+</form>
@@ -268,18 +268,16 @@

Implicit labeling

- 
<form>
-	<label>Label: <input type="month"></label>
-</form>
+ 
<form><label>Label: <input type="month"></label>
+</form>

Explicit labeling

- 
<form>
-	<label for="input-month">Label: </label><input id="input-month" type="month">
-</form>
+ 
<form><label for="input-month">Label: </label><input id="input-month" type="month">
+</form>
@@ -289,18 +287,17 @@

Implicit labeling

- 
<form>
-	<label>Label: <input type="week"></label>
-</form>
+ 
<form>
+	<label>Label: <input type="week"></label>
+</form>

Explicit labeling

- 
<form>
-	<label for="input-week">Label: </label><input id="input-week" type="week">
-</form>
+ 
<form><label for="input-week">Label: </label><input id="input-week" type="week">
+</form>
@@ -310,18 +307,20 @@

Implicit labeling

- 
<form>
-	<label>Label: <input type="time"></label>
-</form>
+ 
<form>
+	<label>Label: <input type="time"></label>
+</form>

Explicit labeling

- 
<form>
-	<label for="input-time">Label: </label><input id="input-time" type="time">
-</form>
+ 

+	<form>
+	<label for="input-time">Label: </label><input id="input-time" type="time">
+</form>
+
@@ -331,18 +330,20 @@

Implicit labeling

- 
<form>
-	<label>Label: <input type="datetime-local"></label>
-</form>
+ 

+	<form>
+	<label>Label: <input type="datetime-local"></label>
+</form>
+

Explicit labeling

- 
<form>
-	<label for="input-datetime-local">Label: </label><input id="input-datetime-local" type="datetime-local">
-</form>
+ 
<form>
+	<label for="input-datetime-local">Label: </label><input id="input-datetime-local" type="datetime-local">
+</form>
@@ -352,18 +353,18 @@

Implicit labeling

- 
<form>
-	<label>Label: <input type="number"></label>
-</form>
+ 
<form>
+	<label>Label: <input type="number"></label>
+</form>

Explicit labeling

- 
<form>
-	<label for="input-number">Label: </label><input id="input-number" type="number">
-</form>
+ 
<form>
+	<label for="input-number">Label: </label><input id="input-number" type="number">
+</form>
@@ -371,17 +372,17 @@

With the input mode numeric (inputmode=numeric)

-
<form>
-	<label>Label: <input type="number" inputmode="numeric"></label>
-</form>
+
<form>
+	<label>Label: <input type="number" inputmode="numeric"></label>
+</form>

With the input mode decimal (inputmode=decimal)

-
<form>
-	<label>Label: <input type="number" inputmode="decimal"></label>
-</form>
+
<form>
+	<label>Label: <input type="number" inputmode="decimal"></label>
+</form>

Range state (type=range)

@@ -390,18 +391,18 @@

Implicit labeling

- 
<form>
-	<label>Label: <input type="range"></label>
-</form>
+ 
<form>
+	<label>Label: <input type="range"></label>
+</form>

Explicit labeling

- 
<form>
-	<label for="input-range">Label: </label><input id="input-range" type="range">
-</form>
+ 
<form>
+	<label for="input-range">Label: </label><input id="input-range" type="range">
+</form>
@@ -411,18 +412,18 @@

Implicit labeling

- 
<form>
-	<label>Label: <input type="color"></label>
-</form>
+ 
<form>
+	<label>Label: <input type="color"></label>
+</form>

Explicit labeling

- 
<form>
-	<label for="input-color">Label: </label><input id="input-color" type="color">
-</form>
+ 
<form>
+	<label for="input-color">Label: </label><input id="input-color" type="color">
+</form>
@@ -440,17 +441,17 @@

Implicit labeling

- 
<form>
-	<p><label>(single) Label: <input type="checkbox"></label>
+	
<form>
+	<p><label>(single) Label: <input type="checkbox"></label>
 	<p>
-	<label>(multiple) Label 1: <input type="checkbox" name="input-checkbox-implicit"></label>
-	<label>(multiple) Label 2: <input type="checkbox" name="input-checkbox-implicit"></label>
-	<label>(multiple) Label 3: <input type="checkbox" name="input-checkbox-implicit"></label>
+	<label>(multiple) Label 1: <input type="checkbox" name="input-checkbox-implicit"></label>
+	<label>(multiple) Label 2: <input type="checkbox" name="input-checkbox-implicit"></label>
+	<label>(multiple) Label 3: <input type="checkbox" name="input-checkbox-implicit"></label>
 	<p>
-	<label><input type="checkbox" name="input-checkbox-implicit"> (multiple) Label after 1</label>
-	<label><input type="checkbox" name="input-checkbox-implicit"> (multiple) Label after 2</label>
-	<label><input type="checkbox" name="input-checkbox-implicit"> (multiple) Label after 3</label>
-</form>

+	<label><input type="checkbox" name="input-checkbox-implicit"> (multiple) Label after 1</label>
+	<label><input type="checkbox" name="input-checkbox-implicit"> (multiple) Label after 2</label>
+	<label><input type="checkbox" name="input-checkbox-implicit"> (multiple) Label after 3</label>
+</form>

Explicit labeling

@@ -465,17 +466,17 @@

Explicit labeling

- 
<form>
-	<p><label for="input-checkbox">(single) Label: </label><input id="input-checkbox" type="checkbox">
+	
<form>
+	<p><label for="input-checkbox">(single) Label: </label><input id="input-checkbox" type="checkbox">
 	<p>
-	<label for="input-checkbox-a1">(multiple) Label 1: </label><input id="input-checkbox-a1" type="checkbox" name="input-checkbox-explicit">
-	<label for="input-checkbox-a2">(multiple) Label 2: </label><input id="input-checkbox-a2" type="checkbox" name="input-checkbox-explicit">
-	<label for="input-checkbox-a3">(multiple) Label 3: </label><input id="input-checkbox-a3" type="checkbox" name="input-checkbox-explicit">
+	<label for="input-checkbox-a1">(multiple) Label 1: </label><input id="input-checkbox-a1" type="checkbox" name="input-checkbox-explicit">
+	<label for="input-checkbox-a2">(multiple) Label 2: </label><input id="input-checkbox-a2" type="checkbox" name="input-checkbox-explicit">
+	<label for="input-checkbox-a3">(multiple) Label 3: </label><input id="input-checkbox-a3" type="checkbox" name="input-checkbox-explicit">
 	<p>
-	<input id="input-checkbox-b1" type="checkbox" name="input-checkbox-explicit"><label for="input-checkbox-b1"> (multiple) Label after 1</label>
-	<input id="input-checkbox-b2" type="checkbox" name="input-checkbox-explicit"><label for="input-checkbox-b2"> (multiple) Label after 2</label>
-	<input id="input-checkbox-b3" type="checkbox" name="input-checkbox-explicit"><label for="input-checkbox-b3"> (multiple) Label after 3</label>
-</form>

+	<input id="input-checkbox-b1" type="checkbox" name="input-checkbox-explicit"><label for="input-checkbox-b1"> (multiple) Label after 1</label>
+	<input id="input-checkbox-b2" type="checkbox" name="input-checkbox-explicit"><label for="input-checkbox-b2"> (multiple) Label after 2</label>
+	<input id="input-checkbox-b3" type="checkbox" name="input-checkbox-explicit"><label for="input-checkbox-b3"> (multiple) Label after 3</label>
+</form>
@@ -493,17 +494,17 @@

Implicit labeling

- 
<form>
-	<label>(single) Label: <input type="radio"></label>
-	<p>
-	<label>(multiple) Label 1: <input type="radio" name="input-radio-implicit"></label>
-	<label>(multiple) Label 2: <input type="radio" name="input-radio-implicit"></label>
-	<label>(multiple) Label 3: <input type="radio" name="input-radio-implicit"></label>
-	<p>
-	<label><input type="radio" name="input-radio-implicit"> (multiple) Label after 1</label>
-	<label><input type="radio" name="input-radio-implicit"> (multiple) Label after 2</label>
-	<label><input type="radio" name="input-radio-implicit"> (multiple) Label after 3</label>
-</form>
+ 
<form>
+	<label>(single) Label: <input type="radio"></label>
+	<p>
+	<label>(multiple) Label 1: <input type="radio" name="input-radio-implicit"></label>
+	<label>(multiple) Label 2: <input type="radio" name="input-radio-implicit"></label>
+	<label>(multiple) Label 3: <input type="radio" name="input-radio-implicit"></label>
+	<p>
+	<label><input type="radio" name="input-radio-implicit"> (multiple) Label after 1</label>
+	<label><input type="radio" name="input-radio-implicit"> (multiple) Label after 2</label>
+	<label><input type="radio" name="input-radio-implicit"> (multiple) Label after 3</label>
+</form>

Explicit labeling

@@ -518,17 +519,17 @@

Explicit labeling

- 
<form>
-	<label for="input-radio">(single) Label: </label><input id="input-radio" type="radio">
+	
<form>
+	<label for="input-radio">(single) Label: </label><input id="input-radio" type="radio">
 	<p>
-	<label for="input-radio-a1">(multiple) Label 1: </label><input id="input-radio-a1" type="radio" name="input-radio-explicit">
-	<label for="input-radio-a2">(multiple) Label 2: </label><input id="input-radio-a2" type="radio" name="input-radio-explicit">
-	<label for="input-radio-a3">(multiple) Label 3: </label><input id="input-radio-a3" type="radio" name="input-radio-explicit">
-	<p>
-	<input id="input-radio-b1" type="radio" name="input-radio-explicit"><label for="input-radio-b1"> (multiple) Label after 1</label>
-	<input id="input-radio-b2" type="radio" name="input-radio-explicit"><label for="input-radio-b2"> (multiple) Label after 2</label>
-	<input id="input-radio-b3" type="radio" name="input-radio-explicit"><label for="input-radio-b3"> (multiple) Label after 3</label>
-</form>

+	<label for="input-radio-a1">(multiple) Label 1: </label><input id="input-radio-a1" type="radio" name="input-radio-explicit">
+	<label for="input-radio-a2">(multiple) Label 2: </label><input id="input-radio-a2" type="radio" name="input-radio-explicit">
+	<label for="input-radio-a3">(multiple) Label 3: </label><input id="input-radio-a3" type="radio" name="input-radio-explicit">
+	<p>
+	<input id="input-radio-b1" type="radio" name="input-radio-explicit"><label for="input-radio-b1"> (multiple) Label after 1</label>
+	<input id="input-radio-b2" type="radio" name="input-radio-explicit"><label for="input-radio-b2"> (multiple) Label after 2</label>
+	<input id="input-radio-b3" type="radio" name="input-radio-explicit"><label for="input-radio-b3"> (multiple) Label after 3</label>
+</form>
@@ -538,18 +539,18 @@

Implicit labeling

- 
<form>
-	<label>Label: <input type="file"></label>
-</form>
+ 
<form>
+	<label>Label: <input type="file"></label>
+</form>

Explicit labeling

- 
<form>
-	<label for="input-file">Label: </label><input id="input-file" type="file">
-</form>
+ 
<form>
+	<label for="input-file">Label: </label><input id="input-file" type="file">
+</form>
@@ -560,12 +561,12 @@

Submit Button state (type=submit)

-
<form>
-	<input type="submit">
-</form>
-<form>
-	<input type="submit" value="Submit">
-</form>
+
<form>
+	<input type="submit">
+</form>
+<form>
+	<input type="submit" value="Submit">
+</form>

Image Button state (type=image)

Note: It will submit the coordinate of the mouse click on the image. @@ -573,17 +574,17 @@

Implicit labeling

-
<form>
-	<label>Label: <input type="image" src="img/input-image-sample.jpg" alt="Implicit image input type example"></label>
-</form>
+
<form>
+	<label>Label: <input type="image" src="img/input-image-sample.jpg" alt="Implicit image input type example"></label>
+</form>

Explicit labeling

-
<form>
-	<label for="input-image">Label: </label><input id="input-image" type="image" src="img/input-image-sample.jpg" alt="Explicit image input type example">
-</form>
+
<form>
+	<label for="input-image">Label: </label><input id="input-image" type="image" src="img/input-image-sample.jpg" alt="Explicit image input type example">
+</form>

Reset Button state (type=reset)

@@ -595,22 +596,22 @@

Reset Button state (type=reset)

-
<form>s
-	<label>Label: <input type="text" value="This is a value"></label>
+
<form>s
+	<label>Label: <input type="text" value="This is a value"></label>
 	<input type="reset">
-</form>
-<form>
-	<label>Label: <input type="text" value="This is a value"></label>
-	<input type="reset" value="Reset">
-</form>

+</form>
+<form>
+	<label>Label: <input type="text" value="This is a value"></label>
+	<input type="reset" value="Reset">
+</form>

Button state (type=button)

-
<form>
-	<input type="button" value="Button">
-</form>
+
<form>
+	<input type="button" value="Button">
+</form>

Common input element attributes

@@ -619,43 +620,43 @@

The value attribute

-
<form>
-	<label>Label: <input type="text" value="This is a value"></label>
-</form>
+
<form>
+	<label>Label: <input type="text" value="This is a value"></label>
+</form>

The readonly attribute

-
<form>
-	<label>Label: <input readonly value="this is a value"></label>
-</form>
+
<form>
+	<label>Label: <input readonly value="this is a value"></label>
+</form>

The disabled attribute

-
<form>
-	<label>Label: <input disabled value="this is a value"></label>
-</form>
+
<form>
+	<label>Label: <input disabled value="this is a value"></label>
+</form>

The placeholder attribute

-
<form>
-	<p><label>Description: <input type="text" name="desc" placeholder="My Email Account"></label></p>
-</form>
+
<form>
+	<p><label>Description: <input type="text" name="desc" placeholder="My Email Account"></label></p>
+</form>

The required attribute

-
<form>
-	<label>Label: <input required></label>
-	<input type="submit">
-</form>
+
<form>
+	<label>Label: <input required></label>
+	<input type="submit">
+</form>

The multiple attribute

@@ -664,12 +665,12 @@

The multiple attribute

-
<form>
-	<label>To: <input type=email multiple name=to></label>
-</form>
-<form>
-	<label>Attachments: <input type=file multiple name=att></label>
-</form>
+
<form>
+	<label>To: <input type=email multiple name=to></label>
+</form>
+<form>
+	<label>Attachments: <input type=file multiple name=att></label>
+</form>

The pattern attribute

@@ -679,13 +680,13 @@

The pattern attribute

-
<form>
-	<label> Part number:
+
<form>
+	<label> Part number:
 	<input pattern="[0-9][A-Z]{3}" name="part"
-		title="A part number is a digit followed by three uppercase letters."/>
-</label>
-<input type="submit">
-</form>

+		title="A part number is a digit followed by three uppercase letters."/>
+</label>
+<input type="submit">
+</form>

The maxlength and minlength attributes

@@ -693,27 +694,27 @@

The maxlength and minlength attributes

-
<form>
-	<p><label>What are you doing? <input name=status maxlength=25></label>
-	<p><label>Username: <input name=u required></label>
-	<p><label>Password: <input name=p required minlength=12></label>
-</form>
+
<form>
+	<p><label>What are you doing? <input name=status maxlength=25></label>
+	<p><label>Username: <input name=u required></label>
+	<p><label>Password: <input name=p required minlength=12></label>
+</form>

The size attribute

-
<form>
-	<label>Size <input size=50></label>
-</form>
+
<form>
+	<label>Size <input size=50></label>
+</form>

The min and max attributes

-
<form>
-	<label>Quantity <input name=quantity required="" type="number" min="1" max="10" value="1"></label>
-</form>
+
<form>
+	<label>Quantity <input name=quantity required="" type="number" min="1" max="10" value="1"></label>
+</form>

The step attribute

@@ -725,15 +726,15 @@

The step attribute

-
<form>
-	<label>Sleep start <input name="sleepStart" type=time min="21:00" max="06:00" step="60" value="00:00"></label>
-</form>
-<form>
-	<label>Opacity (256 steps) <input name=opacity type=range min=0 max=1 step=0.00392156863></label>
-</form>
-<form>
-	<label>Favority time (any steps) <input name=favtime type=time step=any></label>
-</form>
+
<form>
+	<label>Sleep start <input name="sleepStart" type=time min="21:00" max="06:00" step="60" value="00:00"></label>
+</form>
+<form>
+	<label>Opacity (256 steps) <input name=opacity type=range min=0 max=1 step=0.00392156863></label>
+</form>
+<form>
+	<label>Favority time (any steps) <input name=favtime type=time step=any></label>
+</form>

The list attribute

@@ -748,17 +749,17 @@

The list attribute

-
<form>
-	<label>Function types <input type="text" list="function-types"></label>
-	<datalist id="function-types">
-		<option value="function">function</option>
-		<option value="async function">async function</option>
-		<option value="function*">generator function</option>
-		<option value="=>">arrow function</option>
-		<option value="async =>">async arrow function</option>
-		<option value="async function*">async generator function</option>
-	</datalist>
-</form>
+
<form>
+	<label>Function types <input type="text" list="function-types"></label>
+	<datalist id="function-types">
+		<option value="function">function</option>
+		<option value="async function">async function</option>
+		<option value="function*">generator function</option>
+		<option value="=>">arrow function</option>
+		<option value="async =>">async arrow function</option>
+		<option value="async function*">async generator function</option>
+	</datalist>
+</form>

The button element

@@ -775,19 +776,19 @@

The button element

-
<form>
-	<button>Default</button>
-</form>
-<form>
-	<button type="submit">Submit</button>
-</form>
-<form>
-	<button type="reset">Reset</button>
-</form>
-<form>
-	<button type="button">Button</button>
-</form>
-<button type="button">Button in no form</button>
+
<form>
+	<button>Default</button>
+</form>
+<form>
+	<button type="submit">Submit</button>
+</form>
+<form>
+	<button type="reset">Reset</button>
+</form>
+<form>
+	<button type="button">Button</button>
+</form>
+<button type="button">Button in no form</button>

The select element

@@ -805,18 +806,18 @@

No default, explicit label

-
<form>
-<p>
-	<label for="unittype">Select unit type:</label>
-	<select id="unittype" name="unittype">
-		<option value="1"> Miner </option>
-		<option value="2"> Puffer </option>
-		<option value="3" selected> Snipey </option>
-		<option value="4"> Max </option>
-		<option value="5"> Firebot </option>
-	</select>
-</p>
-</form>
+
<form>
+<p>
+	<label for="unittype">Select unit type:</label>
+	<select id="unittype" name="unittype">
+		<option value="1"> Miner </option>
+		<option value="2"> Puffer </option>
+		<option value="3" selected> Snipey </option>
+		<option value="4"> Max </option>
+		<option value="5"> Firebot </option>
+	</select>
+</p>
+</form>

No default, implicit label

@@ -833,19 +834,19 @@

No default, implicit label

-
<form>
-<p>
-	<label>Select unit type:
-	<select name="unittype">
-		<option value="1"> Miner </option>
-		<option value="2"> Puffer </option>
-		<option value="3" selected> Snipey </option>
-		<option value="4"> Max </option>
-		<option value="5"> Firebot </option>
-	</select>
-	</label>
-</p>
-</form>
+
<form>
+<p>
+	<label>Select unit type:
+	<select name="unittype">
+		<option value="1"> Miner </option>
+		<option value="2"> Puffer </option>
+		<option value="3" selected> Snipey </option>
+		<option value="4"> Max </option>
+		<option value="5"> Firebot </option>
+	</select>
+	</label>
+</p>
+</form>

With placeholder

@@ -862,19 +863,19 @@

With placeholder

-
<form>
-<p>
-	<label for="unittypeplaceholder">Select unit type:</label>
-	<select id="unittypeplaceholder" name="unittypeplaceholder" required>
-	<option value=""> Select unit type </option>
-	<option value="1"> Miner </option>
-	<option value="2"> Puffer </option>
-	<option value="3"> Snipey </option>
-	<option value="4"> Max </option>
-	<option value="5"> Firebot </option>
-</select>
-</p>
-</form>
+
<form>
+<p>
+	<label for="unittypeplaceholder">Select unit type:</label>
+	<select id="unittypeplaceholder" name="unittypeplaceholder" required>
+	<option value=""> Select unit type </option>
+	<option value="1"> Miner </option>
+	<option value="2"> Puffer </option>
+	<option value="3"> Snipey </option>
+	<option value="4"> Max </option>
+	<option value="5"> Firebot </option>
+</select>
+</p>
+</form>

All selected

@@ -890,18 +891,18 @@

All selected

-
<form>
-<p>
-	<label for="allowedunits">Select unit types to enable on this map:</label>
-	<select id="allowedunits" name="allowedunits" multiple>
-		<option value="1" selected> Miner </option>
-		<option value="2" selected> Puffer </option>
-		<option value="3" selected> Snipey </option>
-		<option value="4" selected> Max </option>
-		<option value="5" selected> Firebot </option>
-	</select>
-</p>
-</form>
+
<form>
+<p>
+	<label for="allowedunits">Select unit types to enable on this map:</label>
+	<select id="allowedunits" name="allowedunits" multiple>
+		<option value="1" selected> Miner </option>
+		<option value="2" selected> Puffer </option>
+		<option value="3" selected> Snipey </option>
+		<option value="4" selected> Max </option>
+		<option value="5" selected> Firebot </option>
+	</select>
+</p>
+</form>

With option group (optgroup)

@@ -923,24 +924,24 @@

With option group (optgroup)

-
<form>
-	<p><label>Course:
-		<select name="c">
-			<optgroup label="8.01 Physics I: Classical Mechanics">
-				<option value="8.01.1">Lecture 01: Powers of Ten
-				<option value="8.01.2">Lecture 02: 1D Kinematics
-				<option value="8.01.3">Lecture 03: Vectors
-			<optgroup label="8.02 Electricity and Magnetism">
-				<option value="8.02.1">Lecture 01: What holds our world together?
-				<option value="8.02.2">Lecture 02: Electric Field
-				<option value="8.02.3">Lecture 03: Electric Flux
-			<optgroup label="8.03 Physics III: Vibrations and Waves">
-				<option value="8.03.1">Lecture 01: Periodic Phenomenon
-				<option value="8.03.2">Lecture 02: Beats
-				<option value="8.03.3">Lecture 03: Forced Oscillations with Damping
-		</select>
-	</label>
-</form>
+
<form>
+	<p><label>Course:
+		<select name="c">
+			<optgroup label="8.01 Physics I: Classical Mechanics">
+				<option value="8.01.1">Lecture 01: Powers of Ten
+				<option value="8.01.2">Lecture 02: 1D Kinematics
+				<option value="8.01.3">Lecture 03: Vectors
+			<optgroup label="8.02 Electricity and Magnetism">
+				<option value="8.02.1">Lecture 01: What holds our world together?
+				<option value="8.02.2">Lecture 02: Electric Field
+				<option value="8.02.3">Lecture 03: Electric Flux
+			<optgroup label="8.03 Physics III: Vibrations and Waves">
+				<option value="8.03.1">Lecture 01: Periodic Phenomenon
+				<option value="8.03.2">Lecture 02: Beats
+				<option value="8.03.3">Lecture 03: Forced Oscillations with Damping
+		</select>
+	</label>
+</form>

The datalist element

@@ -954,16 +955,16 @@

The datalist element

-
<form>
-<label>
+
<form>
+<label>
 	Animal:
-	<input name=animal list=animals>
-	<datalist id=animals>
-		<option value="Cat">
-		<option value="Dog">
-	</datalist>
-</label>
-</form>

+	<input name=animal list=animals>
+	<datalist id=animals>
+		<option value="Cat">
+		<option value="Dog">
+	</datalist>
+</label>
+</form>

textarea element

@@ -978,8 +979,8 @@

textarea element

...
-
<form>
-<label>Textarea: <textarea>Dear Madam Speaker,
+
<form>
+<label>Textarea: <textarea>Dear Madam Speaker,
 
 Regarding your letter dated ...
 
@@ -987,9 +988,9 @@ 
textarea element

 
 Yours Sincerely,
 
-...</textarea>
-</label>
-</form>

+...</textarea>
+</label>
+</form>

With placeholder text

@@ -1002,41 +1003,41 @@

With placeholder text

Daddy">
-
<form>
-<label>Textarea: <textarea placeholder="Dear Francine,
+
<form>
+<label>Textarea: <textarea placeholder="Dear Francine,
 
 They closed the parks this week, so we won't be able to
 meet your there. Should we just have dinner?
 
 Love,
-Daddy"></textarea>
-</label>
-</form>

+Daddy"></textarea>
+</label>
+</form>

The output element

-
<form>
-<output id="resultEmpty"></output>
-</form>
+
<form>
+<output id="resultEmpty"></output>
+</form>

With a value

With a non empty result
-
<form>
+
<form>
 <output id="resultNonEmpty">With a non empty result</output>
-</form>

+</form>

The progress element

-
<p><label>Progress: <progress id=p max=100 value="30"><span>30</span>%</progress></label></p>
+
<p><label>Progress: <progress id=p max=100 value="30"><span>30</span>%</progress></label></p>

Indeterminate state

-
<p><label>Loading: <progress></progress></label></p>
+
<p><label>Loading: <progress></progress></label></p>

The meter element

@@ -1052,18 +1053,18 @@

The meter element

-

<p><label>Measure 10%: <meter value="10" max="100">10 percent</meter></label>
-<p><label>Measure 60%: <meter value="60" max="100">60 percent</meter></label>
-<p><label>Low: <meter value="30" max="100" low="40" high="80">30 percent</meter></label>
-<p><label>Normal: <meter value="50" max="100" low="40" high="80">50 percent</meter></label>
-<p><label>High: <meter value="90" max="100" low="40" high="80">90 percent</meter></label>
-<p><label>Optimum value (39) is higher: <meter value="30" max="100" optimum="39">30 percent</meter></label>
-<p><label>Optimum value (39) is lower: <meter value="69" max="100" optimum="39">69 percent</meter></label>
-<p><label>Optimum value (39) is on it: <meter value="39" max="100" optimum="39">39 percent</meter></label>
-<p><label>Optimum value (default) is on it: <meter value="50" max="100">50 percent</meter></label>
-<p><label>Optimum region low: <meter value="20" max="100" low="40" high="80" optimum="30">20 percent</meter></label>
-<p><label>Optimum region normal: <meter value="50" max="100" low="40" high="80" optimum="51">50 percent</meter></label>
-<p><label>Optimum region high: <meter value="95" max="100" low="40" high="80" optimum="90">95 percent</meter></label>
+
<p><label>Measure 10%: <meter value="10" max="100">10 percent</meter></label>
+<p><label>Measure 60%: <meter value="60" max="100">60 percent</meter></label>
+<p><label>Low: <meter value="30" max="100" low="40" high="80">30 percent</meter></label>
+<p><label>Normal: <meter value="50" max="100" low="40" high="80">50 percent</meter></label>
+<p><label>High: <meter value="90" max="100" low="40" high="80">90 percent</meter></label>
+<p><label>Optimum value (39) is higher: <meter value="30" max="100" optimum="39">30 percent</meter></label>
+<p><label>Optimum value (39) is lower: <meter value="69" max="100" optimum="39">69 percent</meter></label>
+<p><label>Optimum value (39) is on it: <meter value="39" max="100" optimum="39">39 percent</meter></label>
+<p><label>Optimum value (default) is on it: <meter value="50" max="100">50 percent</meter></label>
+<p><label>Optimum region low: <meter value="20" max="100" low="40" high="80" optimum="30">20 percent</meter></label>
+<p><label>Optimum region normal: <meter value="50" max="100" low="40" high="80" optimum="51">50 percent</meter></label>
+<p><label>Optimum region high: <meter value="95" max="100" low="40" high="80" optimum="90">95 percent</meter></label>

The fieldset and legend element

@@ -1082,21 +1083,21 @@

The fieldset and legend element

-
<form>
-<fieldset>
-	<legend>Display</legend>
-	<p><label><input type=radio name=c value=0 checked> Black on White</label>
-	<p><label><input type=radio name=c value=1> White on Black</label>
-	<p><label><input type=checkbox name=g> Use grayscale</label>
-	<p><label>Enhance contrast <input type=range name=e list=contrast min=0 max=100 value=0 step=1></label>
-	<datalist id=contrast>
-		<option label=Normal value=0>
-		<option label=Middle value=50>
-		<option label="Middle high" value="78">
-		<option label=Maximum value=100>
-	</datalist>
-</fieldset>
-</form>
+
<form>
+<fieldset>
+	<legend>Display</legend>
+	<p><label><input type=radio name=c value=0 checked> Black on White</label>
+	<p><label><input type=radio name=c value=1> White on Black</label>
+	<p><label><input type=checkbox name=g> Use grayscale</label>
+	<p><label>Enhance contrast <input type=range name=e list=contrast min=0 max=100 value=0 step=1></label>
+	<datalist id=contrast>
+		<option label=Normal value=0>
+		<option label=Middle value=50>
+		<option label="Middle high" value="78">
+		<option label=Maximum value=100>
+	</datalist>
+</fieldset>
+</form>

Disabled fieldset

@@ -1110,17 +1111,17 @@

Disabled fieldset

-
<form>
-<fieldset name="clubfields" disabled>
-	<legend> <label>
-		<input type=checkbox name=club onchange="form.clubfields.disabled = !checked">
+
<form>
+<fieldset name="clubfields" disabled>
+	<legend> <label>
+		<input type=checkbox name=club onchange="form.clubfields.disabled = !checked">
 		Use Club Card
-	</label> </legend>
-	<p><label>Name on card: <input name=clubname required></label></p>
-	<p><label>Card number: <input name=clubnum required pattern="[-0-9]+"></label></p>
-	<p><label>Expiry date: <input name=clubexp type=month></label></p>
-</fieldset>
-</form>

+	</label> </legend>
+	<p><label>Name on card: <input name=clubname required></label></p>
+	<p><label>Card number: <input name=clubnum required pattern="[-0-9]+"></label></p>
+	<p><label>Expiry date: <input name=clubexp type=month></label></p>
+</fieldset>
+</form>

Grouping controls

@@ -1142,22 +1143,22 @@

Grouping controls

-
<form>
-<fieldset>
-	<legend> <h4>
+
<form>
+<fieldset>
+	<legend> <h4>
 		How can we best reach you?
-	</h4> </legend>
-	<p> <label>
-	<input type=radio checked name=contact_pref>
+	</h4> </legend>
+	<p> <label>
+	<input type=radio checked name=contact_pref>
 		Phone
-	</label> </p>
-	<p> <label>
-		<input type=radio name=contact_pref>
+	</label> </p>
+	<p> <label>
+		<input type=radio name=contact_pref>
 		Text
-	</label> </p>
-	<p> <label>
-		<input type=radio name=contact_pref>
+	</label> </p>
+	<p> <label>
+		<input type=radio name=contact_pref>
 		Email
-	</label> </p>
-</fieldset>
-</form>

+	</label> </p>
+</fieldset>
+</form>
diff --git a/common/utilities/helpers/forms.html b/common/utilities/helpers/forms.html new file mode 100644 index 000000000..5c540d4a6 --- /dev/null +++ b/common/utilities/helpers/forms.html @@ -0,0 +1,329 @@ +--- +{ + "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 000000000..9436e286a --- /dev/null +++ b/common/utilities/helpers/formulaires.html @@ -0,0 +1,333 @@ +--- +{ + "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.

+
+ + +

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/index.json-ld b/common/utilities/helpers/index.json-ld new file mode 100644 index 000000000..6a2c8cc01 --- /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": "Utilities", + "fr": "Utilitaires" + }, + "description": { + "en": "HTML elements used as is.", + "fr": "Les éléments HTML utilisé tel quel." + }, + "modified": "2023-02-21", + "componentName": "Utilities", + "processing": "baseline", + "status": "stable", + "pages": { + "examples": [ + { + "title": "Forms", + "language": "en", + "path": "forms.html" + }, + { + "title": "Formulaires", + "language": "fr", + "path": "formulaires.html" + } + ] + } +}