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

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

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

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

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

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

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

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

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

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

【著者プロフィール】

【Python歴】11年 x 【Django歴】10年

HP作成、社内システムの構築、コンサルティング

当ブログを通じて、Webアプリの書き方やアプリの公開方法までを解説しています。

☆日報アプリ「D-Repo」（デモ版）→こちら

※Djangoをベースに作成したアプリです。

☆便利ツールアプリ「Tool Station」→こちら

※Django REST frameworkとReactで作成しているアプリです。

✔YouTube解説動画

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

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

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

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

created by Rinker

ビフォーアフター：今回達成すること
一気にクラス名を追加する方法
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クラスを追加しています。