Flask WTF

Webアプリケーションの重要な側面は、ユーザーにユーザーインターフェースを提供することです。HTMLは<form>タグを提供し、インターフェースをデザインするために使用できます。テキストエンター、ラジオボタン、セレクトボックスなどのフォーム要素を適切に使用できます。

GETまたはPOSTメソッドを使用して、ユーザーの入力データをHTTPリクエストメッセージとしてサーバーサイドのスクリプトに提出します。

サーバーサイドのスクリプトは、HTTPリクエストからデータを取得してフォーム要素を再作成する必要があります。したがって、実際にはフォーム要素は2度定義する必要があります。 - 一度はHTML、一度はサーバーサイドのスクリプトです。 HTMLフォームを使用するもう一つの欠点は、フォーム要素を動的に表示するのが難しい（または不可能）です。HTML自体はユーザーの入力をバリデートできません。

これがWTFormsです。柔軟なフォーム、レンダリング、バリデーションライブラリが使いやすい場所です。Flask-WTFエクステンションはWTFormsライブラリにシンプルなインターフェースを提供します。

Flaskを使用して-WTFでは、Pythonスクリプトでフォームフィールドを定義し、HTMLテンプレートを使用してそれらを表示できます。また、WTFフィールドにバリデーションを適用することもできます。

以下では、HTMLがどのように動的に生成されるかを見てみましょう。

まず、Flaskをインストールする必要があります。-WTFエクステンション。

# Filename : example.py
# Copyright :　2020 By w3codebox
# Author by : ja.oldtoolbag.com
# Date :　2020-08-08
pip install flask-WTF

インストールされたソフトウェアパッケージにはFormクラスが含まれており、このクラスはユーザー定義のフォームの親クラスとして使用する必要があります。WTformsパッケージにはさまざまなフォームフィールドの定義が含まれています。以下にいくつかの標準的なフォームフィールドを挙げています。

例えば、以下のようにテキストフィールドを含むフォームを設計できます。 -

# Filename : example.py
# Copyright :　2020 By w3codebox
# Author by : ja.oldtoolbag.com
# Date :　2020-08-08
from　flask_wtf　import　Form
　from　wtforms　import　TextField
　class　ContactForm(Form):
　　　　　name　=　TextField("Name　Of　Student")

nameフィールド以外に、自動的にCSRFトークンの隠しフィールドが作成されます。これは、CSRF（クロスサイトリクエストフォージェリー）攻撃を防ぐためです。

レンダリング時に、以下のように等效のHTMLスクリプトが生成されます。

# Filename : example.py
# Copyright :　2020 By w3codebox
# Author by : ja.oldtoolbag.com
# Date :　2020-08-08
<input　id　=　"csrf_token"　name　=　"csrf_token"　type　=　"hidden"　/>
　<label　for　=　"name">Name　Of　Student</label><br>
　<input　id　=　"name"　name　=　"name"　type　=　"text"　value　=　""　/>

ユーザー定義のフォームクラスは、Flaskアプリケーションで使用され、フォームはテンプレートで表示されます。

# Filename : example.py
# Copyright :　2020 By w3codebox
# Author by : ja.oldtoolbag.com
# Date :　2020-08-08
from　flask　import　Flask,　render_template
　from forms import ContactForm
　app = Flask(__name__)
　app.secret_key = 'development key'
　@app.route('/contact')
　def contact():
　　　　　form = ContactForm()
　　　　　return render_template('contact.html', form = form)
　if __name__ == '__main__':
　　　　　app.run(debug = True)

WTFormsパッケージには、フォームフィールドのバリデーションに非常に役立つバリデータークラスが含まれています。以下のリストは、常用のバリデーターを示しています。

連絡先フォームのnameフィールドに'DataRequired'验证規則を適用します。

# Filename : example.py
# Copyright :　2020 By w3codebox
# Author by : ja.oldtoolbag.com
# Date :　2020-08-08
name　=　TextField("Name　Of　Student",[validators.Required("名前を入力してください。")])

フォームオブジェクトのvalidate()関数はフォームデータを確認し、確認に失敗すると、验证エラーを投げ出します。エラーメッセージはテンプレートに送信されます。HTMLテンプレートでは、エラーメッセージが動的に表示されます。

# Filename : example.py
# Copyright :　2020 By w3codebox
# Author by : ja.oldtoolbag.com
# Date :　2020-08-08
{% for message in form.name.errors %}
　　　　{{　message　}}
　{% endfor %}

以下の例では、先ほどの概念を示しています。連絡先フォームのコードは以下の通りです（ forms.py)。

