Flask Webアプリケーションでテキストボックスの入力内容を取得する

概要

Flask Webアプリケーションでテキストボックスの入力内容を取得します。
Flaskアプリケーションの場合、一般的なWebアプリケーションと同様にテキストボックスに入力した値をFormでPOSTまたはGETして値をサーバー側に渡して値を取得します。

プログラム例

コード

app.py

from urllib import request
from flask import Flask, render_template, request
app = Flask(__name__)

# Make the WSGI interface available at the top level so wfastcgi can get it.
wsgi_app = app.wsgi_app


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

@app.route('/',methods=['POST'])
def func2():
    value1 = request.form.get('textbox1')
    value2 = request.form.get('textbox2')
    ivalue1 = int(value1)
    ivalue2 = int(value2)
    ivalue3 = ivalue1+ivalue2
    result = "結果:" + str(ivalue3)
    return render_template("index.html", output_message=result)
    

if __name__ == '__main__':
    import os
    HOST = os.environ.get('SERVER_HOST', 'localhost')
    try:
        PORT = int(os.environ.get('SERVER_PORT', '5555'))
    except ValueError:
        PORT = 5555
    app.run(HOST, PORT)

templates\index.html

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
  <h1>テキストボックスの入力を受け取るデモ</h1>

  <form method="post" action="/">
    <div>数値を入力して、ボタンをクリックしてください。</div>
    <input name="textbox1" type="text" /><br/>
    <input name="textbox2" type="text" /><br/>
    <input type="submit" />
  </form>
  <hr/>
  <div>{{ output_message }}</div>
</body>
</html>

解説

テンプレート部

formタグを記述してテキストボックスとサブミットボタンを配置しています。

  <form method="post" action="/">
    <div>数値を入力して、ボタンをクリックしてください。</div>
    <input name="textbox1" type="text" /><br/>
    <input name="textbox2" type="text" /><br/>
    <input type="submit" />
  </form>

サーバー側

getでアプリケーションルートURLにGETでアクセスした際には、index.htmlのテンプレートを表示します。

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

アプリケーションルートURLにPOSTした場合は以下のコードが実行されます。テキストボックスに入力された値は、request.form.get([name値]) メソッドで取得します。取得した値を数値に変換し、2つの入力の合計値を計算してページに出力します。

@app.route('/',methods=['POST'])
def func2():
    value1 = request.form.get('textbox1')
    value2 = request.form.get('textbox2')
    ivalue1 = int(value1)
    ivalue2 = int(value2)
    ivalue3 = ivalue1+ivalue2
    result = "結果:" + str(ivalue3)
    return render_template("index.html", output_message=result)