フィールドごとに

CoddyのDjangoジャーニー「フォーム」セクションの一部。レッスン 8/20。

{{ form }}は、各フィールドを同じ方法で、縦に並べて描画します。各フィールドを自分で用意したボックスに入れるには、フィールドを1つずつ描画します。

フォームはフィールドのリストです。{% for field in form %}を使うと、クラスで宣言された順にフィールドが得られます。{{ field.as_field_group }}は、ラベル、エラー、入力欄を含む1つのフィールドを描画します。2つの名前を横並びにした登録ページの例です。

<div class="row">
    <div class="half">{{ form.first_name.as_field_group }}</div>
    <div class="half">{{ form.last_name.as_field_group }}</div>
</div>

{{ form.email }}だけでは、入力欄のみが描画されます。ラベルも、何が問題だったのかを示すエラーもありません。

スタイルシートには、各ボックスをカードにする.fieldルールがすでにあります。

チャレンジ

簡単

new_event.htmlで、{{ form }}をフォームの各フィールドを反復処理するループに置き換えます。各フィールドを、それぞれラベル、エラー、入力欄とともに独自の<div class="field">に入れます。

「実行」を押し、日付にnext fridayを送信して、日付欄の中にエラーが表示されることを確認します。

自分で試してみよう

{% extends "events/base.html" %}

{% block title %}Add an event{% endblock %}

{% block content %}
<h1>Add an event</h1>
<form method="post">
    {% csrf_token %}
    {{ form }}
    <button type="submit">Add event</button>
</form>
{% endblock %}