Django、モデルフォームのウィジェットを変更する方法について
- Djangoで、モデルフォームのウィジェットを変更する方法を紹介しています。ManyToManyやForeignKeyはデフォルトでselect要素を使いますが、それをcheckbox等に変更するような機会は多いです。
概要
Djangoのフォームオブジェクトを表示する際、様々な選択肢があります。{{ form_as_p }}で簡単に表示することもできますし、{% for field in form %} でフォーム内のフィールドを順番に取り出すこともできます。{{ form.name }}のように、一つ一つ自力で取り出すことも可能です。今回はこういった色々な方法をまとめていきます。
前提となるフォーム
次のフォームを例に使っていきます。
from django import forms
CATEGORIES = (
('1', 'お仕事の依頼'),
('2', 'サイト内容に関する問い合わせ'),
)
class ContactForm(forms.Form):
"""問い合わせ用フォーム"""
name = forms.CharField(
label='お名前', max_length=50,
required=False, help_text='※任意'
)
email = forms.EmailField(
label='メールアドレス', required=False, help_text='※任意'
)
text = forms.CharField(label='問い合わせ内容', widget=forms.Textarea)
category = forms.ChoiceField(label='カテゴリ', choices=CATEGORIES)
def clean_name(self):
name = self.cleaned_data.get('name')
if name in ('ばか', 'あほ', 'まぬけ', 'うんこ'):
self.add_error('name', '名前に暴言を含めないでください。')
if name == 'ばか':
self.add_error('name', 'ばかは特にダメです。')
return name
def clean(self):
category = self.cleaned_data.get('category')
email = self.cleaned_data.get('email')
if category == '1' and not email:
self.add_error(None, 'お仕事の依頼の場合、メールアドレスは必須です。')
return self.cleaned_data
お問い合わせ用に使うフォームで、名前、メールアドレス、内容、問い合わせカテゴリの4つあります。名前とメールアドレスは、required=Falseで入力を任意にしています。問い合わせ内容は複数行の入力ができるように、widget=forms.Textareaとしています。
エラーの表示も確認したかったので、少し処理を追加しています。clean_name()は、名前欄に「あほ」とか「ばか」とか入っていないかの確認です。clean()は、カテゴリが「お仕事の依頼」だった場合に、メールアドレスが入力されているかを確認します。
一括で取り出す
フォームを表示する一番簡単な方法から紹介します。テンプレートファイルに、次のように書きましょう。
<form action="" method="POST">
{{ form.as_p }}
{% csrf_token %}
<button type="submit">送信</button>
</form>
これは次のように表示されます。
{{ form.as_p }}と書くだけで、フォーム内容が全て表示されます。また、help_textのような補足部分もちゃんと表示してくれます。
もちろん、エラーも全て表示されます。
{{ form.as_p }}は、名前のとおり各入力欄をp要素で囲んでいます。as_pの他には、as_tableとas_ulがあります。
{{ form.as_table }}は、名前のとおりtable要素を利用する際に使えます。<table>で囲んでおくことを忘れないようにしましょう。
<form action="" method="POST">
<table>
{{ form.as_table }}
</table>
{% csrf_token %}
<button type="submit">送信</button>
</form>
見た目は次のようになります。
{{ form.as_ul }}という、ul要素を利用する際に使えるものもあります。
<form action="" method="POST">
<ul>
{{ form.as_ul }}
</ul>
{% csrf_token %}
<button type="submit">送信</button>
</form>
見た目は次のようになります。
これらは1行でフォーム内容を完全に表示できるので、フォームの動作確認といった場合に非常に有効です。
ただ、柔軟性には欠けています。全てのエラー内容を上部に集めたい場合や、もしかしたら右下とかに表示したいかもしれませんが、そういった場合には対処できません。
table要素、ul要素が必ず作られるas_tableとas_ulは使いどころが限られるでしょう。as_pはまだ見込みがありそうですが、p要素の中にはulやdiv要素を入れれないという致命的な弱点があります(興味のある方は、コンテンツモデルについて調べてみましょう)。
今回のように入力欄にエラーがあるとそれは<ul class="errorlist">のようなul要素ができ、1つ1つのエラーが<li>エラー内容<li>として作成されます。しかし、p要素はul要素を入れれないので、ulがpの外側に出てしまうのです。実を言うと、上のform.as_pの例は実際にそうなっています。
つまり、次のようなHTMLになるかと思いきや...
<p>
<ul class="errorlist">
<li>名前に暴言を含めないでください。</li>
<li>ばかは特にダメです。</li>
</ul>
<label for="id_name">お名前:</label>
<input type="text" name="name" value="ばか" maxlength="50" id="id_name">
<span class="helptext">※任意</span>
</p>
実際には、次のようなHTMLになるのです。
<ul class="errorlist">
<li>名前に暴言を含めないでください。</li>
<li>ばかは特にダメです。</li>
</ul>
<p>
<label for="id_name">お名前:</label>
<input type="text" name="name" value="ばか" maxlength="50" id="id_name">
<span class="helptext">※任意</span>
</p>
問題は他にもあります。カテゴリの選択欄をselect要素ではなく、radioにしたいとしましょう。このようなウィジェットの変更やCSSのclass属性変更については、Django、モデルフォームのウィジェットを変更する幾つかの方法で説明しています。
category = forms.ChoiceField(label='カテゴリ', choices=CATEGORIES, widget=forms.RadioSelect)
Djangoが作成するラジオボタンというのは、ul要素に囲まれて出力されます。次のようなHTMLとして出力しようとしますが...
<p>
<label for="id_category_0">カテゴリ:</label>
<ul id="id_category">
<li>
<label for="id_category_0"><input type="radio" name="category" value="1" required id="id_category_0">お仕事の依頼</label>
</li>
<li>
<label for="id_category_1"><input type="radio" name="category" value="2" required id="id_category_1"> サイト内容に関する問い合わせ</label>
</li>
</ul>
</p>
p要素にはulは入れれないので、次のようになります。
<p>
<label for="id_category_0">カテゴリ:</label>
</p>
<ul id="id_category">
<li>
<label for="id_category_0"><input type="radio" name="category" value="1" required id="id_category_0">お仕事の依頼</label>
</li>
<li>
<label for="id_category_1"><input type="radio" name="category" value="2" required id="id_category_1"> サイト内容に関する問い合わせ</label>
</li>
</ul>
この挙動はラジオボタンだけでなく、チェックボックスに変更した際も同様です。また、Djangoで、サジェスト機能付きフォームを作るのような凝ったウィジェットでは、div要素を内部的に作成することもありますが、当然pにdivは入りません。こういった問題に対処しようとすると、結局のところ他の方法を利用することになります。
forでフィールドを取り出す
割と楽で、そこそこ柔軟なのがこの方法です。
as_p等のように、ラベル、入力欄、ヘルプテキスト、エラーを表示したい場合は、次のように書きましょう。
<form action="" method="POST">
{{ form.non_field_errors }}
{% for field in form %}
<div class="field">
{{ field.label_tag }}
{{ field }}
{% if field.help_text %}
<span class="helptext">{{ field.help_text }}</span>
{% endif %}
{{ field.errors }}
</div>
{% endfor %}
<div class="field">
<button type="submit">送信</button>
</div>
{% csrf_token %}
</form>
{% for field in form %}は、フォームの各フィールドを取り出しています。
今回、div.fieldという要素で各フィールドを囲んでいます。div要素は中に何でも入れれるので、↑で触れたような問題も起きません。
{{ field.label_tag }}は、label要素を作成しています。<label for="id_name">お名前:</label> といった要素ですね。たまにあるのが、label要素のclassを指定したいというケースです。この場合は、<label class="myclass" for="{{ field.id_for_label }}">{{ field.label }}:</label>としましょう。
{{ field }}は、<input type="text" name="name" maxlength="50" id="id_name">といった要素を作成します。
{{ field.help_text }}は、help_textの部分ですね。help_textはHTML要素を作らずテキストのみなので、<span class="help_text">という要素で囲んでいます。そうしておくと、あとでこの部分だけ小さくしたり、色を変えたりといったことができるでしょう。help_textがない場合もあるので、ifタグを使って判断しています。
{{ field.errors }}は、フィールドに紐づくエラーが全て表示されます。
for文の上に{{ form.non_field_errors }}という記述がありますが、これは特定のフィールドに紐づかないエラーを表示するための記述です。今回の例ならば、「お仕事の依頼の場合、メールアドレスは必須です。」というエラーメッセージはnon_field_errorsで表示されます。{{ form.non_field_errors }}を書き忘れると幾つかのエラーが表示されなくなり、「なんで上手く送信できないのか分からない...」と悩むことになりますので、忘れないようにしてください。
せっかくなので、少し見た目もこだわりましょう。次のようなCSSを書いておきます。
/* エラーの場合に作成されるul要素は、errorlistというクラス名がついている */
.errorlist {
margin: 0;
padding: 0;
list-style-type: none;
color: red;
}
div.field {
margin-top: 30px;
}
div.field > span.helptext {
font-size: 14px;
color: #999;
}
div.field > label {
display: block;
}
div.field > input, div.field > textarea, div.field > select, div.field > button {
width: 100%;
padding: 6px 12px;
box-sizing: border-box;
border-radius: 4px;
border: solid 1px #999;
}
これならば、割と見れますね。
もしかしたら、エラーがul要素で作成されるのが気に入らないかもしれません。フォームフィールドと同様に、エラーもforで1つずつ取り出すことができます。
<form action="" method="POST">
{% if form.non_field_errors %}
<div class="errorlist">
{% for error in form.non_field_errors %}
{{ error }}<br>
{% endfor %}
</div>
{% endif %}
{% for field in form %}
<div class="field">
{{ field.label_tag }}
{{ field }}
{% if field.help_text %}
<span class="helptext">{{ field.help_text }}</span>
{% endif %}
{% if field.errors %}
<div class="errorlist">
{% for error in field.errors %}
{{ error }}<br>
{% endfor %}
</div>
{% endif %}
</div>
{% endfor %}
<div class="field">
<button type="submit">送信</button>
</div>
{% csrf_token %
</form>
{% for error in form.non_field_errors %}や {% for error in field.errors %}の部分に注目です。このようにして、エラー内容を自分で取り出すことができます。
また、全てのエラーを一ヵ所にまとめたいならば、次のようにできます。これは一番上にエラーを全て集めている例です。
<form action="" method="POST">
{% if form.errors %}
<div class="errorlist">
{% for errors in form.errors.values %}
{% for error in errors %}
{{ error }}<br>
{% endfor %}
{% endfor %}
</div>
{% endif %}
{% for field in form %}
<div class="field">
{{ field.label_tag }}
{{ field }}
{% if field.help_text %}
<span class="helptext">{{ field.help_text }}</span>
{% endif %}
</div>
{% endfor %}
<div class="field">
<button type="submit">送信</button>
</div>
{% csrf_token %
</form>
次のように表示されます。
手作業で取り出す
forで取り出す方法は柔軟でしたが、凝ったレイアウトなんかだと、手作業での取り出しが必要になることもあります。
やることは単純で、forが自動でやっていた部分を自分で書くだけです。
<form action="" method="POST">
{{ form.non_field_errors }}
<div class="field">
{{ form.name.label_tag }}
{{ form.name }}
<span class="helptext">{{ form.name.help_text }}</span>
{{ form.name.errors }}
</div>
<div class="field">
{{ form.email.label_tag }}
{{ form.email }}
<span class="helptext">{{ form.email.help_text }}</span>
{{ form.email.errors }}
</div>
<div class="field">
{{ form.text.label_tag }}
{{ form.text }}
{{ form.text.errors }}
</div>
<div class="field">
{{ form.category.label_tag }}
{{ form.category }}
{{ form.category.errors }}
</div>
<div class="field">
<button type="submit">送信</button>
</div>
{% csrf_token %}
</form>
問い合わせ内容やカテゴリはhelp_text属性はないので、省きました。