Django Forms 提供了基本的資料輸入功能，但為了提升用戶體驗，對表單進行樣式設計是非常重要的。本文將探討如何利用 CSS 美化 Django Forms 以及實際案例。

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 結合的表單樣式設計

A visually engaging webpage mockup displaying a stylish Django form integrated with CSS and Bootstrap

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 的高級使用方法。