Flask Web 开发 web表单



hello.py：定义表单类
from flask.ext.wtf import Form
from wtforms import StringField, SubmitField
from wtforms.validators import Required
class NameForm(Form):
    name = StringField('What is your name?', validators=[Required()])            #这里的what is your name ,等于是输入框前面显示的提示内容
    submit = SubmitField('Submit')                                                                   #这里的Submit，等于是按钮上显示的字符

NameForm 表单中有一个名为name 的文本字段和一个名为submit 的提交按钮。                                                        其实就是文本输入框

StringField类表示属性为type="text" 的<input> 元素。SubmitField 类表示属性为type="submit" 的<input> 元素。      其实就是提交按钮

StringField 构造函数中的可选参数validators 指定一个由验证函数组成的列表，在接受
用户提交的数据之前验证数据。验证函数Required() 确保提交的字段不为空。

最直接的方法，就是把index.html内容写成表单，如下

<form method="POST">                                       #注意，提交表单时候的method基本都选成post
{{ form.hidden_tag() }}                               
{{ form.name.label }} {{ form.name() }}                  #这里的label属性其实是HTML的属性，他表示标签属性
{{ form.submit() }}                                                  #提交按钮
</form>

当热，如果想渲染表单的外观，可以在括号内指定class或者id，随后在CSS文件内进行id参数设置！

<form method="POST">
{{ form.hidden_tag() }}
{{ form.name.label }} {{ form.name(id='my-text-field') }}
{{ form.submit() }}
</form>

这样的工作量还是比较大的，所以这里引用了bootstrap模板来进行渲染

{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% block title %}Flasky{% endblock %}
{% block page_content %}
<div class="page-header">
<h1>Hello, {% if name %}{{ name }}{% else %}Stranger{% endif %}!</h1>
</div>
{{ wtf.quick_form(form) }}                      #这一句是用来渲染模板的
{% endblock %}

其实我觉得这不应该直接用bootstrap来进行渲染，用HTML文本自己来编辑有助于打基础。

效果图如下

@app.route('/', methods=['GET', 'POST'])
def index():
name = None                                  
form = NameForm()
if form.validate_on_submit():
name = form.name.data
form.name.data = ''
return render_template('index.html', form=form, name=name)

用户第一次访问程序时，服务器会收到一个没有表单数据的GET 请求，所以validate_on_
submit() 将返回False。if 语句的内容将被跳过，通过渲染模板处理请求，并传入表单对
象和值为None 的name 变量作为参数。用户会看到浏览器中显示了一个表单。
用户提交表单后，服务器收到一个包含数据的POST 请求。validate_on_submit() 会调用
name 字段上附属的Required() 验证函数。如果名字不为空，就能通过验证，validate_on_
submit() 返回True。现在，用户输入的名字可通过字段的data 属性获取。在if 语句中，
把名字赋值给局部变量name，然后再把data 属性设为空字符串，从而清空表单字段。最
后一行调用render_template() 函数渲染模板，但这一次参数name 的值为表单中输入的名
字，因此会显示一个针对该用户的欢迎消息。

如果没有提供名字就按了submit，他会有提示信息，这些都是flask扩展提供的。