はじめに

DjangoでWebアプリを開発する際、複数画面で入力項目をたくさん作ることはありませんか？
せっかくなら、項目名が違うだけで同じ構造なら使い回したいなと思うことはありませんか？
そこで今回は、マイページ編集やユーザー登録画面など、複数の画面で同じ見た目・構造を使い回す方法を紹介します！
この記事を読んでいただければフォームの入力項目を実装するにあたって手間やミスが少なくなるはずです！

実現したいこと

フォーム入力欄の見た目・振る舞いを共通化し、どの画面でも統一感を持たせる
例: マイページ編集、ユーザー登録、パスワード変更画面などでスタイルを統一させる

実装コード（基本編）

共通部分のテンプレート（例: `partials/form_row.html`）

partials/form_row.htmlというファイルを作成して、下記のように実装すれば基本形は完成です！

partials/form_row.html

{% load widget_tweaks %}
<div class="mb-3">
  <label for="id_{{ field.name }}" class="form-label">{{ label }}</label>
  {{ field|add_class:"form-control" }}
</div>

画面に反映させた例（例: `registration/login.html`）

下記のように{% include "partials/form_row.html" with field=form.username label="ユーザー名" %}
と入れてあげると、テンプレ化した入力フォームを使用できます！
内容としては、{% include "(テンプレ化したフォームがあるところ)" with field=(入力項目名のカラム) label="(入力項目名)" %}

registration/login.html

<form method="post">
    {% csrf_token %}
    {% include "partials/form_row.html" with field=form.username label="ユーザー名" %}
    {% include "partials/form_row.html" with field=form.password label="パスワード" %}
    <!-- 中略 -->
</form>

反映させた画像

下記のように入力フォームを反映できました！

実装コード（応用編）

ここでは、画面によって編集の可否を変える方法を紹介します！

共通部分のテンプレート（例: `partials/form_row.html`）

{{ field|add_class:"form-control" }}の末尾に|attr:"disabled:true"を追加すると編集ができないようにできます！
また、下記のように場合分けすることで、編集可否を使い分けできます！
ここでは、readonlyがTrueのときに編集不可になるようにしています！

partials/form_row.html

{% load widget_tweaks %}
<div class="mb-3">
  <label for="id_{{ field.name }}" class="form-label">{{ label }}</label>
  {% if readonly %}
    {{ field|add_class:"form-control"|attr:"disabled:true" }}
  {% else %}
    {{ field|add_class:"form-control" }}
  {% endif %}
</div>

編集可能状態の例（例: `registration/mypage_update.html`）

registration/mypage_update.html

<form method="post">
    {% csrf_token %}
    {% include "partials/form_row.html" with field=form.username label="ユーザー名" %}
    {% include "partials/form_row.html" with field=form.email label="メールアドレス" %}
    <!-- 中略 -->
</form>

反映させた画像（編集可の場合）

下記のように入力フォームを反映できました！

編集不可状態の例（例: `registration/mypage.html`）

末尾にreadonly=Trueを追加することで、フォームを編集不可にできます！

registration/mypage.html

{% include "partials/form_row.html" with field=form.username label="ユーザー名" readonly=True %}
{% include "partials/form_row.html" with field=form.email label="メールアドレス" readonly=True %}

反映させた画像（編集不可の場合）

下記のようにフォームの項目が編集不可になりました！

終わりに

共通化テンプレートを作ることで、フォームの見た目や振る舞いを共通化できました。
これにより、修正コストの低減・保守性の向上・ユーザー体験の向上につながります！

備考

Djangoバージョン：4.x系想定
テンプレートエンジン：Django標準
Bootstrap 5 使用（UI整備済み）