formタグを使ったHTMLとサーバ側のデータの受け渡しについて

タツノリ

Webアプリを開発する中では基本中の基本ですが、
HTMLで入力したデータをサーバ側へ渡す方法とサーバ側で受け取る方法を見ていきたいと思います。
知ってしまえばそんなことかということですが、ここではformタグを使う方法とformタグを使った場合のメリット・デメリットを見ていきたいと思います。

1.HTMLからサーバへ入力データを渡す流れを解説

HTMLからサーバ側へ入力データを渡す流れはざっくり下記となります。
①イベントを定義する（②③はイベントをトリガーに始まる処理）
②HTML内の入力データを集める
③サーバ側へセットする

いまいちピンとこないかもしれませんが、これを一番簡単に実装できるのがformタグです。
formタグには上で説明した①～③の機能がすでに実装するので、formタグで囲うだけで何も意識せずサーバにデータを送れます。

2.HTMLのformタグを使う

下図はシンプルな検索画面です。

画像1

「キーワード入力」が検索するキーワードを入力する部分で「Search」を押すとサーバ側に入力されたキーワードを飛ばします。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Formのテスト</title>
</head>
<body>
  
<header>
 <form action="/q" method="GET">
   <h1>Formのテスト</h1>
   <input type="search" name="keyword" placeholder="キーワード入力">
   <button>Search</button>
 </form>
</header>
<main>
 <section>
   <h2>入力されたキーワード「」</h2>
 </section>  
</main>
</body>
</html>

HTMLもとてもシンプルです。
実際の動作について、キーワード入力部分に「ABCDEFG」と入力してSearchした時のHTTPリクエストが下図になります。​

画像2

1行目の「GET」から始まる部分について解説します。
構造としては『GET＋URL＋パラメータ＋"HTTP/1.1"』となっております。
GETはHTTPのメソッドを示しており、HTML部分では<form>のmethod属性で指定しています。
URLは接続先のサーバのURLですが、<form>のaction属性で指定しています。
そしてパラメータ部分は「？」から始まり「keyword=ABCDEF」というパラーメタが続いています。
入力した内容がパラメータとして渡されており、HTMLで作りを見ると<input>にname属性を指定すると「name属性の値=inputへの入力値」がパラメータになる仕組みとなります。

3.受け取り側について

今回はPythonのFlaskを使っていますが、下記のようにrequest.args.get('パラメータ名')で取得できます。

@app.route('/q', methods=['GET'])
def query():
   _keyword = request.args.get('keyword')
   …
   …

​4.レスポンスとformを使わないやり方について

先ほどの「GET http://127.0.0.1:5000?keyword=ABCDEF」のレスポンスは下記HTMLとなります。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Formのテスト</title>
</head>
<body>
  
<header>
 <form action="/q" method="GET">
   <h1>Formのテスト</h1>
   <input type="search" name="keyword" placeholder="キーワード入力">
   <button>Search</button>
 </form>
</header>
<main>
 <section>
   <h2>入力されたキーワード「ABCDEFG」</h2>
 </section>  
</main>
</body>
</html>

ここで注目して欲しいのはレスポンスで画面全体のHTMLを返しているという点です。
formを使うとサーバへデータを渡す度に画面の再描画が走ります。
今回のように検索条件を入力する画面と検索結果を表示する画面のように意味合いの異なる画面であれば再描画もよいと思いますが、
検索条件が複数あり、条件１の入力内容によって、条件２の選択肢をサーバからとってくるという場合においては同じ画面なのに条件１を変更する度に再描画が走るのは使い勝手が悪いですね。
そのようなときは画面側でもjavascriptを使いJSON形式等でデータだけをやりとりする必要があります。
その場合、javascriptの場合、formタグと違い、どの項目をパラメータとして渡すか実装する必要があります。

このようにformでのデータの受け渡しはとても簡単ですが、デメリットも理解し使いどころを自分で判断しましょう。

この記事が気に入ったらサポートをしてみませんか？