Колба WTF формы добавляя glyphicon в поле формы

Question

У меня есть форма Колба 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()"}) 

теперь я хотел бы добавить самозагрузки 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> 

Любые предложения, как я могу добавить эту строку из моего class 'URL_Status', чтобы я мог видеть глификон с моим полем ввода. Спасибо

Answer 1

Я не использовал 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() 
) 

Или вы можете сделать это в шаблоне.

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. Он просто встраивает представление изображения глификона непосредственно в CSS с использованием кодировки URI base64.

Вы можете получить базовые данные глификона на этом site. Кроме того, вы можете использовать изображение (25 * 25) для замены данных base64. Как это:

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