码迷,mamicode.com
首页 > 其他好文 > 详细

[flask]jinjia2模板-搜索功能

时间:2019-11-17 17:47:27      阅读:120      评论:0      收藏:0      [点我收藏+]

标签:idt   manage   success   type   ima   引用   strong   情况   creat   

思路:

  • 通过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.

 

[flask]jinjia2模板-搜索功能

标签:idt   manage   success   type   ima   引用   strong   情况   creat   

原文地址:https://www.cnblogs.com/kaerxifa/p/11875654.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!