Flask(4)-Web表单
2016-05-17 14:13
344 查看
Flask-WTF扩展把处理Web表单的过程变得简洁。
app.config字典用例存储框架、扩展和程序本身的配置变量。
如下一个简单的Web表单,包含一个文本字段和一个提交按钮。
这个表单很简陋,想要改善外观,可以把参数传入渲染字段的函数,传入的参数会被转化为HTML属性。
如下,可以字段指定ID或class属性,然后再定义它的CSS样式:
但是按照这种方式渲染工作量很大,因此我们最好使用Bootstrap中的表单样式。Flask-Bootstrap提供一个辅助函数,可以使用预先定义好的表单样式渲染整个表单,并且操作只需一次调用。
使用Flask-Bootstrap,上述表单可使用如下方式渲染:
wtf.quick_form()函数的参数为Flask-WTF表单对象,使用Bootstrap的默认样式渲染传入的表单。
hello.py的完整模板如下:
跨站请求伪造保护(CSRF)
为实现CSRF保护,Flask-WTF需要程序设置一个密钥。Flask-WTF使用这个密钥生成加密令牌,再用加密令牌验证请求中表单数据的真伪。设置密钥如下:app = Flask(__name__) app.config['SECRET_KEY'] = 'hard to guess string'
app.config字典用例存储框架、扩展和程序本身的配置变量。
表单类
使用Flask-WTF时,每个Web表单都由一个继承自Form的类表示。每个类定义表单中的一组字段,每个字段都用对象表示。字段对象可附属验证函数。如下一个简单的Web表单,包含一个文本字段和一个提交按钮。
from flask.ext.wtf import Form from wtforms import StringField, SubmitField from wtfroms.validators import Required class NameFrom(Form): #定义NameForm表单类 name=StringField('What is your name?', validators=[Required()]) submit=SubmitField('submit') #StringField类表示属性为type="text"的<input>元素 #SubmitField类表示属性为type="submit"的<input>元素 #构造函数的第一个参数为表单渲染成HTML时的标号
把表单渲染成HTML
表单字段是可调用的,在模板中调用后会渲染成HTML。假设视图函数把一个NameForm实例通过参数form传入模板,在模板中可以生成一个表单。如下:<form method="POST"> {{ form.hidden_tag() }} {{ form.name.label }} {{ form.name() }} {{ form.submit() }} </form>
这个表单很简陋,想要改善外观,可以把参数传入渲染字段的函数,传入的参数会被转化为HTML属性。
如下,可以字段指定ID或class属性,然后再定义它的CSS样式:
<form method="POST"> {{ form.hidden_tag() }} {{ form.name.label }} {{ form.name(id="my-text-field") }} {{ form.submit() }} </form>
但是按照这种方式渲染工作量很大,因此我们最好使用Bootstrap中的表单样式。Flask-Bootstrap提供一个辅助函数,可以使用预先定义好的表单样式渲染整个表单,并且操作只需一次调用。
使用Flask-Bootstrap,上述表单可使用如下方式渲染:
{% import "bootstrap/wtf.html" as wtf %} {{ wtf.quick_form(form) }}
wtf.quick_form()函数的参数为Flask-WTF表单对象,使用Bootstrap的默认样式渲染传入的表单。
hello.py的完整模板如下:
{% extends "base.html" %} {% import "bootstrap/wtf.html" as wtf %} {% block title %}Flasky{% endblock %} {% block page_content %} <div class
相关文章推荐
- 随想 -- SaaS项目中问题的发现和解决
- HDU 1060 Leftmost Digit
- 软件开发必备之-设计原则
- 飛飛(四十四)春哥来啦!
- 跟我学机器视觉-HALCON学习例程中文详解-IC引脚测量
- consul笔记
- IBM X3650 服务器更换内存的过程记录
- eaccelerator+PHP5.4导致smarty更新模板500报错
- Android Telephony 框架分析
- ContentProvider使用例子
- Android 音频开发-如何存储和解析wav文件
- 百度编辑器使用说明
- python采用django框架实现支付宝即时到帐接口
- git开源库汇总——动画篇
- pecl_http组件安装
- jdk的配置-mac,windows
- 使用Pushlet将消息从服务器端推送到客户端【原创】
- 本地图片选择器(picasso框架)
- Ubuntu 14.04下caffe的安装
- JavaScript数组方法