【Django】ユーザ登録フォームのカスタマイズ


はじめに

以前、【Django】ユーザ登録機能の実装という記事を作成しましたが、
この時のユーザ登録フォームをカスタマイズしたいなと思ったのでそれに関して調べたことを記事にします。

上記の記事の内容が終わっている状態から進めていきますので、
まだご覧になっていない方はぜひご覧ください。

ちなみに、今現在の私のフォームは下記のようになります。

カスタマイズ

forms.pyを下記のように修正します。
fieldsの箇所は表示したい内容にしてください。

forms.py
from django.contrib.auth.forms import UserCreationForm

from .models import User


class SignUpForm(UserCreationForm):
    class Meta:
        model = User
        fields = ("username", "channel_name", "email", "password1", "password2")

    ### ここから追加
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        for field in self.fields.values():
            field.widget.attrs["class"] = "form-control"

__init__をオーバーライドしてfor文の処理を記述します。

何をやっているのかというと、self.fields.values()の内容を
for文で順に処理しています。

self.fields.values()の中にはclass Meta:で記載したfieldsの内容が入っています。
それらを順に取り出し、field.widget.attrs["class"] = "form-control"
classにform-controlを設定しています。

恐らくですが、各フィールドにform-controlというクラスを追加し、
cssを反映させているのだと思います。

もし間違っていたらすみません。

上記の内容を記述した結果下記のようなフォームになります。

結構見やすくなりました。

チャンネル名は任意入力、Eメールアドレスは必須入力なので、
その旨を記載しようと思います。

forms.py
class SignUpForm(UserCreationForm):
    class Meta:
        model = User
        fields = ("username", "channel_name", "email", "password1", "password2")

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        for field in self.fields.values():
            field.widget.attrs["class"] = "form-control"
        self.fields["channel_name"].help_text = "任意入力"    ### 追加
        self.fields["email"].help_text = "必須入力"    ### 追加

追加した結果が次のようになります。

無事追加されました。

さいごに

今回の記事は短いですが、これ以上書くこともないので以上にします。。。(笑)

forms.pyをいじることで結構色々できそうなので、
みなさんもぜひ色々試してみてください。