{{ form.as_ul }} – 将 Django 表单呈现为列表

djangopythonprogramming

Django 彻底改变了 Web 工程，使全球开发人员都可以访问和简化它。其显著特点是强大的表单操作系统，它简化了 Web 表单的开发，同时也方便了表单的验证和处理。专注于将这些表单显示为 HTML 列表为用户提供了多种好处，例如由于易于定制的功能而具有高级样式的可能性以及增强的响应能力和增强的可访问性。

本文深入探讨了有效地将 Django 表单显示为列表的细微差别，阐明了它们的众多好处，描述了简单的实施步骤，并提供了最终结果的最佳实践。通过仔细阅读本文档，您也可以在利用 Django 强大的表单处理功能制作网站的同时提高效率!

为什么将 Django 表单展示为列表?

将 Django 表单展示为列表为 Web 开发人员提供了多种优势:

适应性样式:列表提出了一个灵活的样式框架，简化了制作视觉吸引力和反应性表单布局的过程。

在当今时代，拥有反应性设计至关重要。列表通过灵活地适应各种屏幕尺寸和设备来提供此功能，从而确保每个用户在不同平台上的体验一致。

同样重要的是，强调将表单展示为列表如何通过减少开发人员手动编写 HTML 和 CSS 代码来提高可维护性。这将大大简化表单的维护和更新。

最后，在展示表单时利用列表可以解决残障用户的可访问性问题，因为它可以让屏幕阅读器更好地解释所有组件之间的关系。

如何将 Django 表单展示为列表

现在我们掌握了将 Django 表单显示为列表的好处，让我们深入研究此过程所涉及的步骤。

制作 Django 表单

在 forms.py 文件中标识表单类对于创建 Django 表单至关重要。从 django.forms.ModelForm 或 django.forms.Form 继承将有效地完成此任务。

导入所需的模块:来自 django 包的 forms 和来自当前应用程序的 models.py 文件的 UserProfile 模型。
制作一个名为 UserProfileForm 的表单类，该类从 forms.ModelForm 继承。
在 UserProfileForm 类中，创建一个嵌套的 Meta 类。
将 Meta 类的 model 属性建立到 UserProfile 模型。这会通知 Django 将利用该表单来创建或修改 UserProfile 实例。
在 Meta 类的 fields 属性中列出字段名称。这些是将合并到表单中的字段。

from django import forms
from .models import UserRegistration

class UserRegistrationForm(forms.ModelForm):
    class Meta:
        model = UserRegistration
        fields = ['first_name', 'last_name', ‘roll_no’, 'password']

利用 Django 的 as_ul 方法

随后，我们将利用 Django 的内置方法将表单显示为无序列表 - as_ul 方法。在您的模板中，您可以像这样在表单实例上调用 as_ul 方法:

创建一个带有属性 method="POST" 的 HTML 表单组件，以表示表单在提交数据时将使用 POST 策略。
调用 {% csrf_token %} 格式标记以在表单中包含 CSRF 令牌，这有助于防止跨站点请求模仿攻击。
制作 HTML 无序列表 (ul) 元素。
在 ul 元素中，调用 {{ form.as_ul }} 模板标记以将 Django 表单显示为列表。这将为每个表单字段生成所需的 HTML，每个字段都显示在其自己的列表项 (li) 元素中。
包含一个带有属性 type="submit" 的 HTML 输入元素，以构建表单的提交按钮。

<form method="POST">
  {% csrf_token %}
  <ul>
    {{ form.as_ul }}
  </ul>
  <input type="submit" value="Submit">
</form>

更改列表外观

您可以通过将 CSS 类或内联样式附加到 ul 元素来方便地修改列表的外观。例如:

将 CSS 类 (class="form−list") 附加到 ul 元素，以使用外部或内部 CSS 规则应用自定义样式。
使用 style 属性将内联样式分配给 ul 元素。在本例中，我们通过将 padding−left 设置为 0 来删除列表的默认左填充。

<ul class="form-list" style="padding-left: 0;">
{{ form.as_ul }}
</ul>

我们来看看整个代码:

from django import forms
from .models import UserRegistration

class UserRegistrationForm(forms.ModelForm):
    class Meta:
        model = UserRegistration
        fields = ['first_name', 'last_name', '‘roll_no’, 'password']

<form method="POST">
  {% csrf_token %}
  <ul>
    {{ form.as_ul }}
  </ul>
  <input type="submit" value="Submit">
</form>

<ul class="form-list" style="padding-left: 0;">
  {{ form.as_ul }}
</ul>

输出

我们已成功将 Django 表单渲染为列表。以下是最终的用户注册表单，其中包含四个字段。

将 Django 表单显示为列表的最佳实践

为了确保最佳的用户体验和可维护性，在将 Django 表单显示为列表时，请遵循以下最佳实践:

使用语义标记:利用适当的列表组件(如 ol 和 li)来提供卓越的上下文和高级可访问性。
包含标签和占位符:确保为每个表单字段添加标签以及占位符，以指导用户完成表单填写过程。
实施响应式设计:通过使用 CSS 媒体查询或 CSS 确保您的列表具有响应性框架，如 Bootstrap，提供响应式列表类。
增强可访问性:将 ARIA 属性和角色附加到您的列表中，以提高残障用户的可访问性。
个性化错误消息:当表单验证失败时，向用户提供清晰且信息丰富的错误消息。您可以个性化表单类中各个字段的错误消息，或使用 {{ form.errors }} 模板标记在表单顶部显示错误列表。
使用 JavaScript 进行实时验证:通过使用 JavaScript 提供实时表单验证来增强用户体验。这可以帮助用户在提交表单之前识别和纠正错误，从而减少提交失败和服务器端验证的次数。