Flask WTF 表单在表单字段中添加字形图标答案

【问题标题】：Flask WTF forms adding a glyphicon in a form fieldFlask WTF 表单在表单字段中添加字形图标
【发布时间】：2016-09-15 21:51:21
【问题描述】：

我有一个 Flask Wtf 表单如下：

class URL_Status(Form):
    url = URLField("Enter URL",
                       validators=[url(), DataRequired()],
                       render_kw={"placeholder": "http://www.example.com"},)
    submit = SubmitField('Search', render_kw={"onclick": "loading()"})

现在我想在输入字段中添加一个引导字形图标，即“url”。据我所知，link。我们需要编写如下代码：

<div class="form-group has-feedback">
    <label class="control-label">Username</label>
    <input type="text" class="form-control" placeholder="Username" />
    <i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>

当我在 HTMl 中调用表单时，我的 html 会创建除此行之外的所有代码：

<i class="glyphicon glyphicon-user form-control-feedback"></i>

任何建议如何从我的类“URL_Status”中添加这一行，以便我能够在我的输入字段中看到一个字形图标。谢谢

【问题讨论】：

Add Bootstrap Glyphicon to Input Box的可能重复
我没有使用 HTML 创建表单。我正在使用 wtf 从服务器端创建表单。
我解决了你的问题，试试吧！
问题解决了吗？如果是，请接受我的回答。

标签： python html twitter-bootstrap flask wtforms

【解决方案1】：

这里有一个小技巧可以解决这个问题。

CSS：

.user-icon {
padding-left:30px;
background-repeat: no-repeat;
background-position-x: 4px;
background-position-y: 4px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAWCAYAAAArdgcFAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA+5pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ1dWlkOjY1RTYzOTA2ODZDRjExREJBNkUyRDg4N0NFQUNCNDA3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkIzOUVGMUYxMDY3MTExRTI5OUZEQTZGODg4RDc1ODdCIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkIzOUVGMUYwMDY3MTExRTI5OUZEQTZGODg4RDc1ODdCIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowMTgwMTE3NDA3MjA2ODExODA4M0ZFMkJBM0M1RUU2NSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowNjgwMTE3NDA3MjA2ODExODA4M0U3NkRBMDNEMDVDMSIvPiA8ZGM6dGl0bGU+IDxyZGY6QWx0PiA8cmRmOmxpIHhtbDpsYW5nPSJ4LWRlZmF1bHQiPmdseXBoaWNvbnM8L3JkZjpsaT4gPC9yZGY6QWx0PiA8L2RjOnRpdGxlPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PkX/peQAAACrSURBVHja7JSLCYAwDEQbJ3AER+kouoFu0FEcqSM4gk4QE4ggVRPxg1A8OFCSvkqC5xDRaSZ5ciTjyvzuzbMnwKjY34FHAx618yCQXQHAcVFE5+GoVijgyt3UN1/+hPKFd0a9ubxQa6naMjOdOY2jJAdjZIH7tJ8gzRNuZuho5MriUfpLNbhINXk4Cd27pN3AJVqvQlMPSxSz+oegqXuQhz9bNvDpJfY0CzAA6Ncngv5RALIAAAAASUVORK5CYII=);}

模板：

<form class="form form-horizontal" method="POST">
    {{ form.hidden_tag() }}
    {{ form.username(class_="form-control user-icon") }}
    {{ form.password }}
    {{ form.submit }}
</form>

此解决方案基于this answer。它只是使用 base64 URI 编码将 glyphicon 的图像表示直接嵌入到 CSS 中。

你可以在这个site上获取glyphicon的base64数据。此外，您还可以使用 image(25*25) 替换 base64 数据。像这样：

background-image: url({{ url_for('static', filename='user.png') }});

【讨论】：

【解决方案2】：

我已经有一段时间没有使用 wtforms 了。我认为您需要一个自定义小部件：

class CustomURLInput(URLInput):
    ...
    def __call__(self,....):
        ...

看看这个https://github.com/wtforms/wtforms/blob/9be964158fbcd1af52b345451bbd14751127dd37/wtforms/widgets/core.py#L159 了解详情。

和你的 url 字段：

url = URLField(
    "Enter URL",
    validators=[url(), DataRequired()],
    render_kw={"placeholder": "http://www.example.com"},
    widget=CustomURLWidget()
)

或者你可以在你的模板中做。

【讨论】：

【解决方案3】：

您可以使用 jinja2 宏在您的表单中渲染一个字形图标，然后导入您在当前 html 中创建的宏

示例： 1. 创建一个包含此宏的html（例如：“_form_macro.html”）文件：

{% macro render_field(field) %}

    <dt>{{ field.label }}
    <dd>{{ field(**kwargs)|safe }}
            <span class="add-on form_input"><i class="icon-calendar fa-border form_input"></i></span>

    {% if field.errors %}
        <ul class=errors>
        {% for error in field.errors %}
            <li>{{ error }}</li>
        {% endfor %}
        </ul>
    {% endif %}
    </dd> 
{% endmacro %}

在您当前的 html 中导入宏：

{% from "_form_macro.html" import render_field %}

使用您创建的宏来呈现您的表单，如下所示：

{{ forms.form_name.label_tag }}
{{ render_field(forms.form_name, type="yourtype", class="yourclass") }}

查看http://jinja.pocoo.org/docs/2.10/templates/ 了解有关宏的更多信息

【讨论】：