From 7ba737379d3655841dde48a343fe09fb9fae3539 Mon Sep 17 00:00:00 2001 From: AtlakM Date: Tue, 19 Mar 2024 16:39:49 -0400 Subject: [PATCH] added form elements from https://github.com/wet-boew/GCWeb/pull/2234#pullrequestreview-1936941204 --- common/utilities/forms.html | 295 +++++++++++++++++++++++++++++++++--- 1 file changed, 271 insertions(+), 24 deletions(-) diff --git a/common/utilities/forms.html b/common/utilities/forms.html index a5e243091..207f5beb3 100644 --- a/common/utilities/forms.html +++ b/common/utilities/forms.html @@ -54,9 +54,38 @@

Form controls

+
+ + + +
+ +
+ + + + + + +
+ +
+ + + + + + +
-
<form>
+
<form>
 	<div class="form-group">
 		<label for="exampleFormControlInput1">Email address</label>
 		<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com" />
@@ -85,7 +114,35 @@ 
Form controls

 		<label for="exampleFormControlTextarea1">Example textarea</label>
 		<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
 	</div>
-</form>
+ </form> + <div class="form-group form-horizontal"> + <label for="form-control-static-ex1"><p class="form-control-static"> + <input type="text" name="form-control-static-ex1" class="input-sm" id="inlineFormBlock4" value="input 1" /> + text</p></label> + <label for="form-control-static-ex2"><p class="form-control-static"> + <input type="checkbox" name="form-control-static-ex2" class="input-sm" id="inlineFormBlock5" value="input 2" /> + checkbox</p></label> + <label for="form-control-static-ex3"><p class="form-control-static"> + <input type="button" name="form-control-static-ex3" class="input-sm" id="inlineFormBlock6" value="input 3" /> + button</p></label> + </div> + <div class="form-group form-group-sm"> + <label for="exampleFormControl2">Example select</label> + <select id="exampleFormControl2"><option value='1'>1</option><option value='2'>2</option></select> + <label for="exampleFormControl3">Example textarea</label> + <textarea class="form-control" id="exampleFormControl3" rows="3"></textarea> + <label class="form-control-static" for="exampleFormControl4">Example multiple select</label> + <select id="exampleFormControl4" multiple ><option value='1'>1</option><option value='2'>2</option></select> + </div> + <div class="form-group form-group-lg"> + <label for="exampleFormControl5">Example select</label> + <select id="exampleFormControl5"><option value='1'>1</option><option value='2'>2</option></select> + <label for="exampleFormControl6">Example textarea</label> + <textarea class="form-control" id="exampleFormControl6" rows="3"></textarea> + <label class="form-control-static" for="exampleFormControl7">Example multiple select</label> + <select id="exampleFormControl7" multiple ><option value='1'>1</option><option value='2'>2</option></select> + </div> +

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

@@ -96,12 +153,13 @@

Form controls

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

Sizing

@@ -113,9 +171,9 @@

Sizing

-
<input class="form-control .input-lg" type="text" placeholder=".form-control .input-lg" />
+
<input class="form-control .input-lg" type="text" placeholder=".form-control .input-lg" />
 <input class="form-control" type="text" placeholder="Default input" />
-<input class="form-control .input-sm" type="text" placeholder=".form-control .input-sm" />
+<input class="form-control .input-sm" type="text" placeholder=".form-control .input-sm" /> -
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
+
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

Readonly plain text

@@ -312,7 +370,7 @@

Readonly plain text

-
<form>
+
<form>
 	<div class="form-group">
 		<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
 		<div class="col-sm-10">
@@ -325,7 +383,7 @@ 
Readonly plain text

 			<input type="password" class="form-control" id="inputPassword" placeholder="Password" />
 		</div>
 	</div>
-</form>
+</form>
@@ -339,7 +397,7 @@

Readonly plain text

-
<form class="form-inline">
+
<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" />
@@ -350,7 +408,7 @@ 
Readonly plain text

 	</div>
 	<button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
 </form>
-
+

Checkboxes and radios

@@ -396,7 +454,7 @@

Default (stacked)

Second default radio
-
+
-

+

+	

+		
+	

+	

