Django 表单第5篇：利用 CSS 进行样式处理

Django 表单提供了基本的数据输入功能，但为提高用户体验，给表单进行样式处理是很重要的。在这篇文章中，我们将探讨如何使用 CSS 装饰 Django 表单以及实际案例。

1. 基本 HTML 表单和 Django 表单

1.1 基本 Django 表单输出方式

Django 表单基本上会自动生成 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">用户名</label>
        {{ form.username }}
    </div>
    <div class="form-group">
        <label for="id_password">密码</label>
        {{ form.password }}
    </div>
    <button type="submit" class="btn btn-primary">提交</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">用户名</label>
        {{ form.username }}
    </div>
    <div class="form-group">
        <label for="id_password">密码</label>
        {{ form.password }}
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
</form>

结果页面

• 渲染应用了 Bootstrap 样式的表单字段和按钮。

3. Django FormHelper 与库的利用

3.1 django-crispy-forms 介绍

django-crispy-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', '提交'))

注意事项

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">用户名</label>
        {{ form.username }}
    </div>
    <div class="form-group">
        <label for="id_email">邮箱</label>
        {{ form.email }}
    </div>
    <div class="form-group">
        <label for="id_password">密码</label>
        {{ form.password }}
    </div>
    <button type="submit" class="btn btn-success">注册</button>
</form>

5. 结论

通过使用 Django 表单和 CSS，用户体验可以得到显著改善。从使用 attrs 进行基本样式处理到利用 Bootstrap 和 django-crispy-forms 等库进行高级样式处理，尝试不同的方法吧。此外，当使用 django-crispy-forms 时，请注意初始化方法的设置，以确保日志文件的整齐。~！

在下一篇文章中，我们将讨论Django 表单的高级用法。