ただのHPとかであれば、入力値などあまりないかもしれないですが、
ECサイトなどのwebアプリケーションでは、フロントサイド(クライアントサイド)からの入力値を、サーバサイドで取得してそのあとDBに保存したり、なんらかの処理をして再度クライアントサイドにレスポンスします。
ここではそのクライアントサイドと、サーバサイドでの入力値の処理について話したいと思います。
要は以下のようになります。
Contents
入力値の送信
そしてbuttonタグで、type="submit"のボタンをクリックすると、inputの入力値(value)とname属性を吸い上げて、formで指定した送り先にデータを送信します。
ちなみにform、input、buttonの各要素の意味は簡単には以下の通りです。
formタグで送信先や送信方法を指定する
formタグでは、action属性と、method属性を指定することが可能です。
action属性：送り先サーバサイドプログラム(リクエストしてサーバサイドで初めて処理するプログラムファイル)
method属性：httpのGETメソッドで送信するか、POSTメソッドで送信するかを指定。デフォルトはGET通信 ※ このサイト内の別ページでGET、POSTを説明してます。
※ formタグの中に、送信情報となるinputタグ、そして送信のトリガーとなるbuttonタグを入れる必要があります。
inputタグで入力情報を取得する
inputタグでは、サイト上での入力欄を表示します。要素によっては複数選択できるセレクトボックス、1つしか選択できないチェックボックス、ドロップダウンなど様々な入力欄をinputタグで作成できます。
inputタグの主な属性は以下です。最低限以下の属性が必要になります。
type属性：textを指定することで、入力欄が表示されます。(ちなみにhiddenを指定することで、入力欄は表示されずinputタグのname属性、value属性の情報をそのまま送信します)
value属性：入力値
name属性：送る入力値のパラメータ(name=value)
buttonタグは、まさしくbuttonを表示します。
buttonをクリックすると、データの送信をしたり、現在表示しているページの表示を変更したりなど、様々な動作のトリガーとして使用したりします。
formタグの中に指定して、type="send"とすることで、そのボタンをクリックすると、サーバにリクエストを投げてページ遷移などを行うことができます。
type属性：submitを指定することで、このボタンをクリックした際ページ遷移を行いつつ入力値をサーバに送信する
上記form、input、buttonを組み合わせると、
というようにでき、これにより、
入力欄で100が入って、送信ボタンをクリックすると、
サーバサイドプログラムのindex.phpにHTTPリクエストメソッドのGETで送信する
ということになります。
これによって、クライアントサイドからサーバサイドに入力値が送られるようになりました。
サーバサイドで入力値の取得
クライアントサイドから送られたデータは当然サーバサイドで受けとる処理が必要になります。
送られてきたデータを取得する方法としては以下の2種類があります。
| 項目 | 説明 |
|---|---|
| 1 | $_GET["name"]と$_POST["name"] |
| 2 | filter_input(INPUT_GET, "name")とfilter_input(INPUT_POST, "name") |
filter_inputはエスケープ処理をして値を取得してくれるため、基本的にはこのfilter_input関数を使用するのが一般的らしいです。
そして$_GETなどは、あまり直接的には使用しない方がいいらしいです。
ここではfilter_input関数を用います。
$val = filter_input(INPUT_GET, "key"); print($val); // 100