如何使用Django Widget Tweaks来定制Django表单

Django表单是一个伟大的功能，只需几行代码就能创建可用的表单。但Django并不允许我们轻易地编辑表单以获得好的设计。在这里，我们将看到自定义Django表单的方法之一，这样它们就能按照我们的愿望在HTML页面上看起来。基本上，我们将检查将我们自己的自定义css、类或id加入到表单的各个字段的方法。

比方说，我们有一个简单的Django表单，将有四个字段。

• First Name
• Last Name
• Username (available default)
• Password (available default)
• Confirm Password (available default)

我们不打算讨论如何创建这个表单，而是要看看如何定制Django表单的前端。要在Django中创建一个表单，你可以查看 – 如何使用Django表单创建一个表单？

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

默认的Django表单

其中将有一个简单的代码，如

{{form}}
 <input type="submit" value="submit">

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

使用as_p的Django表格

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

{{form.as_p}}
<input type="submit" value="submit">

但我们需要为表单添加自定义类和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 widget tweaks，让我们把它导入到我们正在工作的HTML文件中。
write this

{%加载widget_tweaks %}

在你的HTML页面的顶部，我们必须简单地改变每个字段。

{% load widget_tweaks %}
  
<div class="form-group">
  // 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" %}
</div>
  
<div class="form-group">
   // 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" %}
</div>
  
<div class="form-group">
   // username is the default name of username in django forms
  {% render_field form.username type="text" class="form-control" id="exampleInputUsername" placeholder="Username" %}
</div>
  
<div class="form-group">
   // password1 is the default name of password in django forms
  {% render_field form.password1 type="password" class="form-control" id="exampleInputPassword" placeholder="Password" %}
</div>
  
<div class="form-group">
   // 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" %}
</div>
  
<div>
  <button type="submit" value="Submit" > Register </button>
</div>

每个字段的名称已经在代码中用”//”解释。在CSS文件中，我们将有所有的代码，用于按类别或ID定制每个文件。

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