フィールドごとに

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">に入れ、ラベル、エラー、入力欄を含めます。

タイトルと場所を入力し、日付として次の金曜日を送信します。「有効な日付を入力してください。」と日付カード内に表示されます。

自分で試してみよう

{% 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 %}