1. 程式人生 > >7. Web表單

7. Web表單

通俗講,web表單就是做瀏覽器上可以提交使用者輸入的內容的地方,比如註冊時的使用者名稱/密碼等。
當然,表單的設計會涉及到表單內容的判斷、使用者輸入內容的儲存。這裡涉及的有對輸入內容不為空的Required()函式,儲存使用者內容的session模組。

首先來看讓網頁上顯示出表單輸入框及提交按鈕的程式碼(加到hello.py中的):

from flask.ext.wtf import Form     # 匯入擴充套件模組
from wtforms import StringField, SubmitField     # 匯入需要使用的,WTFroms支援的HTML標準欄位
from
wtforms.validators import Required # 驗證函式,確保欄位不為空 class NameForm(Form): name = StringField('What is your name?', validators=[Required()]) # 使用者可以輸入內容的文字框,值被name變數接收 submit = SubmitField('Submit') # 提交按鈕

在index.html中試用Flask-WTF和Flask-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) }} #使用wtf.quick_form()函式渲染NameForm物件 {% endblock
%}

更新hello.py中路由方法:

@app.route('/', methods=['GET', 'POST'])     #告訴Flask做URL對映中把這個檢視函式註冊為GET和POST請求的處理程式
def index():
     name = None
     form = NameForm()
     if form.validate_on_submit():     #如果輸入的資料驗證通過,validate_on_submit()方法返回True
          name = form.name.data     #賦值給區域性變數
          form.name.data = ' '          #將表單欄位清空
      return render_template('index.html', form=form, name=name)     #渲染模板,帶有變數name的值

這個時候把伺服器跑起來,就可以看到顯示錶單的網頁了:
這裡寫圖片描述
輸入資料提交後,會更新顯示內容:
這裡寫圖片描述

補充內容:
1、WTForms支援的HTML標準欄位
這裡寫圖片描述

2、WTForms驗證函式
這裡寫圖片描述

欄位就是定義輸入框可以輸入的內容型別,驗證函式就是對輸入內容的限制,資料通過驗證函式的驗證了,才能提交成功。這兩個表中的欄位和函式我都試著用了一下,大部分都可以直接用起來,但有幾個不知道怎麼用,先記下來:HiddenField,RadioField,SelectField,SelectMultipleField,FormField。