[flask]jinjia2處理表單-實現搜索界面

思路:

• 通過flask-wtf創建forms表單類
• 在app.py中創建search_name()視圖函數,實例化form表單類,將通過render_template將form傳給html模板
• 創建html模板,引用form表單類生成的 文本輸入框,搜索按鈕

forms.py

from flask_wtf import FlaskForm from wtforms import StringField,SubmitField from wtforms.validators import DataRequired class SearchForm(FlaskForm): search_creater=StringField('creater',validators=[DataRequired()]) submit=SubmitField('搜索')

case_manage.html

<!--200case搜索表單-->
<div class="page-header" style="padding-top:60px;">
    <div id="navbar" class="navbar-collapse collapse">
        <form class="navbar-form" method="get" action="/search_creater/"> {{form.csrf_token}} {{form.search_creater(placeholder='創建者',class_='form-control')}} {{form.submit(class_='btn btn-success')}} </form>
    </div>
</div>

app.py

@app.route('/auto_test_case') def auto_test_case(): form = SearchForm() return render_template('auto_test_case.html', cases=auto_test_case_objs,form=form)

效果:

  

 知識點:

　　在創 建 HTML 表單時,我們 經常會需要使用 HTML < input>元素的其他屬性來對字段進行
設置 。 比如,添加 c lass 屬性設置對應 的 css 類為字段添加樣 式 ; 添加 placeholder 屬性設置占
位文本 。 默認情況下, WTForms 輸出的字段 HTML 代碼只 會包含 id 和 name 屬性,屬性值均為
表單類中對應 的字段屬性名稱 。 如 果要添加額外的屬性,通常有兩種方法 。

1.使用render_kw屬性

比如下面的username字段使用render_kw設置了placeholderHTML屬性:

username=StringField('Username',render_kw=('placeholder':'Your Username')) 

這個字段被調用后輸出的HTML代碼如下所示:

<input type="text" id="username" name="username" placeholder="Youre Username">

2.在調用字段時傳入

在調用字段屬性時,通過添加括號使用關鍵字參數的形式也可以傳入字段額外的HTML屬性:

form.username(style='width: 200px;',class_='bar') u'<input class="bar" id="username" name="username" style="width:200px;" type="text">'

注:

class是Python的保留關鍵字,在這里使用class_代替class,渲染后的<input>會獲得正確的class屬性,在模板中調用時則可以直接使用class.