瓶WTF形式在表單字段

添加glyphicon我有一個燒瓶跆拳道形式如下：瓶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」的自舉glyphicon。據我所知，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'，這樣我可以看到我的輸入字段的圖形。謝謝

來源

2016-09-15 Waqar Detho

的可能的複製[添加引導Glyphicon到輸入框（http://stackoverflow.com/questions/18838964/add-bootstrap-glyphicon-to-input-box） –

我沒有創造使用HTML的表單。我使用wtf從服務器端創建表單。 –

我解決了你的問題，試試吧！ –

我有一段時間沒有使用wtforms。我想你需要一個自定義的widget：

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

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

來源

2016-09-15 22:34:45 snahor

這是一個小技巧來解決這個問題。

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編碼將圖像的圖像表示直接嵌入到CSS中。

您可以在此site上獲得glyphicon的base64數據。此外，您還可以使用圖像（25 * 25）替換base64數據。就像這樣：

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

來源

2016-09-18 13:31:24

瓶WTF形式在表單字段

回答

相關問題