Flaskでフォームを作成してデータを送信する基本のやり方をやさしく解説
生徒
「PythonのFlaskを使って、入力フォームを作りたいんですが、どうすればいいですか?」
先生
「Flask(フラスク)はPythonでWebアプリケーションを作るための軽量なフレームワークです。フォームを作って、入力されたデータを受け取るのも簡単ですよ。」
生徒
「HTMLとかPOSTとか聞いたことあるけど、難しそうです……」
先生
「大丈夫です。簡単な言葉と例えを使って、ゼロからゆっくり説明しますね!」
1. フォームとは?Webページにある入力欄
まず、「フォーム」というのは、インターネット上でよく見る「名前を入力してください」や「お問い合わせ内容を入力してください」のような部分です。これはHTMLというWebページを作るための言語で書かれます。
ユーザーが文字を入力して「送信」ボタンを押すと、その情報がサーバーに送られます。これを「POST(ポスト)」と呼びます。これは「手紙をポストに入れる」イメージと同じです。
2. Flaskでフォームを表示するHTMLを書く
HTML(エイチティーエムエル)は、ホームページの見た目を作る言語です。Flaskではテンプレート(ひな型)を使って、このHTMLを表示できます。
以下のコードは「名前」と「メッセージ」を入力する簡単なフォームです。ファイル名は templates/form.html にしましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>フォーム入力</title>
</head>
<body>
<h1>お問い合わせフォーム</h1>
<form method="POST">
<label>お名前:</label><br>
<input type="text" name="name"><br><br>
<label>メッセージ:</label><br>
<textarea name="message"></textarea><br><br>
<input type="submit" value="送信">
</form>
</body>
</html>
3. Flaskでフォームを表示・受け取るコードを書く
次に、PythonでFlaskを使って、フォームの画面を表示したり、送られたデータを受け取ったりするコードを書きます。
このコードは、app.py という名前で保存しましょう。
from flask import Flask, render_template, request
app = Flask(__name__)
@app.route('/', methods=['GET', 'POST'])
def form():
if request.method == 'POST':
name = request.form['name']
message = request.form['message']
return f"こんにちは、{name}さん!\nあなたのメッセージ: {message}"
return render_template('form.html')
if __name__ == '__main__':
app.run(debug=True)
4. 実行してフォームを使ってみよう!
上記の app.py を保存してから、コマンドライン(黒い画面)で以下を実行してみてください。
python app.py
ブラウザで http://localhost:5000 を開くと、フォーム画面が表示されます。名前とメッセージを入力して「送信」すると、入力された内容が画面に表示されます。
5. Flaskのフォーム処理をもっとわかりやすく
「Flaskでフォーム作成」「Flask POST送信」「Flask 入力欄の作り方」などで検索される内容を整理しておきましょう。
- Flaskとは? PythonでWebアプリを作るための軽量な道具です。
- HTMLとは? Webページの見た目を作るための言語です。
- フォームとは? ユーザーが入力する部分(名前・メッセージなど)です。
- POSTとは? 入力内容をサーバーに送信する方法です。
- request.formとは? 送られてきたデータをPythonで受け取る方法です。
このように、Flaskでは初心者でもフォームを使ったデータ送信が簡単にできます。最初は難しく感じるかもしれませんが、少しずつ慣れていけば大丈夫です!
まとめ
Flaskでフォームを作り、ユーザーからの入力を受け取り処理する方法は、Webアプリケーション開発において欠かせない基本的な仕組みです。今回の記事では、フォームの役割、POST送信の流れ、HTMLテンプレートの配置、Flaskのルーティング、そして受け取ったデータの扱い方までを体系的に学びました。特に、フォーム構築とFlaskの組み合わせはシンプルでありながら応用範囲が広く、実際のサービスやアプリ開発でも頻繁に使われます。
フォームはユーザーとサーバーをつなぐ大切な架け橋であり、名前やメッセージなどの情報を入力してもらい、それをサーバー側で受け取り動作させることで「問い合わせフォーム」「ログイン画面」「検索窓」「投稿機能」など、多様な仕組みを作り出すことができます。Flaskではこのフォーム処理を驚くほどシンプルな記述で実現できるため、初心者でもわかりやすく取り組みやすいことが大きな魅力です。
HTML側では、<form>タグを使い、method="POST"を指定することでデータ送信が可能になります。テキスト入力欄やテキストエリアを配置し、送信ボタンを押すとサーバーにデータが送られます。この送信されたデータをPython側で受け取るのがrequest.formであり、辞書形式のデータから値を取り出して処理します。今回のサンプルでは、名前とメッセージを受け取りブラウザに返すというシンプルなものでしたが、これを応用すれば、データベースへの保存、別ページへの遷移、メール送信、ログ記録などさまざまな機能に発展できます。
また、Flaskのルーティングでは、@app.route('/', methods=['GET', 'POST']) のように記述することで、同じURLでもGETとPOSTの両方に対応できる柔軟な動作が可能です。ページを表示するときはGET、フォーム送信後はPOSTという流れが自然に整理され、初心者にも理解しやすい構造となっています。
さらに、テンプレートファイルをtemplatesフォルダに配置し、render_template()を使って表示する仕組みは、Flaskアプリ全体の見通しを良くするためにも欠かせません。HTMLをPythonコードと分離して管理できるため、画面設計とロジックの両方を整理しやすくなり、学習が進むほど「この作り方がとても便利だ」と実感できるはずです。
ここからさらにステップアップすると、フォームバリデーション、CSRF対策、WTFormsの利用、ファイルアップロード処理など、より高度なフォーム技術にも進むことができます。まずは今回の基本をしっかり理解し「フォームの構造」「POST送信の仕組み」「Flaskでの受け取り方」を身につけることが大切です。
■ Flaskフォームの応用サンプルコード
<!-- templates/contact.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>お問い合わせ</title>
</head>
<body>
<h1>お問い合わせフォーム</h1>
<form method="POST">
<label>お名前:</label><br>
<input type="text" name="name"><br><br>
<label>メールアドレス:</label><br>
<input type="email" name="email"><br><br>
<label>お問い合わせ内容:</label><br>
<textarea name="content"></textarea><br><br>
<input type="submit" value="送信">
</form>
</body>
</html>
# app.py
from flask import Flask, render_template, request
app = Flask(__name__)
@app.route('/contact', methods=['GET', 'POST'])
def contact():
if request.method == 'POST':
name = request.form['name']
email = request.form['email']
content = request.form['content']
return f"{name}さん({email})からのお問い合わせ内容:<br>{content}"
return render_template('contact.html')
if __name__ == "__main__":
app.run(debug=True)
このように、入力欄を増やしたり種類を変えるだけで、実際のアプリに近いフォーム機能を簡単に作れます。受け取ったデータをそのまま画面に返すだけでなく、ファイルへ保存したり、別ページに表示したり、データベースへ保存するなど、機能の広げ方は無限にあります。
生徒:「フォームってただの入力欄かと思っていましたが、Flaskと組み合わせるといろんな機能が作れるんですね!」
先生:「その通りです。フォームの仕組みはシンプルですが、応用すればアプリの中心になる大切な部分ですよ。」
生徒:「POSTで送るとか、request.formで受け取るとか、流れが少し見えてきました!」
先生:「流れを理解すれば一気に楽になります。テンプレート表示とフォーム送信の動きがわかれば、機能追加も簡単ですよ。」
生徒:「次はデータベースに保存したり、確認画面を作ったりもできそうですね!」
先生:「その意欲が何より大切です。今回学んだ基本を土台に、どんどん機能を作ってみてくださいね。」