【Django】フォームにCSS(クラスclass)を追加する方法:widget_tweaks

時計 2022.02.03 / 時計

【Django】フォームにCSS(クラスclass)を追加する方法:widget_tweaks

本記事ではDjangoにおける、フォームクラスを利用したフォームCSSを適用させるためにクラス(class)を追加する方法について解説していきます。

Djangoではフォームクラスという仕組みを利用することで簡単にフォームを作成できます。

しかしそのままではCSSでフォームを装飾するのは難しいので、widget_tweaksを利用してクラスやCSSを適用しましょう。

ここではフォームにBootstrap5を利用して装飾していきます。DjangoでBootstrap5を使う方法については以下記事をご参照ください。

Django:フォーム

フォームとは

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

Webサイトのフォーム画面

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

フォームクラスの利用

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

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

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

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

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

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

{{ form.email }}

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

widget_tweaksによるCSSクラスの追加

フォーム変数にCSSクラスを追加するにはwidget_tweaksを利用します。

widget_tweaksを使用する流れは以下のようになります。

  1. パッケージインストール
  2. settings.pyへの追加
  3. カスタムテンプレートタグの読み込み
  4. フィルターの追加

パッケージインストール

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

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

pip install django-widgets-improved

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

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フィルターを使用します。

構文

{{ フィルター変数 | 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>

まとめ

本記事「【Django】フォームにCSS(クラスclass)を追加する方法:widget_tweaks」はいかがでしたか。

widget_tweaksとBootstrap、フォームクラスを使うことで簡単におしゃれなフォームを作成できます。

ぜひこれらをDjangoで利用してWebアプリケーション開発を進めてみてください。