form improvements with new types of field: header and switch

Author: olivierauverlot

examples/official-site/sqlpage/migrations/01_documentation.sql

@@ -347,6 +347,24 @@ When loading the page, the value for `:username` will be `NULL` if no value has
     json('[{"component":"form"}, '||
     '{"name": "Your account", "prefix_icon": "mail", "prefix": "Email:", "suffix": "@mydomain.com"}, ' ||
     ']')),
+
+    ('form','With the header type, you can group your input fields based on a theme. For example, you can categorize fields according to a person''s identity and their contact information.',
+    json('[{"component":"form","title":"Information about the person"}, '||
+    '{"type": "header", "label": "Identity"},' ||
+    '{"name": "Name"},' ||
+    '{"name": "Surname"},' ||
+    '{"type": "header","label": "Contact"},' ||
+    '{"name": "phone", "label": "Phone number"},' ||
+    '{"name": "Email"},' ||
+    ']')),
+
+ ('form','A toggle switch in an HTML form is a user interface element that allows users to switch between two states, typically "on" and "off." It visually resembles a physical switch and is often used for settings or options that can be enabled or disabled.',
+    json('[{"component":"form"}, '||
+    '{"type": "switch", "label": "Dark theme", "description": "Enable dark theme"},' ||
+    '{"type": "switch", "label": "A required toggle switch", "required": true},' ||
+    '{"type": "switch", "label": "A disabled toggle switch", "disabled": true},' ||
+    ']')),
+
     ('form', 'This example illustrates the use of the `select` type.
 In this select input, the various options are hardcoded, but they could also be loaded from a database table,
 [using a function to convert the rows into a json array](/blog.sql?post=JSON%20in%20SQL%3A%20A%20Comprehensive%20Guide) like 

sqlpage/templates/form.handlebars

@@ -15,6 +15,9 @@
         {{/if}}
         <div class="row">
             {{#each_row}}
+            {{#if (eq type "header")}}
+                <h3 class="text-center mb-2"{{#if id}} id="{{id}}"{{/if}}>{{label}}</h3>
+            {{else}}
             {{#if (or (eq type "radio") (eq type "checkbox"))}}
                 <div class="form-selectgroup form-selectgroup-boxes d-flex flex-column mx-0 my-1 col-md-{{default width 12}}">
                     <label class="form-selectgroup-item flex-fill mx-0">
@@ -39,6 +42,25 @@
                     </label>
                 </div>
             {{else}}
+            {{~#if (eq type "switch")}}
+                <div class="form-selectgroup form-selectgroup-boxes d-flex flex-column mx-0 my-1 col-md-{{default width 12}}">
+                    <label class="form-check form-switch">
+                        <input class="form-check-input" type="checkbox" {{#if id}}id="{{id}}" {{/if}}name="{{name}}" value="{{value}}"{{#if required}} required{{/if}}{{#if checked}} checked{{/if}}{{#if disabled}} disabled{{/if~}}/>
+                        <span class="form-check-label">
+                                {{default label value}}
+                                {{~#if required}}
+                                    <span class="text-danger ms-1" aria-label="required" title="required">*</span>
+                                {{/if}}
+                                {{#if description}}
+                                    <small class="form-hint mt-0">{{description}}</small>
+                                {{/if}}
+                                {{#if description_md}}
+                                    <small class="form-hint mt-0">{{{markdown description_md}}}</small>
+                                {{/if}}
+                        </span>
+                    </label>
+                </div>
+            {{else}}
             {{~#if (eq type "hidden")}}
                 <input type="hidden" name="{{name}}" {{#if id}}id="{{id}}" {{/if}}value="{{value}}">
             {{else}}
@@ -129,9 +151,11 @@
                     {{~#if description_md~}}
                         <small class="form-hint mt-0">{{{markdown description_md}}}</small>
                     {{~/if~}}
-                </label>
+                </label>   
             {{~/if~}}
             {{/if}}
+            {{/if}}
+            {{/if}}
             {{#if (eq type "file")}}
                 <!-- Change the form encoding type if this is a file input-->
                 {{#delay}}formenctype="multipart/form-data"{{/delay}}