在 django-crispy-forms 字段中添加或添加图标答案

【问题标题】：Prepend or append icon in field of django-crispy-forms在 django-crispy-forms 字段中添加或添加图标
【发布时间】：2017-05-04 11:06:36
【问题描述】：

我在表单中有以下字段：

<div class="form-group ">
 <div class="input-group">
  <input class="form-control" id="To" name="To" placeholder="To" type="text"/>
  <i class="glyphicon glyphicon-map-marker form-control-feedback"></i>
 </div>
</div>

看起来像

我正在尝试使用crispy-forms 获得类似的结果。

我试过了

self.helper.layout = Layout(
            Fieldset(
                'Title',
                PrependedText(
                    'From',
                    <i class="glyphicon glyphicon-map-marker"></i>
                    ),
                'To',
                'Date',
                ButtonHolder(
                    Submit('submit', 'Search', css_class='button white')
                )
            )
        )

但我得到了SyntaxError: invalid syntax。

是否可以在crispy-forms 中添加一个图标作为 PrependedText？如果没有，有没有其他选择？

（编辑）

尝试

self.helper.layout = Layout(
                        Field(PrependedText('From', HTML('<span class="glyphicon glyphicon-map-marker"></span>')), placeholder='From'),
                        'To',
                        'Date',
                        ButtonHolder(
                            Submit('submit', 'Search', css_class='button white')
                        )
                    )

不会引发任何错误，但不会显示图标。

【问题讨论】：

标签： django django-forms django-crispy-forms

【解决方案1】：

这适用于占位符：

self.helper = FormHelper()
self.helper.form_show_labels = False

self.helper.layout = Layout(
    Field(
        PrependedText('email',
                      mark_safe('<span class="glyphicon glyphicon-envelope"></span>'),
                      placeholder=_("Enter Email"), autofocus="")
    ),
    Field(
        PrependedText('name',
                      mark_safe('<span class="glyphicon glyphicon-user"></span>'),
                      placeholder=_("Enter Full Name"))
    ),

【讨论】：

【解决方案2】：

只需像这样使用 django 的 mark_safe 助手：

from django.utils.safestring import mark_safe
Field(PrependedText('From',
                    mark_safe('<span class="glyphicon glyphicon-map-marker"></span>')),
      placeholder='From')

【讨论】：

【解决方案3】：

使用 glyphicons 的替代方法是使用类似的 unicode 符号：

self.helper.layout = Layout(
            Field(PrependedText('From', '&#x1f4cc'), placeholder='From'),
            Field(PrependedText('To', '&#x1f4cc'), placeholder='To'),
            Field(PrependedText('Date', '&#x1f4c5'), placeholder='Date'),
            FormActions(ButtonHolder(Submit('submit', 'Search', css_class='btn btn-primary')))
        )

这里的问题是放置器支架由于某种原因无法正常工作...

另请注意，按照here 的建议，将'&#xFE0E;' 附加到 unicode 符号以强制它不呈现为表情符号似乎不起作用。

【讨论】：

【解决方案4】：

self.helper.layout = Layout(
   Div(HTML('''
       <div class="input-group"> 
         <input class="form-control" id="To" name="To" placeholder="To" type="text"/>
         <i class="glyphicon glyphicon-map-marker form-control-feedback"></i> 
       </div>'''), 
      class="form-group")

【讨论】：

感谢您的回答@NeErAj。这似乎将该字段的完整 html 硬编码为清晰的表单，这对我来说没有多大意义。有没有更优雅的方式只需要修改图标本身的信息？
Crispy-form 不适合自定义表单设计。您必须使用 HTML 硬编码来设计表单。