简介
在Web开发中，Django表单在加速开发和使数据收集过程更加简单方面派上用场。但是，他们缺乏我们想要的视觉上吸引人的外观和感觉。那么，我们如何设计它们？在本文中，我们将探讨两种造型django表格的有效方法，并使它们在视觉上吸引人，并给您的用户留下持久的印象。

样式django表格：两种方法

1。 django脆皮形式

这是一个流行的第三方Django应用程序，可改善Django表单的渲染和样式。它建立在Django内置的Django表单框架之上，并可以轻松控制网站中表单的表示方式。使用酥脆的表格，您可以快速指定应如何在前端呈现您的表格，从而使样式和自定义形式布局的过程更加容易，更为标准化。您可以从他们的正式文档here中了解有关Django Crispy表格的更多信息。

• 要使用酥脆的表格，我们必须首先使用命令将其安装到本地计算机： pip安装django-crispy-forms

• 成功安装后，将其添加到您的Django应用程序中的已安装应用列表
  

INSTALLED_APPS = [
    .
    .
    .
    'crispy_forms',
]

• 在包含django表单的HTML模板上，在页面顶部添加脆皮。

{% load crispy_forms_tags %}

• 最终将“ | crispy”过滤到您的表单内容，如下所示：

<form action="" method="post">  
    {{form|crispy}}
    <input type="submit"/>
</form>

现在刷新您的页面并查看结果。有关Django脆皮形式的更多深入信息和高级使用，请参阅其官方文件。

2。手动样式

手动样式涉及将自定义类或ID属性分配给单个表单字段，类似于传统的HTML表单。通过这样做，您可以完全控制该表格的外观和行为，从而使您可以根据其特定的设计偏好进行定制。在寻求为Django表单实现完全定制且独特的样式时，此方法尤其有利，因为它允许与CSS无缝集成，从而赋予创建视觉上令人惊叹和以用户为中心的Web接口的能力。现在，让我们看看它的完成方式。

• 创建一个新文件â词。

• 在forms.py文件，导入表单和其他必要模块中。

from django import forms

• 首先使用默认Django表单创建方法创建表单。

class UserRegister(UserCreationForm):
    class Meta:
        model = User
        fields = ['username','email','password1','password2']

• 现在根据需要自定义字段。

username = forms.CharField(widget=forms.TextInput(attrs={'class': 'form-control','placeholder':'Your username'}))

 email = forms.EmailField(widget=forms.EmailInput(attrs={'class':'form-control','placeholder':'Your email Eg: sample@sample.com'}))

password1 = forms.CharField(widget=forms.PasswordInput(attrs={'class':'form-control','id':'pass-one','placeholder':'Enter password'}))

 password2 = forms.CharField(widget=forms.PasswordInput(attrs={'class':'form-control','id':'pass-two','placeholder':'Repeat password'}))

一些解释：

• username=forms.CharField(widget=forms.TextInput(attrs={'class':'form-control','placeholder':'Your username'}))：通过将'用户名'字段的小部件更改为textInput，并使用attrs字典添加一些HTML属性，此行可以个性化该字段。在这种情况下，该字段将显示为文本输入，带有占位符文本“您的用户名”和类“表单控制”，该文本经常用于基于Bootstrap的项目。

• email=forms.EmailField(widget=forms.EmailInput(attrs={'class':'form-control','placeholder':'Your email Eg: sample@sample.com'}))：该行修改了'电子邮件'字段，该字段将小部件更改为emailInput，并使用attrs dictionary添加HTML属性。该领域的占位符文本将读为“您的电子邮件：sample@sample.com”，该字段将显示为带有“表单控制”类的电子邮件输入。

• password1=forms.CharField(widget=forms.PasswordInput(attrs={'class':'form-control','id':'pass-one','placeholder':'Enter password'}))：此行通过将其小部件更改为密码输入并使用attrs字典添加HTML属性来改变“ password1”字段。该字段将显示为密码输入，其中包括“ form-control”，“ pass-one”的ID和默认文本“输入密码”。

• password2=forms.CharField(widget=forms.PasswordInput(attrs={'class':'form-control','id':'pass-two','placeholder':'Repeat password'}))：此行改变了'password2'字段，类似于'password1'字段，但具有不同的ID属性（'pass-two'）和占位符文本'重复密码'。

现在，通过这些调整，UserRegister表单将显示每个字段的所需样式和占位符文本，从而使用户注册过程更加美观和用户友好。

结论

使用这两种方法可以保证您的Django表格在视觉上具有吸引力，并且肯定会给您的用户留下持久的印象。请记住，将用户体验保持在设计选择的最前沿。以用户为中心的接口不仅可以提高应用程序的总体可用性，而且还可以为提高用户满意度和忠诚度铺平道路。