🧾 Flaskフォームの使い方をやさしく解説！

この記事では、「Flask」というPythonでWebアプリを作るときによく使われるツールを使って、ユーザーからの入力（フォーム）をどうやって受け取るかを説明します。
フォームというのは、ユーザーに「名前を入力してください」とか「パスワードを入力してください」といった操作をしてもらうための仕組みです。

💡 この記事で学べること

• HTMLでフォームを作る方法（見た目）
• Flaskでフォームからのデータを受け取る方法（中身）
• 入力に間違いがあったときのエラーメッセージの出し方
• Flask-WTFという道具を使って、もっと安全で便利なフォームを作る方法
• 実際のアプリでどう使えるか、考え方のヒント

📝 HTMLでフォームを作ろう

まずは、見た目の部分からスタートです。
Webページに文字を入力する「箱」や「送信ボタン」を作るには、HTMLのフォームタグを使います。

<!-- register.html -->
<form action="/register" method="post">
  <label>ユーザー名:</label>
  <input type="text" name="username" required><br>

  <label>パスワード:</label>
  <input type="password" name="password" required><br>

  <input type="submit" value="登録">
</form>

このコードの意味：

• action="/register"：データをどこに送るか。今回は /register というURLに送る。
• method="post"：データを送る方法。POSTだと画面に表示されず、安全。
• required：この項目を入力しないと送信できないようにする。

フォームは、名前やパスワードの入力以外にも、チェックボックス、ラジオボタン、日付、ファイル選択など、いろいろな種類の入力ができます。

🧪 Flaskでフォームを受け取ろう

フォームから送られてきたデータをFlaskで受け取る方法を見てみましょう。

# app.py
from flask import Flask, request, render_template

app = Flask(__name__)

@app.route("/register", methods=["GET", "POST"])
def register():
    if request.method == "POST":
        name = request.form["username"]
        pw = request.form["password"]
        return f"{name}さん、登録ありがとうございます！"
    return render_template("register.html")

このコードの動き：

• 最初にアクセスしたとき（GET）、HTMLの入力画面を見せる。
• 入力して送信すると（POST）、中の値（名前とパスワード）を受け取ってメッセージを返す。
  ここでは request.form を使って、フォームの中のデータを取り出しています。

HTMLとPythonの関係：

この register.html にあるフォームは、Flaskの app.py にある /register のルートとつながっています。

• HTMLの form action="/register" と、Flaskの @app.route("/register", ...) が一致していることがポイントです。
• 入力欄の name="username" や name="password" は、Python側の request.form["username"] や request.form["password"] に対応しています。

🔐 Flask-WTFで安全で便利なフォームを作ろう

「Flask-WTF」という道具を使うと、入力のチェックやセキュリティ対策が簡単にできます。

インストール

まずは、Flask-WTFをインストールします：

pip install flask-wtf

Pythonでフォームの形を作る

from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField
from wtforms.validators import DataRequired

class RegisterForm(FlaskForm):
    username = StringField('ユーザー名', validators=[DataRequired()])
    password = PasswordField('パスワード', validators=[DataRequired()])
    submit = SubmitField('登録')

• validators=[DataRequired()] と書くことで、「必ず入力してください」というルールができます。

Flaskで使うコード

app.config['SECRET_KEY'] = 'ひみつのキー'

@app.route("/register", methods=["GET", "POST"])
def register():
    form = RegisterForm()
    if form.validate_on_submit():
        return f"{form.username.data}さん、登録できました！"
    return render_template("register.html", form=form)

• このコードでは、入力されたデータがきちんとルールに合っているか（＝バリデーション）をチェックしてから、次の処理に進んでいます。

HTML（テンプレート）側の書き方

<form method="POST">
  {{ form.hidden_tag() }}
  {{ form.username.label }}<br>{{ form.username }}<br>
  {{ form.password.label }}<br>{{ form.password }}<br>
  {{ form.submit }}
</form>

• form.hidden_tag() は、フォームが正しく送られたことをチェックするための情報を入れてくれます（CSRF対策といいます）。

⚠️ 入力エラーを見せる方法

フォームで入力ミスがあったとき、ユーザーに教えてあげる方法です。

{% for field in form %}
  {% for error in field.errors %}
    <div style="color:red">{{ error }}</div>
  {% endfor %}
{% endfor %}

たとえば、パスワードを入力しなかった場合、「このフィールドは必須です」といったメッセージを表示できます。
ユーザーにとって、何が間違っているのかがすぐにわかるようにするのは、とても大切なことです。

✅ まとめ

• HTMLを使って、Webページに入力欄を作れる！
• Flaskで、ユーザーの入力を受け取って使える！
• Flask-WTFを使えば、もっと安全で使いやすいフォームが作れる！
• 入力ミスがあったら、ちゃんとエラーメッセージを出せる！

---

株式会社ONE WEDGE

【Serverlessで世の中をもっと楽しく】 ONE WEDGEはServerlessシステム開発を中核技術としてWeb系システム開発、AWS/GCPを利用した業務システム・サービス開発、PWAを用いたモバイル開発、Alexaスキル開発など、元気と技術力を武器にお客様に真摯に向き合う価値創造企業です。
https://onewedge.co.jp/