Django 表单第 3 部分：字段和小部件

Django 表单的核心是 字段(Field) 和 小部件(Widget)。字段负责验证和处理输入数据，而小部件定义了渲染该字段的 HTML 元素。本文将详细探讨主要的字段和小部件，以及自定义的方法。

1. Django 表单字段

1.1 什么是字段?

字段是 Django 表单中定义和验证数据的基本组成部分。

• 在将用户输入的数据存储到 cleaned_data 之前进行验证。
• 每个字段都与 HTML 输入类型映射。

主要字段类型

字段基本用法

from django import forms

class ExampleForm(forms.Form):
    name = forms.CharField(max_length=50, required=True, label="Your Name")
    email = forms.EmailField(required=True, label="Your Email")
    age = forms.IntegerField(required=False, min_value=1, label="Your Age")

2. Django 表单小部件

2.1 什么是小部件?

小部件是 Django 表单中用于渲染每个字段为 HTML 时使用的元素。

• 定义字段的 HTML 标签和属性。
• 例如：CharField 默认使用 TextInput 小部件。

主要小部件类型

2.2 字段和 ID 属性

Django 表单在渲染为 HTML 时，会自动为每个字段添加一个唯一的 id 属性。该属性按照 id_<fieldname> 的格式生成。

• 例如：如果字段名称为 name，则渲染的 <input> 标签的 id 为 id_name。
• 此 id 属性在模板中非常有用：
  • JavaScript：动态处理特定字段。
  • Label 标签：通过 <label for="id_name"> 连接。

示例：字段和 ID 属性的应用

<form method="post">
    {% csrf_token %}
    <label for="id_name">Name:</label>
    <input type="text" id="id_name" name="name">

    <script>
        document.getElementById('id_name').addEventListener('input', function() {
            console.log(this.value);
        });
    </script>
</form>

3. 字段和小部件自定义

3.1 字段属性自定义

Django 表单可以使用 attrs 来修改 HTML 元素的属性。

示例：修改字段属性

class CustomForm(forms.Form):
    username = forms.CharField(
        max_length=100,
        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'
        })
    )

3.2 创建自定义小部件

根据需要，可以创建自定义小部件进行使用。

示例：创建自定义小部件

from django.forms.widgets import TextInput

class CustomTextInput(TextInput):
    template_name = 'custom_widgets/custom_text_input.html'

class CustomForm(forms.Form):
    custom_field = forms.CharField(widget=CustomTextInput())

4. 实战案例：创建样式化表单

4.1 应用 Bootstrap

在与 Bootstrap 一起使用时，可以为每个字段添加 class='form-control' 以进行样式处理。

示例：Bootstrap 风格表单

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

4.2 自定义 CSS 和表单样式

添加 CSS 文件可以进一步调整表单样式。

示例：与 CSS 关联的模板

<form method="post">
    {% csrf_token %}
    <div class="form-group">
        <label for="id_name">Your Name</label>
        <input type="text" class="form-control" id="id_name" name="name">
    </div>
    <div class="form-group">
        <label for="id_email">Your Email</label>
        <input type="email" class="form-control" id="id_email" name="email">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

5. 结论

Django 表单的字段和小部件在处理和验证数据以及构建用户界面方面发挥着关键作用。除了提供的字段和小部件外，还可以根据需要进行自定义，以设计适合项目的表单。

在下一篇文章中，我们将深入探讨 验证和表单自定义。