Flask-WTFの使い方を解説【フォームを作成しよう】
2024年7月17日
こんにちは!
今回の記事では、Flask-WTFの使い方について解説します。
Flaskでフォームを作成する際に便利なライブラリが、Flask-WTFです。
Flask-WTFは、Flaskアプリケーションでフォームを簡単に作成し、処理するための拡張機能です。さまざまな便利な機能があるので、今回の記事で使い方を詳しく解説します。
Flask-WTFとは?
そもそもFlask-WTFとは何なのでしょうか?
Flask-WTFとは、Flaskアプリケーションでフォームを簡単に作成し、処理するための拡張機能です。
フォームの生成、バリデーション、CSRFトークンの管理を提供します。これにより、安全で堅牢なフォーム処理が可能になります。
Flask-WTFの使い方
Flask-WTFのインストール
Flask-WTFを使うためには、インストールする必要があります。以下のコマンドを実行しましょう。
pip install Flask-WTF
基本的な使い方
Flask-WTFの基本的な使い方を、簡単な例を通して見ていきましょう。例では、ログイン画面用にユーザ名とパスワード、送信ボタンのフォームを作成しています。
まず、必要なモジュールをインポートし、Flaskアプリケーションを作成します。app.pyを以下のように設定します。
from flask import Flask, render_template, redirect, url_for
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField
from wtforms.validators import DataRequired
app = Flask(__name__)
app.config['SECRET_KEY'] = 'mysecret'
#フォームの設定
class LoginForm(FlaskForm):
username = StringField('Username', validators=[DataRequired()])
password = PasswordField('Password', validators=[DataRequired()])
submit = SubmitField('Login')
@app.route('/login', methods=['GET', 'POST'])
def login():
form = LoginForm()
if form.validate_on_submit():
return redirect(url_for('success'))
return render_template('login.html', form=form)
@app.route('/success')
def success():
return "Login Successful!"
if __name__ == '__main__':
app.run(debug=True)
上記のコードでは、LoginFormというフォームクラスを作成し、/loginルートでフォームをレンダリングしています。
ユーザーがフォームを送信し、バリデーションが成功すると、/successルートにリダイレクトされます。
次にテンプレート上にフォームを表示させます。
以下のようにtemplates/login.htmlを作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
</head>
<body>
<form method="POST" action="{{ url_for('login') }}">
{{ form.hidden_tag() }}
<p>
{{ form.username.label }}<br>
{{ form.username(size=32) }}<br>
{% for error in form.username.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
</p>
<p>
{{ form.password.label }}<br>
{{ form.password(size=32) }}<br>
{% for error in form.password.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
</p>
<p>{{ form.submit() }}</p>
</form>
</body>
</html>
このテンプレートは、フォームの各フィールドを表示します。今回のフォームには、usernameとpassword、submit(送信ボタン)が表示されます。
フォームの設定解説
フォームの設定は、app.pyで以下のように設定していました。
class LoginForm(FlaskForm):
username = StringField('Username', validators=[DataRequired()])
password = PasswordField('Password', validators=[DataRequired()])
submit = SubmitField('Login')
フォームは、FlaskFormクラスを継承して作成します。
class [フォーム名](FlaskForm):
[フォームの各フィールドの設定]
今回のフォームは3つの項目があります。それぞれ、どのような値が入るのかを設定しています。
次にフォームの項目(フィールド)の設定方法について解説します。
フォームのフィールドの設定
フィールドの書式
各フィールドは、以下のような一般的な書式で定義されます。
class [フォーム名](FlaskForm):
フィールド名 = フィールドクラス('ラベル', バリデート)
各項目の説明は以下の通りです。
- フィールド名:フィールドの変数名テンプレートでこの名前を使用してフィールドにアクセスします
- フィールドクラス:フィールドのタイプを指定するクラス。
- ラベル:フィールドに表示されるラベル。
- バリデート:フィールドの入力値を検証するためのバリデータ。
フィールドクラス
Flask-WTFで使用できるWTFormsのフィールドクラスには様々な種類があります。
それらのフィールドクラスを表にまとめました。
フィールドクラス | 説明 |
---|---|
StringField | テキスト入力フィールド |
PasswordField | パスワード入力フィールド |
BooleanField | チェックボックスフィールド |
SubmitField | 送信ボタンフィールド |
RadioField | ラジオボタンフィールド |
SelectField | ドロップダウンメニューフィールド |
TextAreaField | 複数行のテキスト入力フィールド |
FileField | ファイルアップロードフィールド |
DateField | 日付入力フィールド |
DateTimeField | 日付と時刻入力フィールド |
IntegerField | 整数入力フィールド |
EmailField | メールアドレス入力フィールド |
TelField | 電話番号入力フィールド |
URLField | URL入力フィールド |
HiddenField | 非表示の入力フィールド |
バリデートの設定
バリデートには、以下のような設定ができます。
バリデート | 説明 |
---|---|
DataRequired | フィールドが空でないことを検証します。 |
Length | フィールドの入力文字数を制限します。minとmaxの引数で最小・最大文字数を指定します。 |
入力が有効なメールアドレス形式であることを検証します。 | |
EqualTo | 2つのフィールドの値が等しいことを検証します。 |
フィールド設定の例
以下にフィールド設定の例を表示します。
以下の例では、さまざまなフィールドを設定しています。
class RegistrationForm(FlaskForm):
username = StringField('Username', validators=[DataRequired(), Length(min=4, max=25)])
email = StringField('Email', validators=[DataRequired(), Email()])
password = PasswordField('Password', validators=[DataRequired(), Length(min=6)])
confirm_password = PasswordField('Confirm Password', validators=[DataRequired(), EqualTo('password')])
gender = RadioField('Gender', choices=[('M', 'Male'), ('F', 'Female')], validators=[DataRequired()])
country = SelectField('Country', choices=[('us', 'USA'), ('ca', 'Canada')], validators=[DataRequired()])
accept_tos = BooleanField('I accept the Terms of Service', validators=[DataRequired()])
submit = SubmitField('Register')
まとめ
今回の記事では、Flask-WTFの使い方について解説しました。
Flask-WTFでは、フォームの定義、バリデーションなど、基本的な操作を理解することで、より堅牢なWebアプリケーションを開発できます。
この記事を参考にして、Flask-WTFを使ったフォーム処理を試してみてください。
ここまでお読みいただきありがとうございました!
Pythonの基礎から応用まで学べる
Python WebAcademy
Python WebAcademyでは、Pythonの基礎からアーキテクチャなどの応用的な内容まで幅広く学べます。また、ブラウザ上で直接Pythonコードを試すことができ、実践的なスキルを身につけることが可能です。
Pythonの学習を始めるインフラの学習はInfraAcademy
おすすめの記事