{% extends 'dsfr/base.html' %} {% load static dsfr_tags 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 %} {# Everything that needs to be outside the form, before #} {% block before_form %} {% endblock before_form %}
{% csrf_token %} {# Everything that needs to be in the form but before the fields (form title for example) #} {% block head_form %} {% endblock head_form %} {# If you need to add formsets before the form #} {% block extra_formset_before %} {% endblock extra_formset_before %} {# The fields #} {% for field in form.visible_fields %} {# Everything that needs to be in the for loop #} {% block inside_form %} {% endblock inside_form %} {# Check the widget class and adds the DSFR class corresponding #} {# 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 %}
{# 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 %}
{# 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 %}
{# 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 %}
{# Radio buttons. For some reason, the radio buttons are displayed small #} {% elif field|widget_type == 'radioselect' %}
{{ field.label_tag }}{% if field.field.required %} *{% endif %} {% if field.help_text %}{{ field.help_text }}{% endif %}
{% if field.field.disabled %} {{ field|add_class:"fr-radio-group"|attr:"disabled" }} {% else %} {{ field|add_class:"fr-radio-group" }} {% endif %}
{% if field.errors %}
{{ field.errors }}
{% endif %}
{# 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 %}
{# 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 %}
{# 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 %}
{# 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 %}
{# File input #} {# 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 %}
{# 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 %}
{# 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 %}
{# 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 %} {# If you need to add formsets after the form #} {% block extra_formset_after %} {% endblock extra_formset_after %} {# Everything that needs to be in the form but after the fields (the buttons for example) #}
{% block foot_form %} {% endblock foot_form %}
{# Everything that needs to be outside the form, after #} {% block after_form %} {% endblock after_form %} {% endblock content %}