如何使用基于Django 1.11模板的表单呈现将CSS类添加到窗口小部件/字段

Question

注意：这个问题不应该与之前类似但在Django 1.11发布基于模板的表单呈现之前相似的问题混淆。

我知道Django现在有基于模板的表单渲染。 据我所知，这应该解决了必须从视图或表单中注入CSS类的问题，而不是将所有HTML / CSS保留在模板中。

这是我的目标：让我的表单和视图集中显示的内容，并着重讨论了如何时显示我的模板。 所以我想在我的模板中保留所有HTML / CSS。

所以，我的问题是：

如何从模板系统向所有TextInput小部件添加类（例如， form-text ）？
如何从模板系统向所有错误消息（验证失败）添加类（例如， alert-warning ）？

我可能误解了这个新功能的一些内容，所以如果我这样做了，请随时告诉我这是不是它的工作原理，或者我是在问这个不可能的事情。 理想情况下，我想实现这些表单渲染更改到主模板。

示例问题

views.py ：

class SignUp(generic.edit.CreateView):

    model = models.User
    template_name = 'usermgmt/sign_up.html'
    form_class = forms.UserCreateForm
    success_url = '/sign_up_done/'

templates/master.html （我想在这里添加一些导致所有TextInput小部件获取类的东西）：

<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<title>{% block title %}{% endblock %} | Website</title>
</head>
<body>
  <div class="content-wrapper clearfix">
    {% block main %}{% endblock %}
  </div>
</body>
</html>

templates/usermgmt/sign_up.html ：

{% extends 'master.html' %}

{% block title %}Sign Up{% endblock %}

{% block main %}
<h1>Sign Up</h1>
<p>Enter your email to sign up!</p>
<form class="form-group" method="post">
  {% csrf_token %}
  <input type="hidden" name="next" value="{{ next }}">
  {{ form.as_p }}
  <button class="btn btn-primary" type="submit">Sign Up</button>
</form>
{% endblock %}

Answer 1

继续JoséTomásTocino上面的回答，在Django 1.11中，我发现我的目录结构必须是：

主/模板/ Django的/表格/部件/ text.html

Answer 2

据我所知，从Django 1.11的发行说明和我自己的测试中，新功能只允许我们通过简单地为每个窗口小部件类型提供HTML文件来轻松自定义窗口小部件的呈现方式。 在之前的Django版本中，您必须提供forms.widget.Widget的子类，并将该窗口小部件forms.widget.Widget分配给您的模型/表单字段（IIRC）。

如果你想让所有TextInput小部件都有一个特定的类，你将不得不添加自定义text.html （也可能是你自己的attrs.html ）。

例如，假设我有一个带有main应用程序的myforms项目。 根据文件：

如果使用TemplatesSetting渲染器，则覆盖窗口小部件模板与覆盖项目中的任何其他模板的工作方式相同。 您无法使用其他内置渲染器覆盖内置窗口小部件模板。

所以我们需要在settings.py文件中settings.py渲染器：

FORM_RENDERER = 'django.forms.renderers.TemplatesSetting'

但是如果我们只这样做，我们需要为所有输入元素提供模板。 根据文件：

使用此渲染器以及内置窗口小部件模板需要在INSTALLED_APPS中[添加]'django.forms'，并且至少需要一个APP_DIRS = True的引擎。

所以我们将django.forms添加到INSTALLED_APPS 。 现在，为了添加我们的文本输入元素的自定义，我们需要创建文件main/templates/django/forms/widgets/text.html并在那里添加我们的自定义HTML代码，例如：

<input type="text" class="myclass" value="{{widget.value}}">

因此，如果我们在模板中显示表单，则只要需要呈现CharField ，该代码就会出现。

但是，如果您需要每个字段的控制级别，例如每个字段需要不同的类，则所有这些都无关紧要。 在这种情况下，您应该将我写的内容与django-widget-tweaks结合起来，这样您就可以拥有更灵活的小部件自定义。

如何使用基于Django 1.11模板的表单呈现将CSS类添加到窗口小部件/字段

问题描述

示例问题

2 个解决方案

解决方案1
8 2017-05-21 18:47:52

解决方案2
3 已采纳 2017-03-06 20:51:37

如何使用基于Django 1.11模板的表单呈现将CSS类添加到窗口小部件/字段

问题描述

示例问题

2 个解决方案

解决方案1 8 2017-05-21 18:47:52

解决方案2 3 已采纳 2017-03-06 20:51:37

解决方案1
8 2017-05-21 18:47:52

解决方案2
3 已采纳 2017-03-06 20:51:37