Skip to content

Commit

Permalink
Used <fieldset> and <legend> to group related inputs.
Browse files Browse the repository at this point in the history
  • Loading branch information
@smithdc1
smithdc1 committed Oct 31, 2023
1 parent 516ae09 commit 1c63954
Show file tree
Hide file tree
Showing 13 changed files with 225 additions and 197 deletions.
9 changes: 7 additions & 2 deletions crispy_bootstrap5/templates/bootstrap5/field.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,14 @@
{% endif %}
{% endif %}
<{% if tag %}{{ tag }}{% else %}div{% endif %} id="div_{{ field.auto_id }}" class="mb-3{% if field|is_checkbox and form_show_labels %} form-check{% else %}{% 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>{% 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{% 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 %}
Expand Down Expand Up @@ -58,6 +62,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 %}
Expand Down
6 changes: 4 additions & 2 deletions crispy_bootstrap5/templates/bootstrap5/layout/checkboxselectmultiple_inline.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
<legend 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 %}">
{{ 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 %}
6 changes: 4 additions & 2 deletions crispy_bootstrap5/templates/bootstrap5/layout/radioselect_inline.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
<legend 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 %}">
{{ 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 %}
30 changes: 16 additions & 14 deletions tests/results/checkboxes.html
View file
Original file line number Diff line number Diff line change
@@ -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>
88 changes: 44 additions & 44 deletions tests/results/radio.html
View file
Original file line number Diff line number Diff line change
@@ -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>
46 changes: 24 additions & 22 deletions tests/results/test_grouped_checkboxes.html
View file
Original file line number Diff line number Diff line change
@@ -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>
50 changes: 26 additions & 24 deletions tests/results/test_grouped_checkboxes_failing.html
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,30 @@
<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 aria-invalid="true" class="form-check-input is-invalid" 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 aria-invalid="true" class="form-check-input is-invalid" 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 aria-invalid="true" class="form-check-input is-invalid" 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 aria-invalid="true" class="form-check-input is-invalid" 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 aria-invalid="true" class="form-check-input is-invalid" 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>
<p class="invalid-feedback" id="error_1_id_checkbox_select_multiple"><strong>This field is
required.</strong></p>
<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 aria-invalid="true" class="form-check-input is-invalid" 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 aria-invalid="true" class="form-check-input is-invalid" 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 aria-invalid="true" class="form-check-input is-invalid" 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 aria-invalid="true" class="form-check-input is-invalid" 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 aria-invalid="true" class="form-check-input is-invalid" 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>
<p class="invalid-feedback" id="error_1_id_checkbox_select_multiple"><strong>This field is
required.</strong></p>
</div>
</div>
</div>
<div class="form-text">
help
</div>
<div class="form-text">
help
</div>
</fieldset>
</div>
</form>
Loading

0 comments on commit 1c63954

Please sign in to comment.