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

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

✔当記事は以下のような方に向けて書かれています

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

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

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

✔当記事でお伝えすること

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

当記事の内容を理解すれば、フォームクラスで作成したフォームに一括でクラス名を付与できるようになります。

ぜひ最後までご覧ください。

✔YouTube解説動画

当記事の内容は動画を見ながら進めると、約15分程度で完了します。

動画ならではの情報も解説しているので、記事と一緒にご覧ください。

動画の概要欄には、単元ごとのコードを紹介しているgithubページも載せています。

実践Django Pythonによる本格Webアプリケーション開発 [ 芝田将 ]

created by Rinker

筆者プロフィール

【現職】プロマネ/システムプランニング

【副業】ブログ（月間7万PV）/YouTube/Web・アプリ制作

【元】外資系金融機関の営業

コミュニケーション × ビジネススキル × 文章力 × プログラミングスキルを活かし、30後半からのIT系職へシフト。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

ビフォーアフター：今回達成すること
一気にクラス名を追加する方法
1. 実例コード：__init__メソッド内
テンプレートを少し修正
まとめ

ビフォーアフター：今回達成すること

Bootstrapを適用し以下のようにします。

ビフォー

アフター

通常ですと、HTMLファイル上で、以下の記述をします。

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

もしくは、forms.py内のフォームクラスで、こちらをすべてのフィールドにおこなわなければなりません。

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

今回のやり方は、一括でできるのでかなり楽です。

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

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

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

クラスを一つ追加するのであれば、これで完了です。

forループを使って全フィールドにクラス名をつけましょう。

実例コード：initメソッド内

    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 > NippoFormClass

from django import forms

class NippoFormClass(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クラスを追加しています。