Django form __init__でCSSクラスを設定する

（最終更新月：2021年12月）

「登録ページ、編集ページなどフォームの見た目を綺麗にしたい！」

「フォームにクラス名を指定するにはどうするの？」

「数も多いし一つ一つ変えていくのは面倒！」

というDjango初学者の方へ向けた記事となります

当記事でご紹介する方法は、

HTMLテンプレートはいじらない
フォームクラスでいちいちフィールドを書く必要がない

という、一気にクラスを追加できる方法です

まずはBootstrapクラスである「form-control」を適用した結果のビフォーアフターをご覧ください

当記事はアプリ開発～公開までをご紹介しているシリーズの一記事になります

最終的には、下記リンク先のような日報アプリを開発、公開できるように進めていきます

https://nippo.itc-app.site/

ようこそ！簡易日報アプリ「D-Repo」へ！こちらは無料で使える日報アプリのデモサイトになります！「Webアプリはとてもカンタンで便利！」を感じてみよう！

興味のある方は下記よりシリーズをまとめたページへお進みください

【Django】チュートリアル｜日報アプリの開発から公開まで

Djangoのチュートリアルをお探しですか？具体的に「手を動かして作ってみたい！」という方へ向けて、誰でもできる簡易的な日報アプリの開発を通じて、Djangoの様々な機能に触れていくシリーズとなっています。PythonでWebアプリを作りたい方、必見の記事となります！

ビフォーアフター
一気にクラス名を追加する方法
テンプレートをちょこっと修正
まとめ
関連書籍

ビフォーアフター

ビフォー

アフター

通常ですと、HTMLファイル上で、

<input class="form-control" ....>

もしくは、forms.py内のフォームクラスで、

title = forms.CharField(forms.TextInput(attrs={"class":"form-control"} ...)

などと、それぞれのフォームに対してクラスを適用しなければなりません

フォームがたくさんある場合で、「form-control」などよく使うクラス名であれば一気に書き換える方法をオススメします

一気にクラス名を追加する方法

Formクラスの__init__関数内でクラス名を追加することができます

フォームフィールド名.widget.attrs.update({“class”: クラス名”})

クラス一つであれば、これで完了です

複数のフィールドで一気に書き換えるには「for loop」を使い、全フィールドを取り出して行う必要があります

【実例コード】

    def __init__(self, *args, **kwargs):
        for field in self.base_fields.values():
            field.widget.attrs.update({"class":"form-control"})
        super().__init__(*args, **kwargs)

【forms.py > NippoForm｜コード全体】

from django import forms

class NippoForm(forms.Form):
    title = forms.CharField()
    content = forms.CharField(widget=forms.Textarea())

    def __init__(self, *args, **kwargs):
        for field in self.base_fields.values():
            field.widget.attrs.update({"class":"form-control"})
        super().__init__(*args, **kwargs)

テンプレートをちょこっと修正

フォーム以外の部分についてテンプレートを少しいじります

{% extends 'base.html' %}

{% block content %}
<div class="container my-3" style="max-width:700px;">
    <form method="POST"> {% csrf_token %}
    {{ form.as_p }}
    <button class="form-control btn btn-primary" type="submit">登録</button>
    </form>
</div>
{% endblock %}

divタグにcontainerやwidthの指定して、ボタンにBootstrapクラスを追加しています