今天的任務是應用web表單，知識點很多。我們將程式碼和具體步驟進行展示。（在這個部分，程式碼部分紅色部分是我們增刪的部分） 。

1.我們採用的是Flask-WTK框架。

Flask-WTF是WTForms專案的Flask框架擴充套件，我們將用他來幫助我們處理web表單。

大部分Flask擴充套件都需要定義相關配置項，所以我們先來在應用根目錄下建立一個配置檔案以備使用。我們先這樣建立 (config.py):

2.我們要建立一個登入表單，用來進行使用者身份識別。但跟平常需要驗證使用者名稱和密碼的登入方式不同，我們將使用OpenId來處理登入過程。

OpenId的好處就是我們不用管那些使用者名稱和密碼的認證過程，交給 OpenId 去搞定，它會返回給我們使用者驗證後的資料。這樣對於使用我們網站的使用者而言也更安全。
使用 OpenId 登入只需要一個字串，然後傳送給 OpenId 伺服器就行了。另外我們還需要在表單中加一個“記住我” 的選項框，這個是送給那些不想每次來我們網站都要進行身份認證的人。選擇這個選項後，首次登入時會用cookie在他們的瀏覽器上記住他們的登入資訊，下次再進入網站時就不需要進行登入操作。

3.接下來我們要製作使用者登入表單，使用Flask-WTF建立的表單就像一個物件，需要從Form類繼承子類。然後在這個子類中定義一些類的屬性變數作為表單欄位就可以了。（此處編寫出現錯誤，最下方有關於此處錯誤的提示。）

我們引入了一個 Form 類，然後繼承這個類，按需求還添加了 TextField 和 BooleanField 這兩個欄位。
另外還引入了一個表單驗證函式 Required，這種驗證函式可以附加在欄位裡面，在使用者提交表單時它們會用來檢查使用者填寫的資料。這個 Required 函式是用來防止使用者提交空資料。Flask-WTF 中還有很多不同作用的表單驗證函式，我們將會在後面使用到它們。

4.接下來製作登入表單的模板login.html。

其中，我們在配置中開啟了CSRF(跨站偽造請求)功能，模板引數 {{ form.hidden_tag() }} 會被替換成一個具有防止CSRF功能的隱藏表單欄位。在開啟了CSRF功能後，所有模板的表單中都需要新增這個模板引數。

5.接下來我們寫一個渲染登入表單物件到模板的檢視函式views.py。

在這裡，我們做了兩件事：一件事就是在路由裝飾器中新增一個新方法。讓 Flask 明白我們這個檢視函式支援 GET 和 POST 請求。否則這個檢視函式只會響應 GET 請求。我們需要得到使用者填寫表單後提交的資料，這些資料是從 POST 請求中傳遞過來的。

引入了兩個新物件： falsh 和 redirect。待會具體說他們。

6.Flask-WTF 對錶單提交資料的處理使我們的接下來要做的事情變得簡單了。下面就是我們這個登入檢視函式 views.py的新版本, 加入了表單資料驗證和處理。

上面紅色部分為新增的，出現三個我們需要說明的知識點：

• validate_on_submit() 這個方法做了表單處理的所有工作。如果你在表單向用戶提供資料時(舉個栗子：使用者在它之前修改了一下提交的資料) 時呼叫此方法，它會返回 False。發生這樣的情況時，就是提交的資料驗證不通過，你要繼續渲染模板。只要有一個欄位驗證不通過，它都會返回 False. 這時就需要我們返回資料給使用者，讓他們來糾正一下錯誤資料。後面我們將會看到在資料驗證失敗時，如何把錯誤訊息顯示給使用者。
• 當 validate_on_submit() 方法返回 True 的時候，我們的檢視函式又會呼叫兩個新的函式。它們都是從Flask 中引入的，flash 函式用來在下一個開啟的頁面中顯示定義的訊息。我們現在用它用來做除錯。因為我們現在還沒有做使用者登入模組， 所以只需要把使用者提交上來的資料顯示一下就行了。flash 函式非常有用，比如為使用者的一些操作提供訊息反饋。

這樣我們每個頁面都會顯示訊息反饋。

• 另一個新函式就是 redirect. 這個函式會通知使用者的瀏覽器跳轉到指定的地址。在我們的檢視函式中，我們使用它跳轉到了首頁。注意跳轉結束後頁面上還會顯示 flash 函式傳遞的訊息哦。

7.如果我們在使用者提交資料失敗後給使用者點提示，讓他們知道什麼原因引起的，豈不妙哉！太幸運了，用 Flask-WTF 可以輕鬆解決這個問題。
當表單欄位驗證失敗時， Flask-WTF 會新增一個錯誤訊息到表單物件。這些訊息在模板中也是可以使用的，所以我們只需要在模板中新增一點點東西就OK了。

我們僅在 openid 欄位的右邊添加了一個迴圈語句，它會把openid欄位驗證失敗的訊息都顯示出來。不論你的表單有多少欄位，所有表單欄位驗證失敗的錯誤訊息都可以用 form.errors.欄位名 這種方式來使用。這個表單中我們的是 form.errors.openid。為了讓錯誤訊息引起使用者的注意，我們還給訊息添加了顯示紅色的 css 樣式。

8.現實生活中，我們發現有很多人都不知道他們擁有一些公共賬號。一部分大牌的網站或服務商都會為他們的會員提供公共賬號的認證。舉個栗子，如果你有一個 google 賬號，其實你就有了一個公共賬號，類似的還有 Yahoo, AOL, Flickr 等。
為了方便我們的使用者能簡單的使用他們的公共賬號，我們將把這些公共賬號的連結新增到一個列表，這樣使用者就不用自手工輸入了。

為此我們要做到以下三小步：

（1）我們要把一些提供給使用者的公共賬號服務商定義到一個列表裡面，這個列表就放到配置檔案中吧 (config.py):

（2）接下來就是要在我們的登入檢視函式views.py中使用這個列表了:

（3）我們從 app.config 中引入了公共賬號服務商的配置列表，然後把它作為一個引數通過 render_template 函式引入到模板。接下來我們需要在登入模板中把這些服務商連結顯示出來。

這次的模板新增的東西似乎有點多。一些公共賬號需要提供使用者名稱，為了解決這個我們用了點 javascript。當用戶點選相關的公共賬號連結時，需要使用者名稱的公共賬號會提示使用者輸入使用者名稱， javascript 會把使用者名稱處理成可用的公共賬號，最後再插入到 openid 欄位的文字框中。

下面這個是在登入頁面點選 google 連結後顯示的截圖：

ps報錯解決：

在第3步時，寫程式報錯了。一個是：原文中的： 
from flask.ext.wtf import Form, TextField, BooleanField
from flask.ext.wtf import Required
在flask-wtf的0.9版之後已經不可用。
見 https://flask-wtf.readthedocs.org/en/latest/upgrade.html#version-0-9-0
0.9版之後的flask-wtf的結構有了不小的改動。如下圖：

另一個是IndentationError: unexpected indent錯誤：

因為python是對格式要求很嚴格的 ，遇到了IndentationError: unexpected indent你就要知道python編譯器是在告訴你“Hi，老兄，你的檔案裡格式不對了，可能是tab和空格沒對齊的問題，你需要檢查下tab和空格了”。