與使用者互動是網頁的一個基本功能。而互動的方式基本就是接受使用者資訊並進行相應的反饋。

表單就是最基本的接受使用者資訊的方式。

我先參考了《Flask Web Development》中對於Form的介紹。

它引入了一個flask-wtf的package(安裝命令pip install flask-wtf)。

在程式碼中加入

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

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

這裡NameForm是作為index.html的輸入引數。

再來看index.html是如何組織的：

{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% block title %}Flasky{% endblock %}
{% block page_content %}
{{ wtf.quick_form(form) }}
{% endblock %}
 

執行程式碼後看實際頁面，奇怪，怎麼是Internal Server Error，再看命令列返回程式碼，居然是500。

研究了好久，最後發現，需要新增一行

app.config['SECRET_KEY'] = 'any string'

加入之後再執行程式碼，訪問之後得到介面：

輸入任意名稱後，看到命令列中有列印輸入的內容：

這個方法有個問題，網頁的組合需要靠伺服器來執行，而且如果要加入javascrpt方法，又需要提前知道方法名稱，這樣整體看起來比較混亂。

那麼能否在HTML中組織form，伺服器程式只負責接收和處理資料呢？

答案是肯定的。

這時就需要request中的資料。

我們先來組織網頁：

{% extends "base.html" %}


{% block title %}Flasky{% endblock %}

{% block page_content %}
<form name="input" method="POST">
    target: <input type="text" name="_target" size="40">
    <input type="submit" value="Submit">

</form>
{% endblock %}

同時重新組織伺服器的處理函式：

@app.route('/', methods=['GET', 'POST'])
def index():
    # form = NameForm()
    # if form.validate_on_submit():
    #     print form.input_data.data
    #     form.input_data.data = ''
    # return render_template("accept_target.html", form=form)
    if request.method == "POST":
        print request.form
    return render_template("accept_target_without_form_variable.html")

打印出來的內容是Dict，key是_target，內容是zzz

參看上面的form中內容，看來key是input的name。

列印內容zzz只需要把print那一行修改為

print request.form['_target']

總結

這一次我們講了flask中的表單，有2種實現方式

1.呼叫flask-wtf package在伺服器程式中建立表單並作為引數傳遞給html檔案

2.直接在HTML中加入表單，在伺服器程式中通過request.form[form_input_name]來訪問表單內容