前回は、ホームページに「テキストボックス」と「ボタン」だけを設置し、テキストを入力してボタンを押すと、入力テキスト内容が別ページに表示される簡単なWebアプリを作りました。

今回は前回のプログラムを一部変更し、複数のinputタグ要素のname属性パラメータを全て同じにした時の値の取得をやってみます。

formタグに適当に幾つかinputタグを設置します。これらのname属性を同じにすると、リスト形式で渡されるようです。

Flask側では、これらの値をFlaskのrequestモジュールを使って取得しますが、request.form['name属性']やrequest.form.get('name属性')ではリストの先頭の値のみしか取得されないようです。

request.form.getlist('name属性')を使うと全ての値がリストで取得できる。

実行環境

Android スマホ
Termux
Python 3.10.1
外部ライブラリ
- Flask 2.0.2

ディレクトリ構成とファイルの中身

flask_sample/
├── app.py
│  
└── templates
    ├── base.html
    ├── index.html
    └── result.html

1 directories, 4 files

base.html

htmlファイルのメタ情報部分のテンプレートファイル

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- タイトル -->
    <title>Flaskサンプル-{% block title %}{% endblock %}</title>  
</head>

<!-- コンテンツ内容 -->
<body>
    {% block content %}
    {% endblock %}
</body>

</html>

index.html

ホームページ。入力欄やボタンを設置。inputのname属性を全て「 item 」にした。

{% extends 'base.html' %}

{% block title %}ホームページ{% endblock %}

{% block content %}
<form action="/result" method="POST">
    <p>テキスト：<input type="text" name="item"></p>

    <p>数値：<input type="number" name="item"></p>

    <p>
<input type="checkbox" name="item" value="1" checked="checked">松
<input type="checkbox" name="item" value="2">竹
<input type="checkbox" name="item" value="3">梅
</p>
    <p><input type="submit" value="検索"></p>
</form>
{% endblock %}

app.py

フラスコアプリ。

from flask import Flask, render_template, request

app = Flask(__name__)

# ホームページ
@app.route('/')
def index():
    return render_template('index.html')

# 入力値の表示ページ
@app.route('/result', methods=['GET', 'POST'])
def result():
    # index.htmlのinputタグ内にあるname属性itemを取得し、textに格納した
    text = request.form.getlist('item')

    # もしPOSTメソッドならresult.htmlに値textと一緒に飛ばす
    if request.method == 'POST':
        return render_template('result.html', txt = text)

    # POSTメソッド以外なら、index.htmlに飛ばす
    else:
        return render_template('index.html')

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

実行

$ python app.py

サーバが立ったらブラウザでlocalhostのポート5000番にアクセス。

f:id:chayarokurokuro:20220115011824j:plain

ルートにアクセス。

f:id:chayarokurokuro:20220115011837j:plain

入力してボタンで送信。

f:id:chayarokurokuro:20220115011846j:plain

リストがそのまんま表示された。

ついでなので、次はfor文で一つずつ取り出してみる。

result.html書換

リストで取り出せるようなので、ついでにFlaskのテンプレートエンジンの使い方練習をします。

書換1)リストの表示をfor文で

表示する用のテンプレートファイルresult.htmlを次のように書き換えました。

{% extends 'base.html' %}

<!-- タイトル表示 -->
{% block title %}入力の表示{% endblock %}

<!-- コンテンツ内容の表示 -->
{% block content %}
{% for i in txt %}
<ul><li>{{ i|e }}</li></ul>
{% endfor %}
{% endblock %}

入力後にボタンを押すと、

f:id:chayarokurokuro:20220115011857j:plain

リストをulタグでリスト表示できた。

書換2)リストをインデックス指定で抽出

またresult.htmlを書き換え、リストをインデックス指定で要素を取り出してみます。

{% extends 'base.html' %}

<!-- タイトル表示 -->
{% block title %}入力の表示{% endblock %}

<!-- コンテンツ内容の表示 -->
{% block content %}
{{ txt[0] ,  txt[3] }}
{% endblock %}

f:id:chayarokurokuro:20220115011907j:plain