Django Formsは基本的なデータ入力機能を提供しますが、ユーザーエクスペリエンスを向上させるためにフォームをスタイリングすることが重要です。この記事では、Django FormsをCSSで装飾する方法と実際の事例を探ります。

1. 基本HTMLフォームとDjango Forms

1.1 基本Django Forms出力方式

Django Formsは基本的にHTMLを自動生成します。基本出力方式は次の通りです:

• as_p: 各フィールドを<p>タグで囲みます。
• as_table: 各フィールドを<tr>タグでレンダリングします。
• as_ul: 各フィールドを<li>タグで囲みます。

例: 基本出力方式

class ExampleForm(forms.Form):
    name = forms.CharField(label="Your Name")
    email = forms.EmailField(label="Your Email")
<form method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">Submit</button>
</form>

上記のコードは<p>タグで囲まれた基本スタイルで出力されます。

2. CSSと共にフォームスタイリング

2.1 attrs属性とBootstrapを活用したスタイル適用

attrs属性を使用することで、HTMLタグに直接CSSクラスを追加できます。これにより、BootstrapなどのCSSフレームワークを簡単に適用できます。

例: attrsでBootstrapスタイル適用

class BootstrapForm(forms.Form):
    username = forms.CharField(
        widget=forms.TextInput(attrs={
            'class': 'form-control',
            'placeholder': 'Enter your username'
        })
    )
    password = forms.CharField(
        widget=forms.PasswordInput(attrs={
            'class': 'form-control',
            'placeholder': 'Enter your password'
        })
    )

テンプレートでのフォームレンダリング

<form method="post">
    {% csrf_token %}
    <div class="form-group">
        <label for="id_username">Username</label>
        {{ form.username }}
    </div>
    <div class="form-group">
        <label for="id_password">Password</label>
        {{ form.password }}
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

結果HTML例

<input type="text" name="username" class="form-control" placeholder="Enter your username">
<input type="password" name="password" class="form-control" placeholder="Enter your password">

2.2 Bootstrapと共に使用するフォームスタイリング

例: Bootstrapスタイル適用

class BootstrapForm(forms.Form):
    username = forms.CharField(
        widget=forms.TextInput(attrs={
            'class': 'form-control',
            'placeholder': 'Enter your username'
        })
    )
    password = forms.CharField(
        widget=forms.PasswordInput(attrs={
            'class': 'form-control',
            'placeholder': 'Enter your password'
        })
    )

テンプレートでのフォームレンダリング

<form method="post">
    {% csrf_token %}
    <div class="form-group">
        <label for="id_username">Username</label>
        {{ form.username }}
    </div>
    <div class="form-group">
        <label for="id_password">Password</label>
        {{ form.password }}
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

結果画面

• Bootstrapスタイルが適用されたフォームフィールドとボタンがレンダリングされます。

3. Django FormHelperとライブラリ活用

3.1 django-crispy-formsの紹介

django-crispy-formsはDjango Formsに対してより良いスタイリングとレイアウト管理を提供します。

インストール

pip install django-crispy-forms

設定

settings.pyに次を追加します:

INSTALLED_APPS += [
    'crispy_forms',
]
CRISPY_ALLOWED_TEMPLATE_PACKS = ["bootstrap5"]
CRISPY_TEMPLATE_PACK = 'bootstrap5'

フォーム定義

from crispy_forms.helper import FormHelper
from crispy_forms.layout import Submit

class CrispyForm(forms.Form):
    email = forms.EmailField(label="Your Email")

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_method = 'post'
        self.helper.add_input(Submit('submit', 'Submit'))

注意点

django-crispy-formsは簡単なフォームスタイリングには有用ですが、初期化メソッド__init__を適切に構成しない場合はテンプレートデバッグログが過多になる可能性があります。ログファイルを整理された状態に保ちたいならこの点に注意してください。デバッグログをオフにして作業する開発者や、ログが散らかることを気にしない開発者にはおすすめですが、私个人的にはそれほど好まないスタイリング方式です。デバッグログを発生させないようにするためには初期化メソッドを完璧に設定する必要があり、そのためにはソースコードを深く掘り下げて分析しなければならないので、そんなことをするくらいなら別の方法でスタイリングします。

テンプレートで使用

<form method="post">
    {% csrf_token %}
    {{ form|crispy }}
</form>

4. 実例: 会員登録フォームスタイリング

4.1 フォーム定義

class SignupForm(forms.Form):
    username = forms.CharField(
        widget=forms.TextInput(attrs={
            'class': 'form-control',
            'placeholder': 'Enter your username'
        })
    )
    email = forms.EmailField(
        widget=forms.EmailInput(attrs={
            'class': 'form-control',
            'placeholder': 'Enter your email'
        })
    )
    password = forms.CharField(
        widget=forms.PasswordInput(attrs={
            'class': 'form-control',
            'placeholder': 'Enter your password'
        })
    )

4.2 テンプレートでのレンダリング

<form method="post">
    {% csrf_token %}
    <div class="form-group">
        <label for="id_username">Username</label>
        {{ form.username }}
    </div>
    <div class="form-group">
        <label for="id_email">Email</label>
        {{ form.email }}
    </div>
    <div class="form-group">
        <label for="id_password">Password</label>
        {{ form.password }}
    </div>
    <button type="submit" class="btn btn-success">Sign Up</button>
</form>

5. 結論

Django FormsとCSSを活用すると、ユーザーエクスペリエンスを大幅に向上させることができます。attrsを使用した基本スタイリングから、Bootstrapやdjango-crispy-formsのようなライブラリを活用した高度なスタイリングまで、さまざまな方法を試してみてください。そしてdjango-crispy-formsを使用する際には__init__初期化メソッド設定に気を付けて、ログファイルがきれいになることを忘れないでください〜！ 

次の記事ではDjango Formsの高度な使用法について取り上げる予定です。