Flask-WTFの使い方を解説【フォームを作成しよう】 - Flask WebAcademy

こんにちは！

今回の記事では、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の引数で最小・最大文字数を指定します。
Email	入力が有効なメールアドレス形式であることを検証します。
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')