Flask Web 开发 web表单

时间:2021-06-03 16:37:17


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> 元素。      其实就是提交按钮


Flask Web 开发  web表单




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


Flask Web 开发  web表单


Flask Web 开发  web表单




最直接的方法,就是把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文本自己来编辑有助于打基础。

效果图如下

Flask Web 开发  web表单


@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扩展提供的。

Flask Web 开发  web表单