76.Formを使ってデータを受け渡そう！　～HTMLでの疑問部分がようやく明らかに～

HTMLでフォームを作っていた時に、このデータは「どうやってやりとりするのかなぁ」という疑問をぼんやり持っていました。

今日、遂にその疑問が解消されます。

では早速やっていきましょう。

formデータの送受信

<form action="example.com" method="post">

HTMLの学習中に、このような記述を見たことがある方は多いのでは無いかと思います。

でもactionが何で、methodが何のような説明は割りとスルーされがちかなぁと感じました。

私自身ひとまず、HTMLを書けるようになるのに必死で、これが「内部的にどういったことをしているのか」なんて言うところまでは頭が回っていないのです。

ようやくそれを学習できる段階に来たんだなぁと勝手にしみじみとしています。

actionでデータ送信先を指定

これは、form内のデータを送信する先を指定します。

今回はPHPファイルを指定してみましょう。

<form action="contact.php" method="post">

これで、このフォームのデータはpayment.phpに渡すよということがブラウザ伝わるわけですね。

methodとは

methodは送信する手段の事です。

GETとPOSTとという2種類があります。

GETはURLにデータ、パラメータなどが含まれて送信されるという点でPOSTとは異なります。

今回はPOSTについて確認していきましょう。

ファイル名index.php

<form action="contact.php" method="post">

<input type = “text” name ="message“>
<input type = “submit” value =“送信“>

</form>

こんな感じのコードで確認していきましょう。

送信側の処理の流れを確認

この状態でtype="submit"の送信ボタンを押すとフォーム内の値がaction属性に指定した先へと送信されます。

その時の送信手段としてmethodで指定した方法で送信されます。

今回はPOSTですね。

受信側の処理の流れを確認

受信側でデータを使う場合は、$_POSTというPHPで定義済みの連想配列を使用します。

この$_POSTには送信側からinputのname属性をキーとして、対応するフォームの内容が

紐づけられて格納されています。

ここまで自動でやってくれるのすごいですね。

ですので、例えば先ほどのコードだと

<body>

</body>

このようにすることで、index.phpのテキスト欄に入力された値をcontact.phpで受け取り、連想配列のキーにname属性のmessageを指定して、内容をｐタグ内に表示する。

ことができます。

こうした流れでデータの受け渡しが行われていたんですね。

今日のまとめ

formでデータを送信する先はaction属性で指定する
送信手段はGETとPOSTの2種類がある
POSTは受信側では既定の連想配列に、ルールに基づいてキーとバリューとして使うことができる

ページ間のデータのやりとりができるのは面白いですね。

HTMLやJavaScriptにはなかったですよね。

では、また。

web制作のしおり

日々の学習をアウトプットします。