PythonのフレームワークであるFlaskでformタグの使い方を解説します。
この方法は、Django等でも同様なので、他のpythonフレームワークでも応用可能です。
Point!
- formに入力値をFlaskで取得できるように記述（HTML）
- formで入力値をFlaskで取得、引き渡し（Python,Flask）
- Flaskで処理した値やテキストの取得（HTML）
ファイル構成
sample
│ flask.py # formの値を受け取り、遷移先のページに引き渡す
│
└─templates
│ base.html
│ error.html
│ form.html # form入力
└─ age.html # formの値を引き継いで表示するformに入力値をFlaskで取得できるように記述（HTML）
まずは、Flaskが受け取れるようなhtmlを書きます。今回は、例として年齢を入力するformを作成します。
{% extends 'base.html' %}
{% block body %}
<div>
<form action="/age" method="POST"> #formタグでPOSTのリクエストを送信
<div>
<label for="formFile" class="form-label">私の年齢</label>
<input type="number" class=".form-control-lg" name="age" step="1.0" max="120" min="0">
<button type="submit" value="register">登録</button> #formの値を送信する
</div>
</form>
</div>
{% endblock %}ポイントは以下です。
- formタグにaction=’/ルーティング先’とmethod=’POST’の指定
- inputタグでデータの種類とnameを指定
- buttonタグでtype=”submit”記載する
formタグにaction=とmethod=’POST’の指定
action＝”/ルーティング先”でflask.pyのルーティング先を指定します。
今回の場合、次章で説明するflask.pyの @app.route(‘/age’ , methods=[‘GET’,’POST’]) に値を渡したいので、 action＝”/age” とします。
methodは、‘POST’としてください。理由については、他サイトを参照してください。
”method GET POST” で検索かければ、出てくると思います。
inputタグでデータの種類とnameを指定
nameを指定しないと参照先がわからないので、nameを指定します。
例として、name = ‘age’ としています。
buttonタグでtype=”submit”記載する
これは、登録ボタンを作成しています。
submitはformタグに入力された値を送信する役割です。
formで入力値をFlaskで取得、引き渡し（Python,Flask）
from flask import Flask, render_template
import numpy as np
app = Flask(__name__)
@app.route('/form', methods=['GET', 'POST'])
def age():
return render_template('form.html',)
@app.route('/age', methods=['GET', 'POST'])
def age():
if request.method == 'POST':
try:
age= request.form.get('age')
text = '私の年齢は' + str(age)
return render_template('age.html',age=age,text=text)
except ValueError:
return render_template('error.html')
if __name__ == "__main__":
app.run(debug=True)ポイントは以下です。
- request.method == ‘POST’
- request.form.get
- render_template
request.method == ‘POST’
先ほどのform.htmlで method=’POST’に設定しているので、flask側でもPOSTで受け取るように設定します。
request.form.get(‘ name ‘)でformの値を受け取る
form.htmlの<input>タグに name=’age’ を指定してので、’age’ を入力します
request.form.get(‘age’)
request.formは他にも request.form[‘name’] や request.form.getlist(‘name’) などがあり、必要に応じて使い分けます。
render_templateで受け取った値を引き渡す
render_template（遷移先, 変数, 変数,…..）で遷移先のhtmlと変数を引き渡します。
今回遷移先は age.html ,変数として age=age, text=text としています
Flaskで処理した値やテキストの取得（HTML）
{% extends 'base.html' %}
{% block body %}
<p> 私の年齢は {{ age }}</p>
<p>{{ text }}</p>
{% endblock %}ポイントは以下です。
- {{ 変数 }}で受け取り
{{ 変数 }}で受け取り
{{ 変数 }} この変数の部分にflask.pyのrender_templateから引き継いだ変数を記入します。
今回は、{{ age }} と {{ text }} を引き継ぎます。
まとめ
Flaskを実行してうまくいけば、<p>タグの２行は同じように表示されるはずです。
初回は、request.methodsの設定や変数の引き渡し方、<form>の設定等でつまずくと思います。
ただ一度覚えてしまうと汎用性が非常に高いです。
また、今回はFlaskで実践しましたが、Djangoでも同様なので他のフレームワークで活用可能です。
プログラミングの勉強に悩んだら、、
プログラミングの勉強に悩んだら、『Udemy』をオススメします。
オススメのポイント
・全ての講座がオンライン
・リーズナブルな価格で、実用的なスキル
・購入した講座を何度でも見直せる
・プログラミングの講座が豊富
