フォームをHTMLにする ― as_p とウィジェット

導入

フォームクラスは、入力欄の HTML も自動で生成できます。ラベル・入力欄・エラー表示を、手書きせずにまとめて出せるのが便利なところです。

説明

フォームインスタンスを as_p() などで文字列化すると、<label> と <input> の HTML が出てきます。

import django
from django.conf import settings
if not settings.configured:
    settings.configure(DEBUG=True, SECRET_KEY="dev", INSTALLED_APPS=[])
    django.setup()

from django import forms

class SignupForm(forms.Form):
    username = forms.CharField(label="ユーザー名", max_length=20)
    password = forms.CharField(label="パスワード", widget=forms.PasswordInput)
    agree = forms.BooleanField(label="規約に同意する")

form = SignupForm()
print(form.as_p())   # <p><label>…</label><input…></p> が項目分だけ出る

• label="..." … 入力欄の見出し。
• widget=forms.PasswordInput … 入力欄の種類を指定。PasswordInput なら <input type="password">（伏字）になります。他に Textarea（複数行）、CheckboxInput、Select（選択肢）など。
• as_p()（段落）、as_ul()（箇条書き）、as_table()（表）で並べ方を選べます。

テンプレートでは、ビューから渡した form を {{ form.as_p }} と書くだけで表示できます。

<form method="post">
  {% csrf_token %}
  {{ form.as_p }}
  <button>送信</button>
</form>

ModelForm を使うと、モデル（次章）から自動でフォームを作れます。入力欄の定義を二度書かずに済むので、実務ではこちらが主役です。

# 次章のモデルと組み合わせると…
from django.forms import ModelForm
class PostForm(ModelForm):
    class Meta:
        model = Post          # モデルを指定するだけ
        fields = ["title", "body"]   # 使うフィールドを選ぶ

やってみよう

widget=forms.PasswordInput を forms.Textarea に変えると、password 欄が複数行入力になります。as_p() を as_ul() に変えて、並び方の違いも見てみましょう。

演習

SignupForm に、複数行入力の自己紹介欄 bio を追加してください（forms.CharField(label="自己紹介", widget=forms.Textarea)）。form.as_p() の出力に <textarea が含まれれば成功です。