{% extends 'example_app/base.html' %} {% load static %} {# comment : Allows to display the fields with DSFR layout #} {% load static dsfr_tags %} {# comment : Widget tweaks allows to add classes to the html elements with add_class #} {% load widget_tweaks %} {% comment %} Radio button and multiple checkboxes : -Help text under each button/checkbox : In your forms.py, in the ChoiceField or MultipleChoiceField, instead of choices=(("a", "label a"), ("b", "label b"), ...), put choices=(("a", {"label":"label a", "help_text":"help text a"}), ("b", {"label":"label b", "help_text":"help text b"})), -Horizontal list of buttons/checkboxes : In your forms.py, in the RadioSelect widget or the CheckboxSelectMultiple widget, put attrs={"class":"fr-fieldset--inline"} {% endcomment %} {% block extra_css %} {% endblock extra_css %} {% block content %} {# comment : Everything that needs to be outside the form, before #} {% block before-form %} {% endblock before-form %}
{% csrf_token %} {# comment : Everything that needs to be in the form but before the fields (form title for example) #} {% block head-form %} {% endblock head-form %} {# comment : If you need to add formsets before the form #} {% block extra-formset-before %} {% endblock extra-formset-before %} {# comment : The fields #} {% for field in form.visible_fields %} {# comment : Everything that needs to be in the for loop #} {% block inside-form %} {% endblock inside-form %} {# comment : Check the widget class and adds the DSFR class corresponding #} {# comment : Select lists #} {% if field|widget_type == 'select' or field|widget_type == 'selectmultiple' or field|widget_type == 'selectdate' %}
{{ field|add_class:'fr-select'|add_error_class:'fr-select--error'|add_error_attr:"aria-describedby:select-error-desc-error"|add_error_attr:"id:select-error"|add_error_attr:"name:select-error" }} {% if form.errors %} {% for error in field.errors %}

{{ error }}

{% endfor %} {% endif %}
{# comment : SplitDateTimeWidget : currently doesn't work #} {% elif field|widget_type == 'splitdatetimewidget' or field|widget_type == 'splithiddendatetimewidget' %}

Attention : pas encore fonctionnel

{{ field|add_class:'fr-select'|add_error_class:'fr-select--error'|add_error_attr:"aria-describedby:select-error-desc-error"|add_error_attr:"id:select-error"|add_error_attr:"name:select-error" }} {% if form.errors %} {% for error in field.errors %}

{{ error }}

{% endfor %} {% endif %}
{# comment : Single checkbox #} {% elif field|widget_type == 'checkboxinput' %}
{{ field|attr:"type:checkbox"|add_error_attr:"aria-describedby:checkboxes-error-desc-error"|add_error_attr:"id:checkbox-error"|add_error_attr:"name:checkbox-error" }} {% if form.errors %} {% for error in field.errors %}

{{ error }}

{% endfor %} {% endif %}
{# comment : Multiple checkboxes #} {% elif field|widget_type == 'checkboxselectmultiple' %}
{{ field.label }} {% if field.field.required %}*{% endif %} {% if field.help_text %} {{ field.help_text }} {% endif %}
{{ field|attr:"type:checkbox"|add_error_attr:"id:checkboxes-error"|add_error_attr:"name:checkboxes-error"|remove_attr:"class" }}
{% if form.errors %} {% for error in field.errors %}

{{ error }}

{% endfor %} {% endif %}
{# comment : Radio buttons. For some reason, the radio buttons are displayed small #} {% elif field|widget_type == 'radioselect' %}
{{ field.label }} {% if field.field.required %}*{% endif %} {% if field.help_text %} {{ field.help_text }} {% endif %}
{{ field|attr:"type:radio"|add_error_attr:"aria-describedby:radio-error-desc-error"|add_error_attr:"id:radio-error"|add_error_attr:"name:radio-error"|remove_attr:"class" }}
{% if form.errors %} {% for error in field.errors %}

{{ error }}

{% endfor %} {% endif %}
{# comment : Date input #} {% elif field|widget_type == 'dateinput' %}
{{ field|add_class:'fr-input'|attr:"type:date" }} {% if form.errors %} {% for error in field.errors %}

{{ error }}

{% endfor %} {% endif %}
{# comment : Datetime input. Currently doesn't work on FireFox #} {% elif field|widget_type == 'datetimeinput' %}
{{ field|add_class:'fr-input'|attr:"type:datetime-local" }} {% if form.errors %} {% for error in field.errors %}

{{ error }}

{% endfor %} {% endif %}
{# comment : Time input #} {% elif field|widget_type == 'timeinput' %}
{{ field|add_class:'fr-input'|attr:"type:time" }} {% if form.errors %} {% for error in field.errors %}

{{ error }}

{% endfor %} {% endif %}
{# comment : Textarea #} {% elif field|widget_type == 'textarea' %}
{% if field.field.required %}
{{ field|add_class:"fr-input"|add_error_class:"fr-input--error" }}
{% else %} {{ field|add_class:"fr-input"|add_error_class:"fr-input--error" }} {% endif %} {% if form.errors %} {% for error in field.errors %}

{{ error }}

{% endfor %} {% endif %}
{# comment : File input #} {# comment : ClearableFileInput can't be cleared #} {% elif 'file' in field|widget_type %}
{% if field|widget_type == 'clearablefileinput' %}

Attention : ne peux pas ĂȘtre vidĂ©

{% endif %} {{ field|add_class:'fr-upload' }} {% if form.errors %} {% for error in field.errors %}

{{ error }}

{% endfor %} {% endif %}
{# comment : Number input #} {% elif field|widget_type == 'numberinput' %}
{{ field|add_class:'fr-input'|attr:"pattern:[0-9]*"|attr:"inputmode:numeric"|attr:"type:number"|add_error_class:"fr-input--error" }} {% if form.errors %} {% for error in field.errors %}

{{ error }}

{% endfor %} {% endif %}
{# comment : URL input #} {% elif field|widget_type == 'urlinput' %}
{% if field.field.required %}
{{ field|add_class:'fr-input'|add_error_class:"fr-input--error"|attr:"placeholder:https://"|add_error_class:"fr-input--error" }}
{% else %} {{ field|add_class:'fr-input'|add_error_class:"fr-input--error"|attr:"placeholder:https://" }} {% endif %} {% if form.errors %} {% for error in field.errors %}

{{ error }}

{% endfor %} {% endif %}
{# comment : Text input or other cases #} {% else %}
{% if field.field.required %}
{{ field|add_class:'fr-input'|add_error_class:"fr-input--error" }}
{% else %} {{ field|add_class:'fr-input'|add_error_class:"fr-input--error" }} {% endif %} {% if form.errors %} {% for error in field.errors %}

{{ error }}

{% endfor %} {% endif %}
{% endif %} {% endfor %} {# comment : If you need to add formsets after the form #} {% block extra-formset-after %} {% endblock extra-formset-after %} {# comment : Everything that needs to be in the form but after the fields (the buttons for example) #}
{% block foot-form %} {% endblock foot-form %}
{# comment : Everything that needs to be outside the form, after #} {% block after-form %} {% endblock after-form %} {% endblock content %}