23

I don't want to use django's built in form generation, seeking to specify each field in my template in order to customize the html output.

How do I iterate over a series of form fields?

If my form looks like this:

class MyForm(forms.Form):
    main_image = forms.ImageField()
    second_image = forms.ImageField()
    third_image = forms.ImageField()
    fourth_image = forms.ImageField()
    ...

Is there way to write a {% for %} loop so that I can iterate through:

{{ form.main_image }}
{{ form.second_image }}
{{ form.third_image }}
{{ form.fourth_image }}

I tried the following which seemed logical, but did not work:

{% for field in form %}
  {{ form.field }}
{% endfor %}

4 Answers 4

55

Well this would clearly not work:

{% for field in form %}
    {{ form.field }}
{% endfor %}

but this will:

{% for field in form %}
    {{ field }}
{% endfor %}
3
  • What if I wanted to exclude the first field and only show the last fields?
    – Nick B
    Commented Oct 1, 2013 at 19:17
  • 1
    @NickB the dirty way: {% if forloop.counter != 1 %}, but I think you're better of, by just excluding the field in form definition..
    – mariodev
    Commented Oct 1, 2013 at 19:38
  • 1
    It's nice to point out (for beginners like myself) that this code alone won't display field names, but only text boxes and widgets(for file fields), all side by side. Maybe try <p>{{ field.name | title }}{{ field }}</p>
    – 101is5
    Commented Feb 1, 2022 at 9:59
18

The best way is to use two loops, one for hidden fields and one for visible fields :

visibles:

{% for field in form.visible_fields %}
    {{ field.label }}
    {{ field }}
{% endfor %}

hiddens:

{% for hidden in form.hidden_fields %}
    {{ hidden }}
{% endfor %}

in this way you will have better control over UI elements.

7

This one should work :

{% for field in form %}
  {{ field }}
{% endfor %}

Once you loop through field in form , you can't access form.field

4
  • Yes thank you! But I apologize that @mariodev answered the question first. But have a +1 as appreciation!
    – Nick B
    Commented Oct 1, 2013 at 19:03
  • I don't care about the credit , i'm just happy that you've overcame this issue :)
    – user975343
    Commented Oct 1, 2013 at 19:15
  • Haha, thanks! Any ideas about how to exclude the first field and only show the remaining fields?
    – Nick B
    Commented Oct 1, 2013 at 19:18
  • I'll give you a clue : it's all about a flow control
    – user975343
    Commented Oct 1, 2013 at 19:20
4

For any frontend developers looking to customize a Django form you can use a package called django-widget-tweaks to render fields individually. Example code below:

{# Your template with the form #}
{% extends "base.html" %}
{% load widget_tweaks %}

<form action="" method="POST">
    {% csrf_token %}

    {% for field in form %}
        <label for="{{ field.id_for_label }}">
          {{ field.label }}{% if field.field.required %}*{% endif %}
        </label>
        {% render_field field %}
    {% endfor %}

    <button type="button">
        Submit Form
    </button>
</form>

Note: You'll want to make this look nicer of course, and you may want to loop through your form errors if there are any.

They have some very useful examples on their PyPi page as well.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.