Question

我有一个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()"})

现在我想在输入字段中添加一个bootstrap glyphicon，即'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'添加此行，以便我能够看到带有输入字段的glyphicon。感谢

Answer 1

我暂时没有使用过wtforms。我认为你需要一个自定义小部件：

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

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

和您的网址字段：

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

或者您可以在模板中执行此操作。

Answer 2

这是解决这个问题的一个小技巧。

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') }});

Answer 3

您可以使用jinja2宏在表单中渲染glyphicon，然后导入您在当前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/以获得有关宏的更多信息

Flask WTF表单在表单字段中添加glyphicon

3 个答案: