21
31

More than 3 years have passed since last update.

PythonでHTMLフォームのデータを受信し表示する

Posted at

PythonでHTMLフォームのデータを受信し、表示させてみた。

HTMLファイルの記述

まずはHTMLでフォームを送信するコードを記述する。

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <form method="POST" action="cgi-bin/index.py">
      <label>テキスト:</label>
      <textarea name="text"></textarea>
      <button type="submit">送信</button>
    </form>
  </body>
</html>
  • methodについて

methodには、データを取得するGETメソッドと、データを送信するPOSTメソッドがある。
今回は、データを送信するので、POSTメソッドを用いる。

  • actionについて

actionで、データを送信するURLを指定できる。
今回は、後に出てくるcgi-bin/index.pyに送信する。

フォームデータの送信についての詳しい説明は、以下の記事を参照。
https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data

Pythonファイルの記述

次に、Pythonでデータを受け取り、表示するCGI(ゲートウェイインタフェース規格)スクリプトを記述する。
CGIスクリプトとは、HTTPサーバーによって起動され、HTMLなどでユーザーが入力したデータを処理するスクリプトである。
詳細は、以下の記事を参照。
https://docs.python.org/ja/3/library/cgi.html#module-cgi

cgi-bin/index.py
#!usr/bin/python
# -*- coding: utf-8 -*-

import cgi # CGIモジュールのインポート
import cgitb
import sys

cgitb.enable() # デバッグに使うので、本番環境では記述しない

form = cgi.FieldStorage() # フォームデータを取得する

print("Content-Type: text/html; charset=UTF-8") # HTMLを記述するためのヘッダ
print("")

# フォームのデータが入力されていない場合
if "text" not in form:
    print("<h1>Error!</h1>")
    print("<br>")
    print("テキストを入力してください!")
    print("<a href='/'><button type='submit'>戻る</button></a>")
    sys.exit()

text = form.getvalue("text") # データの値を取得する

print(text)

後に実行するときのために、以下のコマンドで実行権限を変えておくこと。

Command
$ chmod 755 cgi-bin/index.py

CGIサーバーを動かす

(以下の記事を参考にしました。
https://qiita.com/shuichi0712/items/5ddc5b4e30c2373b17fb

次に、CGIサーバーを動かす。
そのためのスクリプトを、cgiserver.pyに記述する。

cgiserver.py
import http.server
http.server.test(HandlerClass=http.server.CGIHTTPRequestHandler)

その後、以下のコマンドを実行すると、CGIサーバーが動く。

Command
$ python -m http.server --cgi

その後、ブラウザでhttp://0.0.0.0:8000 と検索すると、フォームが表示され、フォームを入力して送信すると、入力内容が表示される。

21
31
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
21
31