目次
Django · Form Styling · django-widget-tweaks
フォームの見た目をきれいに整えたいけれど、Django 標準だと {{ form.field }} で出力される HTML の class を変更するのが面倒 — そんな悩みを解決するのが django-widget-tweaks です。テンプレート内で {% render_field form.name class="form-control" %} のように書くだけで、Bootstrap の class を簡単に当てられます。本記事では導入から実用的な使い方までを解説します。
この記事では下図のようにDjangoの入力フォームの幅を揃える簡単な方法をご紹介します。
user@sinyblog:~/article ❯ 01_section_1.md前提
今回はユーザ登録画面のフォームを整形する例で説明します。
forms.pyやviews.py等の設定は本記事の趣旨ではないため割愛します。
ユーザ登録画面のフォームを表示する部分のhtmlは以下のようなコードを記載している前提で進めます。
<form action="" method="POST" >
{% csrf_token %}
{% for field in form %}
<div class="form-group">
{{ field.label }}: {{ field}}
</div>
{% if field.errors %}
<div class="alert alert-danger" role="alert">{{ field.errors }}</div>
{% endif %}
{% endfor %}
<div class="row">
<div class="col-xs-4">
<button type="submit" class="btn btn-primary btn-block btn-flat">登録</button>
</div>
</div>
</form>この状態では、冒頭の画像の左側のようにフォームラベルの長さによってフォームの位置がずれて見栄えが悪くなってしまいます。
user@sinyblog:~/article ❯ 02_django_widget_tweaks.mddjango-widget-tweaksを使ってデザインを整える
そこで、django-widget-tweaksを利用すると簡単にデザインを整えることができます。
まずはpipコマンドでインストールします。
pip install django-widget-tweaks
settings.pyに 'widget_tweaks'を追加します。
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'accounts.apps.AccountsConfig',
'widget_tweaks', #追加する
]
テンプレートファイルの冒頭に{% load widget_tweaks %}を追加します。
こうすることでwidget_tweaksの機能をテンプレート内で利用できるようになります。
ではテンプレートのフォームを表示している部分を以下の通り修正します。
{{ field.label }}: {{ field}} ↓
{{ field.label }}: {{ field |add_class:"form-control"}}
フォームを表示している{{field}}の部分に|add_class:"form-control"をつけることでフォームにclassの定義を設定することができます。
これで画面を更新すると以下のようにデザインが変わります。
render_fieldテンプレートタグを利用してHTMLのような構文を使用してDjangoフィールドを柔軟にレンダリングすることもできます。
{% render_field field class="form-control" placeholder=field.label %}フォームのクラスにform-classを指定し、placeholderにフォーム名を設定しています。
これで以下のような画面デザインに変更されます。
