Zenn
✏️

【Flask入門】Flaskでフォームを作って入力を受け取るまで

に公開
Flask
Python
idea

この記事では、Flaskでフォームを作って入力を受け取るまでの手順をまとめます。
コピペで動かすだけでなく、フォルダ構成からコードの意味まで理解していきます。

1. フォルダ構成を準備する

現在の app.py があるフォルダに templates というフォルダを作ります。
その中に index.html を置きます。

study-log/
├── app.py
└── templates/　←フォルダ追加
└── index.html　←ファイル追加

  • templates/ : HTMLファイルを置くフォルダ（Flaskのルール）
  • index.html : トップページ用のHTML

2. app.py を修正する

app.py に以下のコードを書きます。

from flask import Flask, request, render_template

app = Flask(__name__)

@app.route("/")
def index():
    return render_template("index.html")

@app.route("/submit", methods=["POST"])
def submit():
    log = request.form["log"]
    return f"受け取りました: {log}"

if __name__ == "__main__":
    app.run(debug=True)

3. index.html を作成する

次に templates/index.html を作ります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>学習ログ</title>
</head>
<body>
    <h1>Hello, 学習ログ！</h1>
    <form action="/submit" method="post">
        <input type="text" name="log" placeholder="今日の学習ログ">
        <button type="submit">送信</button>
    </form>
</body>
</html>

4. 動作確認をする

アプリを起動します。

python app.py

ブラウザで以下にアクセスします。

http://127.0.0.1:5000/

フォームに入力して送信すると、入力内容が「受け取りました: ○○」と表示されれば成功です！

次回は今回書いた app.py のコードの意味を1行ずつ理解していきます！

Discussion