Djangoroidの奮闘記

python,django,angularJS1~三十路過ぎたプログラマーの奮闘記

Django の {{ form }} をカスタマイズして使う

参考サイト

https://docs.djangoproject.com/en/1.11/topics/forms/#rendering-fields-manually https://docs.djangoproject.com/en/1.11/topics/forms/#looping-over-the-form-s-fields

手動でformをレンダリングしてカスタマイズする。

  • {{ form }}でレンダリングすると、すべての項目が垂直方向に個別に表示されてしまうので、部分的に横に並べてフォームの項目を作りたいときに役に立ちそうなテクニック。

https://docs.djangoproject.com/en/1.11/topics/forms/#rendering-fields-manually

{{ form.non_field_errors }}
<div class="fieldWrapper">
    {{ form.subject.errors }}
    <label for="{{ form.subject.id_for_label }}">Email subject:</label>
    {{ form.subject }}
</div>
<div class="fieldWrapper">
    {{ form.message.errors }}
    <label for="{{ form.message.id_for_label }}">Your message:</label>
    {{ form.message }}
</div>
<div class="fieldWrapper">
    {{ form.sender.errors }}
    <label for="{{ form.sender.id_for_label }}">Your email address:</label>
    {{ form.sender }}
</div>
<div class="fieldWrapper">
    {{ form.cc_myself.errors }}
    <label for="{{ form.cc_myself.id_for_label }}">CC yourself?</label>
    {{ form.cc_myself }}
</div>

for文でループして表示することも可能。

https://docs.djangoproject.com/en/1.11/topics/forms/#looping-over-the-form-s-fields

{% for field in form %}
    <div class="fieldWrapper">
        {{ field.errors }}
        {{ field.label_tag }} {{ field }}
        {% if field.help_text %}
        <p class="help">{{ field.help_text|safe }}</p>
        {% endif %}
    </div>
{% endfor %}