Flask WTF forms adding a glyphicon in a form field

Question

I have a Flask Wtf form as follows:

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()"})

now I would like to add a bootstrap glyphicon in the input filed i.e. 'url'. As far as I know from this link. We need to write the code as follows:

<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>

When I call the form in HTMl my html creates all the code except this line:

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

Any suggestions how can I add this line from my class 'URL_Status' so that I am able to see a glyphicon with my input field. Thanks

Possible duplicate of [Add Bootstrap Glyphicon to Input Box](http://stackoverflow.com/questions/18838964/add-bootstrap-glyphicon-to-input-box) — Grey Li, Sep 16 '16 at 00:40
I am not creating forms using HTML. I am creating forms from server side using wtf. — Waqar Detho, Sep 18 '16 at 11:50

score 2 · Answer 1 · edited May 23 '17 at 12:07

Here is a little trick to solve this problem.

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

Template:

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

This solution based on this answer. It just embedding the image representation of the glyphicon directly in the CSS using base64 URI encoding.

You can get base64 data of glyphicon on this site. Besides, You can also use image(25*25) to replace the base64 data. Like this:

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

score 1 · Answer 2 · answered Sep 15 '16 at 22:34

I haven't used wtforms in a while. I think you need a custom widget:

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

Take a look at this https://github.com/wtforms/wtforms/blob/9be964158fbcd1af52b345451bbd14751127dd37/wtforms/widgets/core.py#L159 for details.

and your url field:

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

Or you can do it in your template.

score 1 · Answer 3 · answered Apr 26 '19 at 22:33

You can use jinja2 macros do render a glyphicon with your form, and then import the macro you've created in your current html

Example: 1. create an html (example: "_form_macro.html") file with this macro inside:

{% 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 %}

import the macro in your current html using:

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

Use the macro you've created to render your form like this:

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

Check http://jinja.pocoo.org/docs/2.10/templates/ for more information about macros

Flask WTF forms adding a glyphicon in a form field

3 Answers3