+		
+	

+	

+		
+	

+	

+		
+	

+

+
+

+	

+		
+	

+	

+		
+	

+	

+		
+	

+	

+		
+	

+

+
+
+

+	
+	
+	
+

+
+

+	
+	
+	
+

+
+

+	
+	
+	
+

+
+

+	
+	

+		
+		
+	

+

+
+

 <div class="btn-group input-group-btn">
 	<input class="btn" type="button" id="btnGroup1" value="button 1" />
 	<input class="btn" type="button" id="btnGroup2" value="button 2" />
@@ -580,10 +720,117 @@ 
Button groups

 	<input class="btn" type="button" id="btnGroup8" value="button 8" />
 	<input class="btn" type="button" id="btnGroup9" value="button 9" />
 </div>
-
+<div class="input-group-lg"> + <div class="form-control"> + <input class="btn input-lg" type="button" id="btnGroup10" value="button 10" /> + </div> + <div class="input-group-addon"> + <input class="btn input-lg" type="button" id="btnGroup11" value="button 11" /> + </div> + <div class="input-group-btn"> + <input class="btn input-lg" type="button" id="btnGroup12" value="button 12" /> + </div> + <div class="form-control"> + <input class="input-lg" type="checkbox" id="chkGroup13" value="checkbox 13" /> + </div> +</div> + +<div class="input-group-sm"> + <div class="form-control"> + <input class="btn input-sm" type="button" id="btnGroup14" value="button 14" /> + </div> + <div class="input-group-addon"> + <input class="btn input-sm" type="button" id="btnGroup15" value="button 15" /> + </div> + <div class="input-group-btn"> + <input class="btn input-sm" type="button" id="btnGroup16" value="button 16" /> + </div> + <div class="form-control"> + <input class="input-sm" type="checkbox" id="chkGroup17" value="checkbox 17" /> + </div> +</div> +<div class="btn-group-xs"> + <input class="btn" type="button" id="btnGroup18" value="button 18" /> + <input class="btn" type="button" id="btnGroup19" value="button 19" /> + <input class="btn" type="button" id="btnGroup20" value="button 20" /> +</div> + +<div class="btn-group-sm"> + <input class="btn" type="button" id="btnGroup21" value="button 21" /> + <input class="btn" type="button" id="btnGroup22" value="button 22" /> + <input class="btn" type="button" id="btnGroup23" value="button 23" /> +</div> + +<div class="btn-group-lg"> + <input class="btn" type="button" id="btnGroup24" value="button 24" /> + <input class="btn" type="button" id="btnGroup25" value="button 25" /> + <input class="btn" type="button" id="btnGroup26" value="button 26" /> +</div> + +<div class="btn-group-justified"> + <input class="btn" type="button" id="btnGroup27" value="button 27" /> + <div class="btn-group"> + <input class="btn" type="button" id="btnGroup28" value="button 28" /> + <input class="btn" type="button" id="btnGroup29" value="button 29" /> + </div> +</div> + + +

gc-font-2019 example

+ +
+
+ gc-font-2019 example +
+ +
+ +
+
+
+ +
+ +
+
+
+ + + +
+
+ +
+ +

+<form class="gc-font-2019">
+	<fieldset>
+		<legend>gc-font-2019 example</legend>
+		<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>
+		<div class="form-group">
+			<input class="btn btn-lg" type="checkbox" id="gc-font-2019-checkbox" value="checkbox" />
+			<input class="btn btn-lg" type="radio" id="gc-font-2019-radio" value="radio" />
+			<input class="btn btn-lg" type="submit" id="gc-font-2019-submit" value="submit" />
+		</div>
+	</fieldset> 
+
+</form>
+
+

Validation states

Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add @@ -691,7 +938,7 @@

WET-BOEW search bar

-

+

 <div id="wb-srch" class="srch-pnl">
 	<div class="form-control">
 		<input type="text" id="srchFormBlock1" value="srch" placeholder="srch-pnl" />
@@ -704,7 +951,7 @@ 
WET-BOEW search bar

 		<label for="wbORsubmit">srch-pnl</label>
 	</div>
 </div>
-
+

WET-BOEW Form inline override