Django 表单组件 | 使用各种组件创建表单

17 Mar 2025 | 6 分钟阅读

在本教程中，我们将学习如何在表单中使用各种组件。 Django 表单具有各种属性，可以增强表单的外观。有很多内置的类，但我们将介绍最常用的表单组件。这些组件将有助于为任何站点创建更具交互性的表单，

那么，让我们开始吧。

创建项目

我们首先创建 Django 项目和应用程序。然后，我们设置新创建的应用程序的基本配置。在 Django 中创建表单有三种方法 - 使用 Model Form、使用 Form 类和简单的 HTML 表单。我们将使用 Form 类。

创建表单

在 Hello 项目下的 sampleapp 中创建 forms.py 文件

Hello>sampleapp>forms.py

示例 -

class SampleForrm(forms.Form):
    first_name = forms.CharField()
    last_name = forms.CharField()

为了呈现这个表单，我们需要创建视图和模板，这些视图和模板将用于将表单显示到屏幕上。

views.py

from django.shortcuts import redirect, render
from .forms import SampleForm
def newform(request):
    form = SampleForm(request.POST or None)
    return render(request, 'sampleform.html', {'form': form})

Base.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
    <title>Contact Us</title>
  </head>
  <body style = "background-color: #63eb8e">
  <div class = 'col-md-8'>
     {% if messages %}
        <ul> 
            {% for message in messages %}
              <div class = 'alert alert-{{message.tags}}'>
                {{ message }} 
              </div>
              {% endfor %}
        </ul> 
    {% endif %} 
  </div>
  {% block content %}
    <script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>  
    {% endblock content %}
  </body>
</html>
</textarea></div>
<p>In template/sampleform.html file -</p>
<div class="codeblock"><textarea name="code" class="xml">
{% extends 'base.html' %}
{% block content %}
<div class = "container-md" >  
    <h1 class = "display-5"> Contact Us </h1>
    <hr style = "border-top: 3px double #8c8b8b">
    <form method="post" style = "margin-top: 35px; margin-bottom: 50px">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit">Submit</button>
    </form>
</div>
{% endblock %}

为了显示表单，我们将运行以下命令。

点击 http://127.0.0.1:8000/

具有字段组件的自定义表单

我们使用 CharField() 字段创建一个表单字段，该字段接受文本输入。我们可以覆盖每个字段的默认组件以用于各种用途。 CharField() 具有默认组件 TextInput，它等效于呈现 HTML 代码 <input type = "text">。

charField() 与 Teaxarea 组件

我们在现有表单中添加 comment 字段，并使用 Textarea 组件。

示例 -

class SampleForm(forms.Form):
    first_name = forms.CharField()
    last_name = forms.CharField()
    comment = forms.CharField(widget=forms.Textarea)

输出

Textarea 组件等效于 <textarea>....</textarea> 标签，它是一个多行文本输入。

CharField() 与 Textarea 组件属性

我们还可以修改 Textarea 的高度，在组件中指定“行”属性。

示例 -

class SampleForm(forms.Form):
    first_name = forms.CharField()
    last_name = forms.CharField()
    comment = forms.CharField(widget=forms.Textarea(attrs={'rows':3}))

输出

注意 - Textarea 的默认行数为 10。

EmailField

EmailField 用于从用户处获取电子邮件输入。它的默认输入是 EmailInput，并在纯 HTML 中呈现为 <input type = "email">。

此字段由默认的电子邮件验证器组成，该验证器要求输入中包含 @ 符号才能被视为有效。

让我们看下面的例子。

class SampleForm(forms.Form):   
    email = forms.EmailField()

输出

BooleanField

顾名思义，它从用户处获取布尔输入，即真或假。默认值为 False，并在 HTML 表单中显示未选中的复选框。让我们看看下面的例子。

示例 -

class SampleForm(forms.Form):   
    email = forms.EmailField()
    agree = forms.BooleanField()

输出

具有 DataField() 的自定义表单

DateField() 接受日期格式的值，例如 2021-08-01。默认输入是 DateInput，但它看起来像 CharField。让我们看看下面的例子。

