做一个简单的web表单，当你输入用户名的时候会产生相应的欢迎信息，效果展示如下：



其实空字符提交时会出现一行Resquired()函数产生的提醒文字，截图时点击屏幕就消失了。。。。
看到导航栏里有两个选项，在head中有标签图标，这些都是在下文中base.html中定义的，如果了解html的基本语法就很容易看明白。

定义表单：

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()])
    submit = SubmitField('Submit')

使用扩展Flask-WTF,处理web表单会变的相对简单，对于小白的我来说感觉功能十分强大。在这个扩展中，每一个web表单都由一个form类表示，StringField和Submitfield分别是‘text’和‘submit’类型的输入元素，Required（）函数是确保表单中输入不为空，这三个函数其实和在HTML中作用一模一样的，也正是为了下一步渲染成HTML格式，其实这个扩展就是把部分HTML的功能打包了，还有其他类似的HTML标准字段这个扩展也支持。

渲染表单：
以上的代码中我们还定义了类NameForm以及其参数form,渲染这个简单表单时，可以通过form来导入模板，会渲染生成一个简单的表单。

<form method="POST">
{{ form.hidden_tag() }}
{{ form.name.label }} {{ form.name() }}
{{ form.submit() }}
</form>

可以用CSS修饰一下：

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

这是一个表单，如果一个页面很多表单的话，工作量会很大。扩展Flask-Bootstrap可以按照已经定义的格式来渲染表单，渲染整个页面的表单，使用方式如下

{ % import "bootstrap/wtf.html" as wtf % }
{{ wtf.quick_form(form) }}

wtf.quick_form() 函数的参数为 Flask-WTF 表单对象。使用 Flask-WTF 和 Flask-Bootstrap 渲染表单，暂且命名index.html 。

{ % 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 % }

添加标题Flasky，在类代码块中用了条件结构，如果为true,那么执行if和else中的代码，如果为flase则执行else和endif之间的代码。第一句可以看出这里用了Flask-Bootstrap的包含导航条的基模板base.html,这里附上。

{ % extends "bootstrap/base.html" % }
{ % block title % }Flasky{ % endblock % }

{% block head %}
{{ super() }}
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
{% endblock %}

{ % block navbar % }
<div class="navbar navbar-inverse" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle"
      data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">Flasky</a>
    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li><a href="/">Home</a></li>
        </ul>
    </div>
  </div>
</div>
{ % endblock % }

{ % block content % }
<div class="container">
   { % block page_content % }{ % endblock % }
</div>
{ % endblock % }

路由和试图函数

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

在这里定义局部变量name的默认值为None，创建类实例NameForm来表示表单，若输入空字符即条件判断为false,if条件跳过执行，返回index.html重新渲染表单。如果不为空字符则执行if语句，服务器收到POST的命令请求，输入的‘name’由data获取赋值给name，然后data类似清空作用被赋值空字节，以便接受下一个输入的name。获取name后template利用模板处理表单数据，渲染包含数据的表单。
完整python代码：

from flask import Flask, render_template
from flask_script import Manager
from flask_bootstrap import Bootstrap
from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField
from wtforms.validators import Required

manager = Manager(app)
bootstrap = Bootstrap(app)
moment = Moment(app)


class NameForm(FlaskForm):
    name = StringField('What is your name?', validators=[Required()])
    submit = SubmitField('Submit')

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


if __name__ == '__main__':
    manager.run()