Djangoのフォームにclassを付ける方法

djangoのフォームをいざ作ってみましたが、初期状態だと何か味気ないですよね。そんな時は、classを命名して自分なりに見えやすいものにアレンジしてみましょう。

しかしながらformにはどうやってclassを命名したら良いんだ？って疑問を解決するのが今回の記事になります。

コンテンツ

動作環境

環境

・django 2.1

・python3.8

初期状態のフォームのコード

とりあえず書いてみないことには始まりません。

早速コードを書いてみます。

ログインフォームという設定で書いてみます。

views.py

from .forms import LoginForm

def index(request):
    form = LoginForm（）
    return render(request, 'index.html', {'form':form})

index.html

<form action="" method="POST">
    <ul>
        <li>Username: </li><div>{{ form.username }}</div>
        <li>Password: </li><div>{{ form.password }}</div>
        <button type="submit">Login</button>
    </ul>
</form>

そしてシンプルにformを書いてみます。

from django import forms

class LoginForm(forms.Form):
    username = forms.CharField(required=True,
                                max_length=255,)
    
    password = forms.CharField(required=True,
                                max_length=255,
                                )

そしてこの状態でブラウザに表示されるのはこのような状態になります。

実に素っ気無いですが、形としては一応できています。

この状態を実際にブラウザのdevツールで確認して見たのが下の画像です。

{{ form.username }}はブラウザではこのような中身で表示されていることがわかります。

そして今回行いたいこととしては、このinputタグにclassをつけてより、UI的に優れた見た目にすることでしたね。

それでは次で説明します。

フォームにクラスを付ける方法

djangoのフォームを使用するからにはformで設置したいもの。

コードがこれになります。

class LoginForm(forms.Form):
    username = forms.CharField(
        required=True,
        max_length=255,
        widget=forms.TextInput(
            attrs={
                'placeholder': 'Username',
                'class': 'input-field',
            }
        ))
    
    password = forms.CharField(
        required=True,
        max_length=255,
        widget=forms.PasswordInput(
            attrs={
                'placeholder': 'Password',
                'class': 'input-field',
            }
        ))

注視すべき点として、widget.attrsの引数を用いてclassを命名しcssクラスを適用することができます。

attrsのキーの’class’がまさに、classを意味し、バリューでの’input-field’がクラス名ということになります。

ちなみに同様に’placeholder’: ‘Password’に関してもinputタグのplaeholder属性を表し、タグの背景にうっすらとUsernameとPasswordが確認でき入力項目がわかり易く表示されます。

CSSをアレンジしてみる

.input-field{
    background: #fddada;
    padding: 7px 7px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    width: 180px;
}

.input-field:hover{
    background: #fff;
}

これでモダンな感じに仕上がりました。