(最終更新月:2021年12月)
「登録ページ、編集ページなどフォームの見た目を綺麗にしたい!」
「フォームにクラス名を指定するにはどうするの?」
「数も多いし一つ一つ変えていくのは面倒!」
というDjango初学者の方へ向けた記事となります
当記事でご紹介する方法は、
- HTMLテンプレートはいじらない
- フォームクラスでいちいちフィールドを書く必要がない
という、一気にクラスを追加できる方法です
まずはBootstrapクラスである「form-control」を適用した結果のビフォーアフターをご覧ください
当記事はアプリ開発~公開までをご紹介しているシリーズの一記事になります
最終的には、下記リンク先のような日報アプリを開発、公開できるように進めていきます
興味のある方は下記よりシリーズをまとめたページへお進みください

ビフォーアフター
ビフォー

アフター

通常ですと、HTMLファイル上で、
<input class="form-control" ....>
もしくは、forms.py内のフォームクラスで、
title = forms.CharField(forms.TextInput(attrs={"class":"form-control"} ...)
などと、それぞれのフォームに対してクラスを適用しなければなりません
フォームがたくさんある場合で、「form-control」などよく使うクラス名であれば一気に書き換える方法をオススメします
一気にクラス名を追加する方法
Formクラスの__init__関数内でクラス名を追加することができます
フォームフィールド名.widget.attrs.update({“class”: クラス名”})
クラス一つであれば、これで完了です
複数のフィールドで一気に書き換えるには「for loop」を使い、全フィールドを取り出して行う必要があります
【実例コード】
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 > NippoForm|コード全体】
from django import forms
class NippoForm(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クラスを追加しています
まとめ
当記事では、一気に複数のフォームへクラスの追加をする方法を解説しました
やり方として、
- Formクラスの__init__メソッド内で、
- for field in self.base_fields.values()で全てのフィールドを取り出し、
- field.widget.attrs.update({“class”:”クラス名”})でクラス名を追加する
という3ステップを覚えておきましょう
さて、次回は、削除ページのUIを変更します
Bootstrapの「モダル」を使い、削除確認画面が出てくる方法をご説明します
関連書籍
当ブログでは、日報アプリ開発を通じて、Webアプリを一から開発し公開するまでを初学者の方でもわかるようにと記事を連載しています
「Djangoでのアプリ開発を学びたい!」
「Djangoで開発したアプリをWebで公開するにはどうするの?」
という方は必見です!
