flask-wtf - Flask

  • 作成日：
  • 最終更新日：2025/06/25

Flask_WTF とは？

Flask-WTFは、Flask 用にカスタマイズされたWTFormsの拡張ライブラリです。 WTFormsを Flask に統合しやすくするための機能を提供します。

pip install flask-wtf

WTForms を使ってフォーム画面を構築するときに便利なフィールドとバリデータを提供するパッケージです。

pip install WTForms
項目 Flask-WTF WTForms
目的 Flask に統合されたフォーム管理 Python の汎用フォームの管理
依存性 Flask に依存 Flask なしでも利用可能
CSRF 対策 自動でサポート 自分で実装が必要
Flask の request 統合 FlaskForm.validate_on_submit() で簡単に処理 手動でデータを渡す必要あり

ディレクトリ構成

  • project
    • templates
      • index.html
      • result.html
    • app.py

フォームの作成

app.py

from flask import Flask, render_template, url_for, redirect, session
from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField

app = Flask(__name__)

# CSRF 対策のために必要
app.config['SECRET_KEY'] = 'msecretkey'

class MyForm(FlaskForm):
    msg = StringField('msg')
    submit = SubmitField()

@app.route('/', methods=["GET"])
def index():
    form = MyForm()
    return render_template('index.html', form=form)

@app.route('/', methods=["POST"])
def index_get():
    form = MyForm()
    session["msg"] = form.msg.data
    return redirect('result')

@app.route('/result', methods=["GET"])
def result_get():
    msg = session["msg"]
    return render_template('result.html', message = msg)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>flask app/index</h1>
  <form action='/' method="post">
    {{ form.hidden_tag() }}
    <p>{{ form.msg.label }} {{ form.msg() }}</p>
    <p>{{ form.submit() }}</p>
  </form>
</body>
</html>

result.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>flask app/result</h1>
  <p>{{message}}</p>
</body>
</html>

フィールド

各フィールドを定義するクラスを作成します。フォームやバリデーションについてはクラス内で設定します。

from wtforms import StringField, SubmitField

class MyForm(FlaskForm):
    msg = StringField('msg')
    submit = SubmitField()

指定できるフィールドには以下のようなものがあります。

  • BooleanField
  • DateField
  • DateTimeField
  • DateTimeLocalField
  • DecimalField
  • DecimalRangeField
  • EmailField
  • FileField
  • MultipleFileField
  • FloatField
  • IntegerField
  • IntegerRangeField
  • MonthField
  • RadioField
  • SelectField
  • SearchField
  • SelectMultipleField
  • SubmitField
  • StringField
  • TelField
  • TimeField
  • URLField
  • HiddenField
  • PasswordField
  • TextAreaField
  • ColorField

バリデーションの方法

WTForms の主要なバリデーションには、以下のようなものがあります。

バリデーション 内容
DataRequired() 入力が必須
InputRequired() DataRequired()に似ているが、 None 出ないことをチェック
Length(min=5, max=20) 指定した文字数の範囲に制限
NumberRange(min=1, max=100) 数値の範囲を制限
Email() 正しいメースアドレス形式かチェック
URL() 正しい URL 形式かチェック
IPAdress() 正しい IP アドレスかチェック
Regexp(r'^[A-Za-z0-9]+$') 指定した正規表現に一致するかチェック
EqualTo('password_confirm') ほかのフィールドの値と一致するかチェック
AnyOf(['A', 'B', 'C']) 指定した値のリストに含まれるかチェック
NoneOf(['X', 'Y', 'Z']) 指定した値のリストに含まれないかチェック