フォームの描画

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も設定するため、送信前にブラウザーが空欄を防ぎます。

チャレンジ

簡単

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

「実行」を押して/events/new/を開くと、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 %}