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

広告

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