如何使用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 Widget Tweaks来定制Django表单？

默认的Django表单

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

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

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

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

使用as_p的Django表格

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

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

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

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

因此，让我们看看如何使它看起来像这样的好。

如何使用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>