Flask Web 極簡教程(四)- Flask 表單(Part A)

語言: CN / TW / HK
ead>

持續創作,加速成長!這是我參與「掘金日新計劃 · 6 月更文挑戰」的第6天,點選檢視活動詳情

一、表單

表單在頁面中主要負責資料採集,一個表單有三個基本組成部分: - 表單標籤:這裡麵包含了處理表單資料所用CGI程式的URL以及資料提交到伺服器的方法。  - 表單域:包含了文字框密碼框、隱藏域多行文字框、複選框單選框下拉選擇框和檔案上傳框等。 - 表單按鈕:包括提交按鈕、復位按鈕和一般按鈕;用於將資料傳送到伺服器上的CGI指令碼或者取消輸入,還可以用表單按鈕來控制其他定義了處理指令碼的處理工作

常見的表單有登錄檔單、登入表單、搜尋表單等

檢視函式中獲取表單資料的方式有兩種: - GET請求提交的表單:request.args.get('name', None) - POST請求提交的表單:request.from.get('age', None)

二、WTF表單

WTF 表單是一個第三方的庫,可以通過Python程式碼生成表單,而Flask-WTF則是Flask集成了WTF表單功能的實現。

image.png Flask-WTF可以實現這些功能, - 整合 wtforms。 - 帶有 csrf 令牌的安全表單。 - 全域性的 csrf 保護。 - 支援驗證碼(Recaptcha)。 - 與 Flask-Uploads 一起支援檔案上傳。 - 國際化整合。

更多資訊可以檢視 Flask-WTF 官網。Flask-WTF需要通過安裝才可以使用。 bash pip3 install Flask-WTF

在Pycharm中建立新的Flask專案flask-wtf,要使用Flask-WTF需要在app.py中建立Flask物件之後新增如下配置, ```python

配置WTF的CSRF,Value可以是任意的字串

app.config['WTF_CSRF_SECRET_KEY'] = 'abc21231fafae2' ```

第一個表單模型

在專案目錄下新建一個form.py檔案,專門用來編寫表單模型,以登入表單為例,新增一個LoginForm物件,並增加相應的屬性 ```python from flask_wtf import FlaskForm from wtforms import StringField, PasswordField, SubmitField

class LoginForm(FlaskForm): username = StringField(label='使用者名稱') password = PasswordField(label='密碼') submit = SubmitField(label='提交') ``` 表單欄位的常用核心屬性如下

| 屬性名 | 屬性作用 | | :---: | :---: | | label| form表單中的label標籤,如輸入框前的文字描述 | | default| 表單中輸入框的預設值 | | validators| 表單驗證規則 | | widget| 定製介面的顯示方式 | | description| 幫助文字 |

在app.py中增加檢視函式 ```python from flask import Flask, render_template from form import LoginForm

@app.route('/form') def form(): login_form = LoginForm() # 返回login_form表單模型,在form.html中進行渲染 return render_template('form.html', login_form=login_form) ```

在templates增加form.html ```html

Form

登入

{# 渲染LoginForm表單模型中username欄位的label屬性#} {{ login_form.username.label }}: {{ login_form.username }}
{{ login_form.password.label }}: {{ login_form.password }}
{{ login_form.submit }}

```

啟動應用,瀏覽器訪問 http://127.0.0.1:5000/form image.png

表單渲染成功,但是input輸入框是空白的,可以通過表單模型中欄位的default屬性來設定預設值 ```python

其餘程式碼不變

class LoginForm(FlaskForm): username = StringField(label='使用者名稱', default='stark') password = PasswordField(label='密碼', default='1231231') submit = SubmitField(label='提交') ```

再次訪問 http://127.0.0.1:5000/form image.png

使用者名稱欄位型別是StringField並且顯示了設定的預設值,密碼是PasswordField型別,雖然設定了預設值,但是是不能顯示的。在表單中的使用者名稱和密碼輸入框中輸入資料 image.png 可以看出密碼是非明文顯示的

表單模型的欄位型別

在第一個表單模型中使用了兩個欄位型別,分別是StringField和PasswordField,並且在頁面輸入密碼是也能夠將密碼以非明文的形式顯示,除了這兩個型別外還有其他的欄位型別, - 文字/字串相關型別 - StringField,字串輸入 - PasswordField,密碼輸入 - TextAreaField,長文字輸入 - HiddenField,隱藏表單域 - 數值型別既整數和小數相關型別 - FloadField,浮點數輸入 - IntegerField,整數輸入 - DecimalField,精確小數輸入 - 單選多選等選擇相關型別 - RadioField,radio單選 - SelectField,下拉單選 - SelectMultipleField,下拉多選 - BooleanField,勾選 - 日期時間相關型別 - DateField,日期選擇 - DateTimeField,日期時間選擇 - 檔案上傳相關型別 - FileField,檔案單選 - MultipleFileField,檔案多選 - 其他型別 - SubmitField,提交表單按鈕 - FieldList,自定義的表單選擇列表 - FormField,自定義多個欄位構成的選項