Used <fieldset> and <legend> to group related inputs. (#158)

django-crispy-forms · Dec 15, 2023 · 668e66d · 668e66d
1 parent 2737939
commit 668e66d
Show file tree

Hide file tree

Showing 20 changed files with 263 additions and 224 deletions.
diff --git a/crispy_bootstrap5/templates/bootstrap5/field.html b/crispy_bootstrap5/templates/bootstrap5/field.html
@@ -11,9 +11,11 @@
     {% endif %}
     <{% if tag %}{{ tag }}{% else %}div{% endif %} id="div_{{ field.auto_id }}" class="{% if field|is_checkbox and form_show_labels %}form-check{% else %}mb-3{% if 'form-horizontal' in form_class %} row{% endif %}{% endif %}{% if wrapper_class %} {{ wrapper_class }}{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}">
         {% if field.label and not field|is_checkbox and form_show_labels %}
-            <label {% if field.id_for_label %}for="{{ field.id_for_label }}"{% endif %} class="{% if 'form-horizontal' in form_class %}col-form-label{% else %}form-label{% endif %}{% if label_class %} {{ label_class }}{% endif %}{% if field.field.required %} requiredField{% endif %}">
+            {% if field.use_fieldset %}<fieldset{% if 'form-horizontal' in form_class %} class="row"{% endif %}>{% endif %}
+            <{% if field.use_fieldset %}legend{% else %}label{% endif %}
+                {% if field.id_for_label %}for="{{ field.id_for_label }}"{% endif %} class="{% if 'form-horizontal' in form_class %}col-form-label pt-0{% else %}form-label{% endif %}{% if label_class %} {{ label_class }}{% endif %}{% if field.field.required %} requiredField{% endif %}">
                 {{ field.label }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}
-            </label>
+            </{% if field.use_fieldset %}legend{% else %}label{% endif %}>
         {% endif %}
 
         {% if field|is_checkboxselectmultiple or field|is_radioselect %}
@@ -58,6 +60,7 @@
                 {% if field_class %}</div>{% endif %}
             {% endif %}
         {% endif %}
+        {% if field.use_fieldset and field.label and form_show_labels %}</fieldset>{% endif %}
     </{% if tag %}{{ tag }}{% else %}div{% endif %}>
     {% if field|is_checkbox and tag != "td" %}
         {% if label_class %}

diff --git a/crispy_bootstrap5/templates/bootstrap5/layout/checkboxselectmultiple_inline.html b/crispy_bootstrap5/templates/bootstrap5/layout/checkboxselectmultiple_inline.html
@@ -4,11 +4,13 @@
     <div id="div_{{ field.auto_id }}" class="mb-3{% if 'form-horizontal' in form_class %} row{% endif %}{% if wrapper_class %} {{ wrapper_class }}{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}">
 
         {% if field.label %}
-            <label for="{{ field.id_for_label }}"  class="{{ label_class }}{% if not inline_class %} col-form-label{% else %} form-label{% endif %}{% if field.field.required %} requiredField{% endif %}">
+            <fieldset{% if 'form-horizontal' in form_class %} class="row"{% endif %}>
+            <legend for="{{ field.id_for_label }}"  class="{{ label_class }}{% if 'form-horizontal' in form_class %} col-form-label pt-0{% else %} form-label{% endif %}{% if field.field.required %} requiredField{% endif %}">
                 {{ field.label }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}
-            </label>
+            </legend>
         {% endif %}
 
         {% include 'bootstrap5/layout/radio_checkbox_select.html' %}
+        {% if field.label %}</fieldset>{% endif %}
     </div>
 {% endif %}
diff --git a/crispy_bootstrap5/templates/bootstrap5/layout/radioselect_inline.html b/crispy_bootstrap5/templates/bootstrap5/layout/radioselect_inline.html
@@ -4,11 +4,13 @@
     <div id="div_{{ field.auto_id }}" class="mb-3{% if 'form-horizontal' in form_class %} row{% endif %}{% if wrapper_class %} {{ wrapper_class }}{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}">
 
         {% if field.label %}
-            <label for="{{ field.id_for_label }}"  class="{{ label_class }}{% if not inline_class %} col-form-label{% else %} form-label{% endif %}{% if field.field.required %} requiredField{% endif %}">
+            <fieldset{% if 'form-horizontal' in form_class %} class="row"{% endif %}>
+            <legend for="{{ field.id_for_label }}"  class="{{ label_class }}{% if 'form-horizontal' in form_class %} col-form-label pt-0{% else %} form-label{% endif %}{% if field.field.required %} requiredField{% endif %}">
                 {{ field.label }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}
-            </label>
+            </legend>
         {% endif %}
 
         {% include 'bootstrap5/layout/radio_checkbox_select.html' %}
+        {% if field.label %}</fieldset>{% endif %}
     </div>
 {% endif %}
diff --git a/tests/results/checkboxes.html b/tests/results/checkboxes.html
@@ -1,19 +1,21 @@
 <form method="post">
     <div class="mb-3" id="div_id_checkboxes">
-        <label class="form-label requiredField">Checkboxes<span class="asteriskField">*</span></label>
-        <div>
-            <div class="form-check">
-                <input checked="checked" class="form-check-input" id="id_checkboxes_0" name="checkboxes" type="checkbox"
-                    value="1" /><label class="form-check-label" for="id_checkboxes_0">Option one</label>
+        <fieldset>
+            <legend class="form-label requiredField">Checkboxes<span class="asteriskField">*</span></legend>
+            <div>
+                <div class="form-check">
+                    <input checked="checked" class="form-check-input" id="id_checkboxes_0" name="checkboxes" type="checkbox"
+                        value="1" /><label class="form-check-label" for="id_checkboxes_0">Option one</label>
+                </div>
+                <div class="form-check">
+                    <input class="form-check-input" id="id_checkboxes_1" name="checkboxes" type="checkbox"
+                        value="2" /><label class="form-check-label" for="id_checkboxes_1">Option two</label>
+                </div>
+                <div class="form-check">
+                    <input class="form-check-input" id="id_checkboxes_2" name="checkboxes" type="checkbox"
+                        value="3" /><label class="form-check-label" for="id_checkboxes_2">Option three</label>
+                </div>
             </div>
-            <div class="form-check">
-                <input class="form-check-input" id="id_checkboxes_1" name="checkboxes" type="checkbox"
-                    value="2" /><label class="form-check-label" for="id_checkboxes_1">Option two</label>
-            </div>
-            <div class="form-check">
-                <input class="form-check-input" id="id_checkboxes_2" name="checkboxes" type="checkbox"
-                    value="3" /><label class="form-check-label" for="id_checkboxes_2">Option three</label>
-            </div>
-        </div>
+        </fieldset>
     </div>
 </form>
diff --git a/tests/results/inline_checkboxes.html b/tests/results/inline_checkboxes.html
@@ -1,19 +1,21 @@
 <form method="post">
     <div id="div_id_checkboxes" class="mb-3">
-        <label for="" class=" form-label requiredField">Checkboxes<span class="asteriskField">*</span></label>
-        <div>
-            <div class="form-check form-check-inline">
-                <input type="checkbox" class="form-check-input" name="checkboxes" value="1" id="id_checkboxes_0" checked>
-                <label for="id_checkboxes_0" class="form-check-label">Option one</label>
+        <fieldset>
+            <legend for="" class=" form-label requiredField">Checkboxes<span class="asteriskField">*</span></legend>
+            <div>
+                <div class="form-check form-check-inline">
+                    <input type="checkbox" class="form-check-input" name="checkboxes" value="1" id="id_checkboxes_0" checked>
+                    <label for="id_checkboxes_0" class="form-check-label">Option one</label>
+                </div>
+                <div class="form-check form-check-inline">
+                    <input type="checkbox" class="form-check-input" name="checkboxes" value="2" id="id_checkboxes_1">
+                    <label for="id_checkboxes_1" class="form-check-label">Option two</label>
+                </div>
+                <div class="form-check form-check-inline">
+                    <input type="checkbox" class="form-check-input" name="checkboxes" value="3" id="id_checkboxes_2">
+                    <label for="id_checkboxes_2" class="form-check-label">Option three</label>
+                </div>
             </div>
-            <div class="form-check form-check-inline">
-                <input type="checkbox" class="form-check-input" name="checkboxes" value="2" id="id_checkboxes_1">
-                <label for="id_checkboxes_1" class="form-check-label">Option two</label>
-            </div>
-            <div class="form-check form-check-inline">
-                <input type="checkbox" class="form-check-input" name="checkboxes" value="3" id="id_checkboxes_2">
-                <label for="id_checkboxes_2" class="form-check-label">Option three</label>
-            </div>
-        </div>
+        </fieldset>
     </div>
 </form>
diff --git a/tests/results/inline_checkboxes_failing.html b/tests/results/inline_checkboxes_failing.html
@@ -1,6 +1,7 @@
 <form method="post">
     <div id="div_id_checkboxes" class="mb-3">
-        <label for=""  class=" form-label requiredField">Checkboxes<span class="asteriskField">*</span></label>
+        <fieldset>
+        <legend for=""  class=" form-label requiredField">Checkboxes<span class="asteriskField">*</span></legend>
         <div>
             <div class="form-check form-check-inline">
                 <input type="checkbox" class="form-check-input is-invalid"  name="checkboxes" value="1"  id="id_checkboxes_0" aria-invalid="true">
@@ -16,5 +17,6 @@
             </div>
         </div>
         <p id="error_1_id_checkboxes" class="invalid-feedback"><strong>This field is required.</strong></p>
+        </fieldset>
     </div>
 </form>
diff --git a/tests/results/inline_checkboxes_failing_lt50.html b/tests/results/inline_checkboxes_failing_lt50.html
@@ -1,6 +1,7 @@
 <form method="post">
     <div id="div_id_checkboxes" class="mb-3">
-        <label for=""  class=" form-label requiredField">Checkboxes<span class="asteriskField">*</span></label>
+        <fieldset>
+        <legend for=""  class=" form-label requiredField">Checkboxes<span class="asteriskField">*</span></legend>
         <div>
             <div class="form-check form-check-inline">
                 <input type="checkbox" class="form-check-input is-invalid"  name="checkboxes" value="1"  id="id_checkboxes_0">
@@ -16,5 +17,6 @@
             </div>
         </div>
         <p id="error_1_id_checkboxes" class="invalid-feedback"><strong>This field is required.</strong></p>
+        </fieldset>
     </div>
 </form>
diff --git a/tests/results/inline_radios.html b/tests/results/inline_radios.html
@@ -1,15 +1,17 @@
 <form method="post">
     <div id="div_id_inline_radios" class="mb-3">
-        <label for="" class=" form-label requiredField">Inline radios<span class="asteriskField">*</span></label>
-        <div>
-            <div class="form-check form-check-inline">
-                <input type="radio" class="form-check-input" name="inline_radios" value="option_one" id="id_inline_radios_0" required>
-                <label for="id_inline_radios_0" class="form-check-label">Option one</label>
+        <fieldset>
+            <legend for="" class=" form-label requiredField">Inline radios<span class="asteriskField">*</span></legend>
+            <div>
+                <div class="form-check form-check-inline">
+                    <input type="radio" class="form-check-input" name="inline_radios" value="option_one" id="id_inline_radios_0" required>
+                    <label for="id_inline_radios_0" class="form-check-label">Option one</label>
+                </div>
+                <div class="form-check form-check-inline">
+                    <input type="radio" class="form-check-input" name="inline_radios" value="option_two" id="id_inline_radios_1" required checked>
+                    <label for="id_inline_radios_1" class="form-check-label">Option two</label>
+                </div>
             </div>
-            <div class="form-check form-check-inline">
-                <input type="radio" class="form-check-input" name="inline_radios" value="option_two" id="id_inline_radios_1" required checked>
-                <label for="id_inline_radios_1" class="form-check-label">Option two</label>
-            </div>
-        </div>
+        </fieldset>
     </div>
 </form>
diff --git a/tests/results/inline_radios_failing.html b/tests/results/inline_radios_failing.html
@@ -1,6 +1,7 @@
 <form  method="post" >
     <div id="div_id_inline_radios" class="mb-3">
-        <label for=""  class=" form-label requiredField">Inline radios<span class="asteriskField">*</span></label>
+        <fieldset>
+        <legend for=""  class=" form-label requiredField">Inline radios<span class="asteriskField">*</span></legend>
         <div>
             <div class="form-check form-check-inline">
                 <input type="radio" class="form-check-input is-invalid"  name="inline_radios" value="option_one"  id="id_inline_radios_0" required aria-invalid="true">
@@ -12,5 +13,6 @@
             </div>
         </div>
         <p id="error_1_id_inline_radios" class="invalid-feedback"><strong>This field is required.</strong></p>
+        </fieldset>
     </div>
 </form>
diff --git a/tests/results/inline_radios_failing_lt50.html b/tests/results/inline_radios_failing_lt50.html
@@ -1,6 +1,7 @@
 <form  method="post" >
     <div id="div_id_inline_radios" class="mb-3">
-        <label for=""  class=" form-label requiredField">Inline radios<span class="asteriskField">*</span></label>
+        <fieldset>
+        <legend for=""  class=" form-label requiredField">Inline radios<span class="asteriskField">*</span></legend>
         <div>
             <div class="form-check form-check-inline">
                 <input type="radio" class="form-check-input is-invalid"  name="inline_radios" value="option_one"  id="id_inline_radios_0" required>
@@ -12,5 +13,6 @@
             </div>
         </div>
         <p id="error_1_id_inline_radios" class="invalid-feedback"><strong>This field is required.</strong></p>
+        </fieldset>
     </div>
 </form>
diff --git a/tests/results/radio.html b/tests/results/radio.html
@@ -1,48 +1,48 @@
 <form method="post">
   <div id="div_id_radio" class="mb-3">
-    <label class="form-label requiredField"
-      > Radio<span class="asteriskField">*</span>
-    </label>
-    <div>
-      <div class="form-check">
-        <input
-          type="radio"
-          class="form-check-input"
-          name="radio"
-          id="id_radio_0"
-          value="1"
-          required
-        />
-        <label for="id_radio_0" class="form-check-label"
-          > Option one
-        </label>
-      </div>
-      <div class="form-check">
-        <input
-          type="radio"
-          class="form-check-input"
-          name="radio"
-          id="id_radio_1"
-          value="2"
-          required
-        />
-        <label for="id_radio_1" class="form-check-label"
-          > Option two
-        </label>
-      </div>
-      <div class="form-check">
-        <input
-          type="radio"
-          class="form-check-input"
-          name="radio"
-          id="id_radio_2"
-          value="3"
-          required
-        />
-        <label for="id_radio_2" class="form-check-label"
-          > Option three
-        </label>
-      </div>
-    </div>
+    <fieldset>
+        <legend class="form-label requiredField"> Radio<span class="asteriskField">*</span></legend>
+        <div>
+          <div class="form-check">
+            <input
+              type="radio"
+              class="form-check-input"
+              name="radio"
+              id="id_radio_0"
+              value="1"
+              required
+            />
+            <label for="id_radio_0" class="form-check-label"
+              > Option one
+            </label>
+          </div>
+          <div class="form-check">
+            <input
+              type="radio"
+              class="form-check-input"
+              name="radio"
+              id="id_radio_1"
+              value="2"
+              required
+            />
+            <label for="id_radio_1" class="form-check-label"
+              > Option two
+            </label>
+          </div>
+          <div class="form-check">
+            <input
+              type="radio"
+              class="form-check-input"
+              name="radio"
+              id="id_radio_2"
+              value="3"
+              required
+            />
+            <label for="id_radio_2" class="form-check-label"
+              > Option three
+            </label>
+          </div>
+        </div>
+    </fieldset>
   </div>
 </form>
diff --git a/tests/results/test_grouped_checkboxes.html b/tests/results/test_grouped_checkboxes.html
@@ -1,25 +1,27 @@
 <form method="post">
-    <div class="mb-3" id="div_id_checkbox_select_multiple"><label class="form-label requiredField">Checkbox select
-            multiple<span class="asteriskField">*</span></label>
-        <div><strong>Audio</strong>
-            <div class="form-check"><input class="form-check-input" id="id_checkbox_select_multiple_0_0"
-                    name="checkbox_select_multiple" type="checkbox" value="vinyl"><label class="form-check-label"
-                    for="id_checkbox_select_multiple_0_0">Vinyl</label></div>
-            <div class="form-check"><input class="form-check-input" id="id_checkbox_select_multiple_0_1"
-                    name="checkbox_select_multiple" type="checkbox" value="cd"><label class="form-check-label"
-                    for="id_checkbox_select_multiple_0_1">CD</label></div><strong>Video</strong>
-            <div class="form-check"><input class="form-check-input" id="id_checkbox_select_multiple_1_0"
-                    name="checkbox_select_multiple" type="checkbox" value="vhs"><label class="form-check-label"
-                    for="id_checkbox_select_multiple_1_0">VHS Tape</label></div>
-            <div class="form-check"><input class="form-check-input" id="id_checkbox_select_multiple_1_1"
-                    name="checkbox_select_multiple" type="checkbox" value="dvd"><label class="form-check-label"
-                    for="id_checkbox_select_multiple_1_1">DVD</label></div>
-            <div class="form-check"><input class="form-check-input" id="id_checkbox_select_multiple_2"
-                    name="checkbox_select_multiple" type="checkbox" value="unknown"><label class="form-check-label"
-                    for="id_checkbox_select_multiple_2">Unknown</label></div>
-        </div>
-        <div class="form-text">
-            help
-        </div>
+    <div class="mb-3" id="div_id_checkbox_select_multiple">
+        <fieldset>
+            <legend class="form-label requiredField">Checkbox select multiple<span class="asteriskField">*</span></legend>
+            <div><strong>Audio</strong>
+                <div class="form-check"><input class="form-check-input" id="id_checkbox_select_multiple_0_0"
+                        name="checkbox_select_multiple" type="checkbox" value="vinyl"><label class="form-check-label"
+                        for="id_checkbox_select_multiple_0_0">Vinyl</label></div>
+                <div class="form-check"><input class="form-check-input" id="id_checkbox_select_multiple_0_1"
+                        name="checkbox_select_multiple" type="checkbox" value="cd"><label class="form-check-label"
+                        for="id_checkbox_select_multiple_0_1">CD</label></div><strong>Video</strong>
+                <div class="form-check"><input class="form-check-input" id="id_checkbox_select_multiple_1_0"
+                        name="checkbox_select_multiple" type="checkbox" value="vhs"><label class="form-check-label"
+                        for="id_checkbox_select_multiple_1_0">VHS Tape</label></div>
+                <div class="form-check"><input class="form-check-input" id="id_checkbox_select_multiple_1_1"
+                        name="checkbox_select_multiple" type="checkbox" value="dvd"><label class="form-check-label"
+                        for="id_checkbox_select_multiple_1_1">DVD</label></div>
+                <div class="form-check"><input class="form-check-input" id="id_checkbox_select_multiple_2"
+                        name="checkbox_select_multiple" type="checkbox" value="unknown"><label class="form-check-label"
+                        for="id_checkbox_select_multiple_2">Unknown</label></div>
+            </div>
+            <div class="form-text">
+                help
+            </div>
+        </fieldset>
     </div>
 </form>