Back to Blog

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

flask

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電話番号入力フィールド
URLFieldURL入力フィールド
HiddenField非表示の入力フィールド

バリデートの設定

バリデートには、以下のような設定ができます。

バリデート説明
DataRequiredフィールドが空でないことを検証します。
Lengthフィールドの入力文字数を制限します。minとmaxの引数で最小・最大文字数を指定します。
Email入力が有効なメールアドレス形式であることを検証します。
EqualTo2つのフィールドの値が等しいことを検証します。

フィールド設定の例

以下にフィールド設定の例を表示します。

以下の例では、さまざまなフィールドを設定しています。

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の学習を始める