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

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

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

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

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

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

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

✔YouTube解説動画

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

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

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

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

created by Rinker

¥3,850 (2024/04/23 16:36:11時点 楽天市場調べ-詳細)

• Kindle
• Amazon
• 楽天市場
• Yahooショッピング

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

• 見るからにきれいなコードの書き方
• コードの分割方法
• 変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

¥2,640 (2024/04/23 14:20:45時点 Amazon調べ-詳細)

• Amazon
• 楽天市場
• Yahooショッピング

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

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

まとめ

当記事では、複数のフォームへ一括でクラス名を追加する方法を解説しました。

やり方としては以下の3ステップ。

1. Formクラスの__init__メソッド内で、
2. for field in self.base_fields.values()で全てのフィールドを取り出し、
3. field.widget.attrs.update({“class”:”クラス名”})でクラス名を追加する

さて、次回は、削除ページのUIを変更します。

Bootstrapの「モダル」を使い、削除確認画面が出てくる方法をご説明します。

【Django】モーダルを使ったデリートビューの実装方法を解説

Django日報アプリ開発を通じて、デリートビューのUIを整える方法をお伝えします。Bootstrapのモーダルを使用する実例のコードをご紹介し、どのように画面へ反映させるか、を主に解説しています。

itc.tokyo

2021.09.12