このチュートリアルにようこそ! 今日は Flask Web フレームワークのフォームライブラリである Flask WT Forms を見ていきましょう。
Flask WT Forms の必要性
HTML フォームを使うのは良いのですが、いくつかの欠点があります。
- クライアントサイドの HTML フォームとサーバーサイドの Flask アプリケーションの間に直接的なリンクがない。つまり、フォームのデータはリクエストオブジェクトと一緒にクライアントサイド（ユーザー）からサーバーサイドに送信されます。そのため、Flask Viewはフォームの要素を再作成して処理しなければなりません。
- HTMLフォームは、リアルタイムで動的にレンダリングするのが難しいです。
- HTML フォームでは、ユーザの入力を検証する方法がありません。
そのため、アプリケーションコードには Flask WT Forms を使うのが望ましいです。
この記事もチェック：Flaskにおけるアプリケーションコンテキストとリクエストコンテキストを解説する
フラスコWTフォームの構築
それを理解する最良の方法は、自分たちでやってみることです。
このセクションでは、まさにそれを行います。
では、シートベルトを締めて、始めましょう。
1. WT Forms をシステムにインストールする
WT Forms を使用するためには、まずインストールする必要があります。
ここでは、PIP を使ってインストールします。
ターミナルで次のコマンドを実行します。
pip install flask-wtf
|
これで使用する準備が整いました。
2. Forms.pyファイルでの単純なWTフォームのコード化
WTフォームは、別の “forms.py “ファイル内に存在する必要があります。
したがって、メインのFlaskファイルの横に新しいforms.pyファイルを作成します。
from flask_wtf import Form
from wtforms import Field1, Field2, Field3 ......, SubmitField
class FormName(Form):
Fied1_name = Field1("Display_name")
Fied2_name = Field2("Display_name")
Fied3_name = Field3("Display_name")
submit = SubmitField("Submit")
|
WTフォームのシンタックスは、以下のようになります。
from flask_wtf import Form
from wtforms import TextField, IntegerField, SubmitField
from wtforms import validators, ValidationError
class StudentForm(Form):
name = TextField("Student Name", [validators.Required("Please enter your name")])
marks = IntegerField("Marks", [validators.Required("Please enter your marks")])
email = TextField("Email",[validators.Required("Please enter your email"),validators.Email("Invalid email address")])
submit = SubmitField("Submit")
|
ここで、フォームクラス内のフィールドは次のようになります。
| フォームフィールド
| — | — |
| TextField｜これは HTML フォーム属性の入力タイプ – テキストに類似しています｜BooleanField｜これは HTML フォーム属性の入力タイプ – テキストに類似しています。
| BooleanField｜これは、HTMLフォーム属性の入力タイプ-チェックボックスに類似しています｜BooleanField｜これは、HTMLフォーム属性の入力タイプ-チェックボックスに類似しています。
| DecimalField｜小数点以下の数字を表示するためのTextFieldです。
| IntegerField｜整数値を表示するTextFieldです。
| RadioField｜ラジオボタンHTMLフォーム要素を表します。
| SelectField｜セレクトフォームエレメントを示します。
| TextAreaField｜HTMLフォーム属性の入力タイプ-テキストエリアと類似しています。
| PasswordField｜ユーザーからフォーム入力としてパスワードを受け取ります。
|
| SubmitField｜HTMLフォーム属性のInputタイプ-Submitに類似しています。
フォームフィールド フォームフィールドにバリデータを追加することもできます。
それでは、forms.py にシンプルな学生フォームを記述してみましょう。
pip install email_validator
|
ここで、email_validatorがインストールされていない場合、エラーが発生する可能性があります。
これを修正するには、email_validatorをインストールします。
from flask import Flask,render_template, request
from forms import StudentForm
app = Flask(__name__)
app.secret_key = 'form_csrf_token_security_key'
@app.route('/form', methods = ['POST', 'GET'])
def FormView():
form = StudentForm()
if request.method =='POST':
form = StudentForm()
if form.validate()== True:
return "Process Successful"
return render_template('form.html', form = form)
return render_template('form.html', form = form)
app.run(host='localhost', port=5000)
|
以上で動作するようになりました。
この記事もチェック：Flaskのエラー処理|エラーメッセージの表示やエラーログを表示させる方法
3. Flask のメインファイルをコーディングする
では、Form をメインファイルにインクルードしていきます。
以下のコードを考えてみましょう。
<form action = "http://localhost:5000/endpoint" method = post>
{{ form.hidden_tag() }} {{ form.field_name1.label }}<br>
{{ form.field_name1 }}
<br>
{{ form.field_name2.label }}<br>
{{ form.field_name2 }}
<br>
{{ form.field_name3.label }}<br>
{{ form.field_name3 }}
<br>
{{ form.submit }}
</form>
|
ここで
- フォームをクラスオブジェクトとして呼び出します。ユーザが初めてサイトを開いたとき(GETメソッド)、StudentForm()は空っぽの状態です。したがって、空のフォームを取得することになります。
- ユーザがフォームを送信すると(POSTメソッド)、StudentForm()クラスオブジェクトにユーザデータが格納されます。データが有効であれば、”処理成功” を返します。
これが、ここで使用しているコードロジックです。
秘密鍵は、HTML フォーム・テンプレートの CSRF セキュリティ・トークンを解除するために必要です。
この記事もチェック：Flaskでフォームを実装|ユーザーの入力を受け取る方法などを解説
4. フォームのテンプレートの作成
さて、フォームをユーザーに表示するには、HTML テンプレートファイルにインクルードする必要があります。
WT FormをHTMLにインクルードするための構文は次のとおりです。
<form action = "http://localhost:5000/form" method = post>
{{ form.hidden_tag()}} {{ form.name.label }}<br>
{{ form.name }}
<br>
{{ form.marks.label }}<br>
{{ form.marks }}
<br>
{{ form.email.label }}<br>
{{ form.email }}
<br>
{{ form.submit }}
</form>
|
ここで
- {{ form.hidden_tag() }} は CSRF トークンの隠しフィールドで、Flask アプリケーションのメインファイルに記述されたセキュリティキーを受け取ります。
- {{ form.field.Label }} はフィールド名です。
- {{ form.field }} はフィールドの入力ボックスです。
したがって、StudentFormのTemplateファイル “form.html “は以下のようになります。
python filename.py |
テンプレートについてもっと知りたい方は Flask templates の記事を参照してください。
5. Flaskアプリケーションを実装する
コーディング編はここまでです! では、サーバーを立ち上げてみましょう
“/form “にアクセスします。
詳細を入力し、送信をクリックします。
ナイス!
まとめ
以上、フラスコWTフォームについてでした。
以上、Flask WT フォームについてでした。
Flask HTML フォームについてもっと知りたい方は Flask Forms の記事をご覧ください。
Flask WT Forms についてもっと詳しく知りたい方は、こちらのドキュメントをご覧ください。
それでは、また次の記事でお会いしましょう。