【Django】フォームにCSS（クラスclass）を追加する方法：widget_tweaks

フォームとは

フォームとはユーザーが会員登録時などで情報を入力する場所のことです。

情報を入力後に送信することで、入力した情報はサーバーに送られデータベースへの登録や入力値に従って操作が行われます。

フォームクラスの利用

Djangoでは簡単にフォームを作成するための仕組みが備わっています。

forms.pyにフォームクラスを定義し、views.pyからフォームクラスをテンプレートに渡すことによりテンプレート上でフォームを簡単に生成できます。

forms.pyでフォームクラスを定義する方法は以下記事をご参照ください。

【Django】フォームの作成：forms.pyにフォームクラスを定義する（forms.Form）

フォームクラスにはforms.Formを継承した方法とforms.ModelFormを利用した方法の２つがあります。詳しくは以下記事をご参照ください。

【Django】forms.py：モデルを利用したフォームの作成方法（forms.ModelForm）

テンプレートでフォームを表示

views.pyから渡されたフォーム情報をテンプレートで表示するには以下のように記述します。ここでは渡されたフォーム情報をform、フォーム欄をemailとします。

このDjango独特の変数表示の仕組みではstyleの適用や、CSSクラスを追加することができません。

パッケージインストール

widget_tweaksを利用するためにpipコマンドでdjango-widgets-improvedをインストールする必要があります。

以下コマンドを実行してインストールしてください。

pip install django-widgets-improved

ここでインストールしたdjango-widgets-improvedはMITライセンスです。ライセンスについては以下記事をご参照ください。

【Python】制作物を商用利用・配布する場合のライセンスの取り扱い

settings.pyへの追加

Django-widgets-tweaksをインストールしたら、次にsettings.pyにwidget_tweaksを追記します。

以下のようにINSTALLED_APPSに追記してください。

INSTALLED_APPS = [
    …
    'widget_tweaks',
]

カスタムテンプレートタグの読み込み：loadタグ

すべてのwidget_tweaksを利用するテンプレートの先頭に以下コードを追加します。

{% load widget_tweaks %}

このloadタグによりwidget_tweaksのカスタムテンプレートを読み込んでいます。

これによりフォーム変数にCSSクラスを追加するためのフィルターを利用できるようになります。

フィルターの追加

フォーム変数にCSSクラスを追加するにはadd_classフィルターを使用します。

例えばBootstrap5のクラスを追加する場合は以下のように記入します。

<form class="" action="" method="post">
    
    <div class="input-group">
      <span class="input-group-text">Email</span>
      {{ form.email | add_class:"form-control"}}
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>