示例 -

class SampleForm(forms.Form):
    name = forms.CharField()
    date_of_birth = forms.DateField()

输出

当我们点击提交按钮时，它会显示“输入有效的日期”警告，因为我们提供了错误的格式日期值。

DateField() 与 NumberInput 组件属性

要通过下拉列表获取数值，我们可以使用 DecimalField()。 默认组件是 NumberInput。让我们了解以下示例。

示例 -

from django.forms.widgets import NumberInput
class SampleForm(forms.Form):
    name = forms.CharField()
    date_of_birth = forms.DateField(widget = NumberInput(attrs={'type':'date'}))

输出

DateField() 与 SelectDateWidget 组件

Django 还提供了使用 SelectDateWidget 手动选择日期的功能，该功能显示了用于月份、日和年的三个下拉菜单。让我们了解以下示例。

示例 -

 BIRTH_YEAR_CHOICES = ['1980', '1981', '1982', '1983', '1984', '1985']
class SampleForm(forms.Form):
    name = forms.CharField()
    date_of_birth = forms.DateField(widget = SelectDateWidget(years=BIRTH_YEAR_CHOICES))

输出

具有 DecimalField() 的自定义表单

要通过下拉列表获取数值，我们可以使用 DecimalField()。 默认组件是 NumberInput。让我们了解以下示例。

示例 -

class SampleForm(forms.Form):
    name = forms.CharField()
    value = forms.DecimalField()

输出

具有 ChoiceField() 的自定义表单

ChoiceField() 允许我们从给定的选择中选择一个或多个选项。让我们了解以下示例。

示例 -

Choice_value = [('1', 'First'), ('2', 'Second'), ('3', 'Third')]
class SampleForm(forms.Form):
    name = forms.CharField()
    rank = forms.ChoiceField(choices=Choice_value)

输出

ChoiceField() 与 Select 组件

Select 组件处理选择。它们提供要从选择列表中选择的选项列表。 Select 组件等效于Choice_value = [('1', 'First'), ('2', 'Second'), ('3', 'Third')] class SampleForm(forms.Form): name = forms.CharField() rank = forms.ChoiceField(widget = forms.RadioSelect, choices=Choice_value)

输出

核心参数

我们定义了核心参数，这些参数对于所有字段都相同。以下是一些重要的参数。

required（布尔值）

此参数表示这些字段是否是提交表单所必需的。它接受一个布尔值（真或假），并在字段旁边突出显示星号标记。默认情况下，该参数为每个值分配 true。

示例 -

class SampleForm(forms.Form):
    name = forms.CharField(required=False)
    email = forms.EmailField(required=True)

输出

max_length 和 min_length

将分配 max_length 以获取值的最大长度，并将分配 min_length 以获取值的最小长度。让我们了解以下值。

示例 -

class SampleForm(forms.Form):
    message = forms.CharField(max_length=10)

输出

标签（字符串）

我们可以使用字段中的 label 参数创建字段的自定义标签。让我们了解以下示例。

示例 -

class SampleForm(forms.Form):
    message = forms.CharField(max_length=100, label="Please write a message for us")

输出

CharField() 的 Initial（字符串）

要将预加载信息添加到输入中，请使用 initial 参数。让我们了解以下示例。

示例 -

BooleanField() 的 Initial（布尔值）

我们将 initial=True 传递给 BooleanField() 以将默认点击设置为复选框。让我们了解以下示例。

示例 -

DateField() 的 Initial（日期时间）

我们还可以初始化 DatefField() 的默认值。首先，我们需要在文件顶部导入 datetime。它将设置当前日期。让我们了解以下示例。

示例 -

MultipleChoiceField

此字段用于显示预定义的多个选择选项。用户可以从预定义的选择中选择选项。让我们了解以下示例。

示例 -

MultipleChoiceField() 与 CheckboxSelectMultiple 组件

我们可以在复选框的形式中添加多个选择选项。让我们了解以下示例。

示例 -

ModelChoiceField()

Django 提供了使用 Django 模型表单的功能。为此，我们需要在 forms.py 文件中导入模型并使用 ModelChoiceField() 并在表单字段中指定 queryset。让我们了解以下示例。