# Filename : example.py
# Copyright :　2020 By w3codebox
# Author by : ja.oldtoolbag.com
# Date :　2020-08-08
from　flask_wtf　import　Form
　from　wtforms　import　TextField,　IntegerField,　TextAreaField,　SubmitField,　RadioField,　SelectField
　from　wtforms　import　validators,　ValidationError
　class　ContactForm(Form):
　　　　　name　=　TextField("学生の名前",[validators.Required("名前を入力してください。")])
　　　　　Gender　=　RadioField('性別',　choices　=　[('M','男性'),('F','女性')])
　　　　　Address　=　TextAreaField("住所")
　　　　　email　=　TextField("Email",[validators.Required("メールアドレスを入力してください。")],
　　　　　　　validators.Email("メールアドレスを入力してください。")])
　　　　　Age　=　IntegerField("年齢")
　　　　　language　=　SelectField('言語',　choices　=　[('cpp',　'C',++'),　('py',　'Python')])
　　　　　submit　=　SubmitField("提交")

バリデータは名前とメールフィールドに適用されます。以下はFlaskアプリケーションスクリプトです（ formexample.py)。

# Filename : example.py
# Copyright :　2020 By w3codebox
# Author by : ja.oldtoolbag.com
# Date :　2020-08-08
from flask import Flask, render_template, request, flash
　from forms import ContactForm
　app = Flask(__name__)
　app.secret_key = 'development key'
　@app.route('/contact', methods = ['GET', 'POST'])
　def contact():
　　　　　form = ContactForm()
　　　　　if request.method == 'POST':
　　　　　　　　if form.validate() == False:
　　　　　　　　　　　flash('全てのフィールドが必要です。')
　　　　　　　　　　　return render_template('contact.html', form = form)
　　　　　　　　else:
　　　　　　　　　　　return render_template('success.html')
　　　　　elif request.method == 'GET':
　　　　　　　　　　　return render_template('contact.html', form = form)
　if __name__ == '__main__':
　　　　　app.run(debug = True)

テンプレートのスクリプト( contact.html)以下の通りです -

# Filename : example.py
# Copyright :　2020 By w3codebox
# Author by : ja.oldtoolbag.com
# Date :　2020-08-08
<html>
　<head>
　<meta http-equiv="Content-Type" content="text/html; charset=utf-8"　/>
　<title>Flaskサンプル</title>
　</head>
　　　　<body>
　　　　　　<h2　style = "text-align: center;">お問い合わせフォーム</h2>
　　　　　　　{% for message in form.name.errors %}
　　　　　　　　　　<div>{{ message }}</</div>
　　　　　　　{% endfor %}
　　　　　　　{% for message in form.email.errors %}
　　　　　　　　　　<div>{{ message }}</</div>
　　　　　　　{% endfor %}
　　　　　　　<form action = "http://localhost:5000/contact" method = "post"
　　　　　　　　　　<fieldset>
　　　　　　　　　　　　　<legend>入力項目</legend>
　　　　　　　　　　　　　{{　form.hidden_tag()　}}
　　　　　　　　　　　　　<div　style　=　font-size:20px;　font-weight:bold;　margin-left:150px;>
　　　　　　　　　　　　　　　　{{　form.name.label　}}<br>
　　　　　　　　　　　　　　　　{{　form.name　}}
　　　　　　　　　　　　　　　　<br>
　　　　　　　　　　　　　　　　{{　form.Gender.label　}}　{{　form.Gender　}}
　　　　　　　　　　　　　　　　{{　form.Address.label　}}<br>
　　　　　　　　　　　　　　　　{{　form.Address　}}
　　　　　　　　　　　　　　　　<br>
　　　　　　　　　　　　　　　　{{　form.email.label　}}<br>
　　　　　　　　　　　　　　　　{{　form.email　}}
　　　　　　　　　　　　　　　　<br>
　　　　　　　　　　　　　　　　{{　form.Age.label　}}<br>
　　　　　　　　　　　　　　　　{{　form.Age　}}
　　　　　　　　　　　　　　　　<br>
　　　　　　　　　　　　　　　　{{　form.language.label　}}<br>
　　　　　　　　　　　　　　　　{{　form.language　}}
　　　　　　　　　　　　　　　　<br>
　　　　　　　　　　　　　　　　{{　form.submit　}}
　　　　　　　　　　　　　</div>
　　　　　　　　　　</fieldset>
　　　　　　　</form>
　　　　</body>
　</html>

Pythonシェルで実行 formexample.py、URLをアクセス => http://localhost:5000/contact 。 聯絡人フォームは以下のように表示されます。

エラーメッセージがある場合、ページは以下のようになります -

エラーがない場合、以下のように表示されます success.htmlページの内容は以下の通りです -