向 Django 脆皮表单字段添加额外的 HTML 标记和属性答案

【问题标题】：Adding extra HTML tags and attributes to Django crispy-forms fields向 Django 脆皮表单字段添加额外的 HTML 标记和属性
【发布时间】：2014-11-13 16:30:03
【问题描述】：

我将 django-crispy-forms 与 Bootstrap 一起使用，我想在为单个字段呈现的 HTML 内部添加一些额外的 HTML。

例如，如果我的表单包含，

recipients = forms.CharField(label='To',widget=forms.TextInput(
    attrs={'placeholder': 'Enter phone number, contact or group (add as many as you like)'}))

那么正常渲染（使用Bootstrap模板）是，

<div id="div_id_recipients" class="control-group">
    <label for="id_recipients" class="control-label requiredField">
         To<span class="asteriskField">*</span>
    </label>
    <div class="controls">
         <input class="textinput textInput" id="id_recipients" name="recipients" placeholder="Enter phone number, contact or group (add as many as you like)" type="text">
    </div>
</div>

我想要做的是在最后的关闭 div 之前出现一些额外的 HTML。所以它看起来像，

<div id="div_id_recipients" class="control-group">
    <label for="id_recipients" class="control-label requiredField">
         To<span class="asteriskField">*</span>
    </label>
    <div class="controls">
         <input class="textinput textInput" id="id_recipients" name="recipients" placeholder="Enter phone number, contact or group (add as many as you like)" type="text">
    </div>

    <div class="controls-aside">
         <button type="button" class="btn">Address Book</button>
         <button type="button" class="btn">Add Contact</button>
    </div>

</div>

我知道我可以用自定义模板替换此字段的现有模板，但我希望能够在不进行复制/粘贴的情况下重复使用他们的模板，因为这使得它不太易于维护。

那么实现这一点的最佳方法是什么？如果有人可以建议如何做，我还想在 label 中添加一个额外的类？

【问题讨论】：

Crispy 表单允许您覆盖表单布局并添加元素，您阅读过文档吗？：django-crispy-forms.readthedocs.org/en/latest/layouts.html
我已经非常详尽地阅读了文档好几次。除非我为它们编写自定义模板，否则布局覆盖不允许我在需要它的控件组内部添加内容。但随之而来的是可维护性问题，因为我必须使我的模板与标准模板保持一致。我想我目前的主要选择是看看设计师是否可以更改模板，以便可以将内容移到控制组之外。
如果你仔细阅读，你可以使用可用的标签在 forms.py 文件中创建表单布局，尤其是像Button('address_book', 'Address Book')
@petkostas 是的，我很清楚这个选项。但是，正如我之前所说，该选项不允许我将 HTML inside 添加到 Bootstrap control-group。它所要做的就是在前一个control-group 的末尾追加一个新的control-group。这是一个简单的解决方案，如果设计允许，我不需要就 SO 提出任何问题。
对不起，我没有看到控制组，在这种情况下，是的，您将需要一个自定义模板来覆盖该行为，除非您的设计允许您将元素分组到另一个包装类中，在这种情况下，您可以使用脆皮表单的包装类。

标签： django twitter-bootstrap django-forms django-crispy-forms

【解决方案1】：

关于在布局中添加 HTML。上一小时我需要一个非常自定义的 HTML，所以这样做了：

（格式化）

i = self.helper.layout.fields.index('guest_email')
self.helper.layout.insert(
    i+1,
    HTML('<a href="{}">{}</a>'.format(
        reverse_lazy('invite_guests'),
        _('Invite to a party'))
))

我来谷歌搜索 Crispy Forms 的 HTMLWrapper 类示例，这样我就可以做更漂亮的事情了：

self.helper['guest_email'].wrap(HTMLWrapper(
    'guest_email', 
     before='',
     after='<a href="{}">{}</a>'.format(href, title))

如果我最终创建了一个，我会回来发布它。

【讨论】：

【解决方案2】：

对我来说就是这样：

from crispy_forms.layout import Field, HTML

self.helper["some_field_name"].wrap(Field, HTML("<p>Example</p>"))

使用 HTML 的好处是它还使您可以使用上下文变量。

【讨论】：