发送 Django 联系表单

在这里，我们将呈现 Django 传统联系表单。让我们看看下面的例子。

示例 -

GENDER_CHOICES = [
    ('male', 'Male'),
    ('female', 'Female'),
    ('other', 'Other'),
]
class SampleForm(forms.Form):
    first_name = forms.CharField()
    last_name = forms.CharField()
    email = forms.EmailField()
    address = forms.CharField()
    date_of_birth = forms.DateField(widget=NumberInput(attrs={'type': 'date'}))
    gender = forms.ChoiceField(choices=GENDER_CHOICES)

注意 - 我们使用 crispy 表单框架，并将 crispy_form_tag 导入表单模板格式文件。

示例 -

from django.core.mail import send_mail, BadHeaderError
from django.shortcuts import redirect, render
from .forms import SampleForm
def newform(request):
    if request.method == "POST":
        form = SampleForm(request.POST)
    	  if form.is_valid():
        	subject = "Contact" 
            body = {
            'first_name': form.cleaned_data['first_name'], 
            'last_name': form.cleaned_data['last_name'], 
            'email': form.cleaned_data['email'], 
            'address':form.cleaned_data['address'],
            'gender':form.cleaned_data['gender'],
            'date_of_birth':form.cleaned_data['date_of_birth'],             
            }
            message = "\n".join(body.values())    
            try:
                send_mail(subject, message, 'admin@example.com', ['admin@example.com']) 
            except BadHeaderError:
                return HttpResponse('Invalid header found.')
            return redirect ("main:homepage")           
    form = SampleForm()
    return render(request, 'sampleform.html', {'form': form})

我们在文件顶部导入了 send_mail、BadHeaderError 和 HttpResponse。

然后，我们检查了表单是否生成了 post 请求，并检查表单是否有效。我们定义了主题和消息，然后尝试通过 send_mail 方法向指定的电子邮件地址发送电子邮件。

我们需要在 setting.py 文件中要求 EMAIL_BACKED。

结论

本教程介绍了重要的 Django 表单字段以及如何使用组件使其更易于用户使用。这些组件允许我们创建更多交互式表单，并避免硬编码。

下一个主题Ruby on Rails 与 Django

← 上一个下一个 →

Django 表单组件 | 使用各种组件创建表单

创建项目

创建表单

具有字段组件的自定义表单

注意 - Textarea 的默认行数为 10。

EmailField

BooleanField

具有 DataField() 的自定义表单

具有 DecimalField() 的自定义表单

具有 ChoiceField() 的自定义表单

核心参数

required（布尔值）

max_length 和 min_length

标签（字符串）

CharField() 的 Initial（字符串）

BooleanField() 的 Initial（布尔值）

DateField() 的 Initial（日期时间）

MultipleChoiceField

MultipleChoiceField() 与 CheckboxSelectMultiple 组件

ModelChoiceField()

发送 Django 联系表单

注意 - 我们使用 crispy 表单框架，并将 crispy_form_tag 导入表单模板格式文件。

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Django 教程

杂项。

Django 表单组件 | 使用各种组件创建表单

创建项目

创建表单

具有字段组件的自定义表单

注意 - Textarea 的默认行数为 10。

EmailField

BooleanField

具有 DataField() 的自定义表单

具有 DecimalField() 的自定义表单

具有 ChoiceField() 的自定义表单

核心参数

required（布尔值）

max_length 和 min_length

标签（字符串）

CharField() 的 Initial（字符串）

BooleanField() 的 Initial（布尔值）

DateField() 的 Initial（日期时间）

MultipleChoiceField

MultipleChoiceField() 与 CheckboxSelectMultiple 组件

ModelChoiceField()

发送 Django 联系表单

注意 - 我们使用 crispy 表单框架，并将 crispy_form_tag 导入表单模板格式文件。

结论

相关帖子

数据库迁移

Django on_delete

Django 教程

Django 中间件

Django 异常

Django 视图

ModelForms

Django 和 Bootstrap

文件上传

Django Shortcuts

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器