如何使用 Django Widget Tweaks 自定义 Django 表单？

Django 表单是一个很棒的功能，只需几行代码就可以创建可用的表单。但是 Django 不会轻易让我们编辑表单以获得好的设计。在这里，我们将看到自定义 Django 表单的一种方法，因此它们将在我们的 HTML 页面上根据我们的意愿进行显示。基本上，我们将检查将我们自己的自定义 css、类或 id 包含到表单中的各个字段的方法。

假设我们有一个简单的 Django 表单，它将有四个字段：

• 名
• 姓
• 用户名（可用默认值）
• 密码（可用默认值）
• 确认密码（可用默认值）

我们不会讨论我们如何创建这个表单，而是我们将看到如何自定义 Django 表单的前端。要在 Django 中创建表单，您可以查看 – 如何使用 Django 表单创建表单？

最初的 Django 表单（可用的默认看起来像）

默认的 Django 表单

这将有一个简单的代码，如

HTML

{{form}}
 

当然，Django默认为我们提供了许多默认方法，比如使用form.as_p ，看起来像

使用 as_p 的 Django 表单

这将有一个简单的代码，如

HTML

{{form.as_p}}

但是我们需要向表单添加自定义类和 CSS。

如何使用 Django Widget Tweaks 自定义 Django 表单？

所以，让我们看看如何让它看起来像这样

Django表单输入表单定制

所以我们将使用 Django Widget Tweaks 来实现它。让我们使用 pip 安装 django-widget-tweaks

pip install django-widget-tweaks

现在转到 settings.py 中的 INSTALLED_APPS
并在 INSTALLED_APPS 中添加 widget_tweaks

INSTALLED_APPS = [
   'django.contrib.auth',

#...........(some more apps already here maybe)......
   
'widget_tweaks',

#...........(some more apps already here maybe)......
]

所以现在我们已经安装了 Django 小部件调整，让我们将它导入我们正在使用的 HTML 文件中
写这个

{% 加载 widget_tweaks %}

在 HTML 页面的顶部，我们只需更改 Every 字段：

HTML

{% load widget_tweaks %}
  

  // first_name is the name by which first name is created in django forms
  {% render_field form.first_name class="form-control" placeholder="First Name" type="text" %}

  

   // last_name is the name by which last name is created in django forms
  {% render_field form.last_name type="text" class="form-control" placeholder="Last Name" %}

  

   // username is the default name of username in django forms
  {% render_field form.username type="text" class="form-control" id="exampleInputUsername" placeholder="Username" %}

  

   // password1 is the default name of password in django forms
  {% render_field form.password1 type="password" class="form-control" id="exampleInputPassword" placeholder="Password" %}

  

   // password2 is the default name of confirm password in django forms
  {% render_field form.password2 type="password" class="form-control" id="exampleInputPassword1" placeholder="Confirm Password" %}

  

   Register 

每个字段的名称已在代码中的“//”中进行了解释。在 CSS 文件中，我们将拥有用于自定义每个按类或 ID 提交的所有代码。

所以让我们看看 Django 的调整如何帮助我们在每个字段中看到，我们有我们的类，因此我们可以根据自己的选择添加任何 CSS。所以，我们只需要用 css 设计 HTML，然后在 Django 中使用它，只需将 input 标签替换为 render_field 和 form.field_name 替换为 {% %} 并根据我们的选择进行设计。