【Django】フォームにBootstrapのスタイルを適用する【django-crispy-forms】
LoginViewのテンプレート(registration/login.html)でログインフォームを表示しようと思った時、公式ドキュメントにある以下赤線部分のフォームで「どうやってBootstrap4のスタイルを適用すればいいんだ？」という問題に直面しました。
<form method="post" action="{% url 'login' %}">
{% csrf_token %}
<table>
<tr>
<td>{{ form.username.label_tag }}</td>
<td>{{ form.username }}</td>
</tr>
<tr>
<td>{{ form.password.label_tag }}</td>
<td>{{ form.password }}</td>
</tr>
</table>
<input type="submit" value="login">
<input type="hidden" name="next" value="{{ next }}">
</form>
{{ }}内にBootstrap用のクラスを仕込むことができません(class="form-control"など)。
味気ない装いになります↓。
調べてみると、django-crispy-formsというパッケージを使うことで簡単にBootstrap4のスタイルを適用したフォーム表示が割と簡単に可能でした。
DjangoのフォームにBootstrap4のスタイルを適用する
以下、パッケージ開発者の公式ドキュメントです。
以下、噛み砕いて使い方を示してくれているブログです。
django-crispy-formsの使い方：一例
３ステップで簡単です。Bootstrapのセットアップは終わっているものとします。
① インストールします。
pip install django-crispy-forms
② settings.pyを編集します。以下赤線部分を追加。
INSTALLED_APPS = [
...<省略>...
'crispy_forms',
]
CRISPY_TEMPLATE_PACK = 'bootstrap4'
③ テンプレートで以下のようにcrispy_form_tagをloadしたあと、crispyフィルターをかけます。
{% extends "blog/base.html" %}
{% load crispy_forms_tags %}
{% block content %}
<form method="post" action="{% url 'users:login' %}" class="col-md-8 m-auto">
{% csrf_token %}
{{ form|crispy }}
<input type="submit" value="login">
<input type="hidden" name="next" value="{{ next }}">
</form>
...
{% endblock %}
これだけで、viewから渡されたFormにいい感じにBootstrapが適用されて表示されます。
以下のように、as_crispy_fieldとすることで、フィールド個別に適用することもできます。
{{ form.username|as_crispy_field }}
{{ form.password|as_crispy_field }}
これで間にHTMLタグを好きに挟めるようになるので、より柔軟なスタイリングが可能になります。
<form method="post" novalidate>
{% csrf_token %}
<div class="row">
<div class="col-6">
{{ form.username|as_crispy_field }}
</div>
<div class="col-6">
{{ form.password|as_crispy_field }}
</div>
...
</form>
