フォームから送られるデータの確認方法

フォームを使ってサーバへデータを送信した時、どのようなデータが実際に送られているのか確認する方法をご紹介しておきます。サーバ側のプログラムは必要ありませんが、メソッドとして「get」を使いますのであまり長いデータでは出来ません。

まず確認したいフォームが含まれるWebページを作成したら、送信先を自分自身(例えばindex.htmlという名前のWebページにフォームを記述している場合はindex.html)に設定しメソッドは「get」にします。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>フォームのサンプル</title>
  </head>
  <body>
    <h1>フォームサンプル</h1>

    <p>アンケートにご協力下さい</p>

    <form action="index.html" method="get">
    <p>
    名前：<input type="text" name="text1" /><br />
    住所：<input type="text" name="text2" /><br />
    年齢：
    <input type="radio" name="radio1" value="10" />10代
    <input type="radio" name="radio1" value="20" checked="checked" />20代
    <input type="radio" name="radio1" value="30" />30代<br />
    <input type="submit" name="button1" value="送信" />
    </p>
</form>

  </body>
</html>

このページをWebブラウザで表示した後で、フォームに値を入力して下さい。

p2-1

「送信」ボタンをクリックするとform要素のaction属性に指定したURIに対してデータが送信されます。今回は自分自身のURIを指定しており、またメソッドが「get」ですので自分自身のWebページが再度表示されブラウザのアドレス欄にはフォームデータ付きのURIが表示されます。

p2-2

この時、ブラウザのアドレス欄に表示されているのは次の通りです(ローカルディレクトリの位置を表す部分は省略してあります)。

index.html?text1=yamada&text2=tokyo&radio1=30&button1=%E9%80%81%E4%BF%A1

「get」メソッドの場合、送信先のURIの後に「?」を付けてその後にフォームのデータが記述されます。よってフォームから送られたデータは次の部分です。

text1=yamada&text2=tokyo&radio1=30&button1=%E9%80%81%E4%BF%A1

フォームのデータは「名前=値」と言う形式で送られます。また複数ある場合には「&」で区切り続けて記述されます。よって今回送られたデータは次のようになります。

text1=yamada
text2=tokyo
radio1=30
button1=%E9%80%81%E4%BF%A1

このように「get」メソッドを使うことで、どのようなデータが実際にサーバに対して送信されているのかを確認することが出来ます。

URLエンコード

URIにデータを付けて送信する場合、データもURIの一部となりますのでURIの規則に従う必要があります。URIではアルファベットや一部の記号を除く文字は「%xx」と言う%＋2桁の16進数に変換する必要があります。この変換形式をURLエンコードと言います。

※変換はバイト毎に行われますので日本語などの場合は1文字であっても「%xx%xx」や「%xx%xx%xx」のように表されることがあります。

先ほどの例で「button1=%E9%80%81%E4%BF%A1」となっている部分がありますが、この「%E9%80%81%E4%BF%A1」は「送信」と言う文字がURLエンコードされた値です。URLエンコードは自動的に行われますのであまり気にする必要はありませんが、このような処理が行われていることだけ憶えておいて下さい。

( Written by Tatsuo Ikura )

Profile

著者 / TATSUO IKURA

初心者～中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。