初めてのFlask②〜HTMLフォームの入力値を処理する方法〜

前回は、Flaskの入門として基本的なファイル構成についてやりました。

この記事ではHTMLで入力した値を引数としてPythonで処理をする方法を紹介します。

前回の記事↓

flaskのインストールとファイル準備flaskのインストール今回は仮想環境としてpipenvを使用するので以下のようにインストールします。作業ディレクトリ内で以下のコマンドを実行してインストールしてください。pipenv install ...

ファイル構成
フォームの作成(HTMLファイル)
Python側での受け取り
まとめ

ファイル構成

前回と同じファイル構成で行います。

具体的には以下の構成となっていれば問題ありません。

.
├── app
│   ├── app.py
│   ├── static
│   │   ├── css
│   │   └── images
│   └── templates
│       └── index.html
└── run.py

それぞれの具体的な記述内容に関してはこちらの記事をご覧ください。

フォームの作成(HTMLファイル)

初めにHTMLファイル側に以下のような作りでフォームを作成します。

今回は例として電話番号の入力フォームを作成してみます。

<!-- 省略 -->
<form method="post">
    <input type="tel" name="phone_number" id="phone_number" placeholder="電話番号を入力してください" required value="{{ request.form['b-convert'] if request.method == 'POST' else '' }}">
    <button type="submit">送信</button>
</form>
<!-- 省略 -->

このフォームでは、ユーザーが電話番号を入力して送信すると、その値がphone_numberという名前で送られます。

コードの詳細：

method="post" を指定することで、フォーム送信時にPOSTリクエストとして送信される。
name="phone_number" でフォームの入力値に名前をつける。
value="{{ request.form['phone_number'] if request.method == 'POST' else '' }}" で、フォーム送信後に値を保持できるようにしている。

Python側での受け取り

次に、Flaskのapp.pyでフォームの値を受け取り、処理するコードを記述します。

@app.route("/", methods=["GET", "POST"])
def index():
    result = None  # 初期化
    if request.method == "POST":
        phone_number = request.form.get("phone_number", "")  # 入力値を取得
        if phone_number.isdigit():
            result = f"入力された電話番号: {phone_number}"
        else:
            result = "無効な入力です。数字のみを入力してください。"
    return render_template("index.html", result=result)
#省略

コードの詳細: