フォームの描画

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

/events/new/のページでは、すべてのラベルと入力欄を手書きしており、EventFormにも同じフィールドがもう一度列挙されています。フォームは自分自身を描画できます。テンプレートに渡し、<form>タグ内に{{ form }}と記述します。問い合わせページの例です。

<form method="post">
    {% csrf_token %}
    {{ form }}
    <button type="submit">Send</button>
</form>

{{ form }}は、クラスで宣言された順に、各フィールドのラベルと入力欄を出力します。各入力欄にはフィールドのnameとid_emailのようなidが設定されるため、ラベルはその入力欄を指します。フォームタグ、トークン、ボタンは自分で用意します。

まだ何も入力されていないフォームは、データを渡さずに呼び出したクラスです。つまりContactForm()です。また、Djangoは必須の入力欄にrequiredを付けるため、送信前にブラウザーが空欄を止めます。DjangoはDateFieldをテキストとして描画するため、日付欄は通常のテキスト欄になっています。2031-12-05のように日付を入力してください。

チャレンジ

簡単

EventFormに独自のフィールドを描画させましょう。

new_eventで、空のEventFormをformとしてテンプレートに渡します。
new_event.htmlで、3つのラベルと入力欄を{{ form }}に置き換えます。これで自動的に描画されます。フォームタグ、トークン、ボタン、エラーメッセージはそのままにします。

日付を2031-12-05にしてイベントを追加します。Djangoがすべてのラベルを描画し、イベントのページが表示されます。

自分で試してみよう

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

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

{% block content %}
<h1>Add an event</h1>
{% if error %}
<p class="error">{{ error }}</p>
{% endif %}
<form method="post">
    {% csrf_token %}
    <label for="title">Title</label>
    <input id="title" name="title">
    <label for="date">Date</label>
    <input id="date" name="date" type="date">
    <label for="place">Place</label>
    <input id="place" name="place">
    <button type="submit">Add event</button>
</form>
{% endblock %}