htmlで入力したデータをサーバ側に送信する方法 その1
下記のような画面で、商品名と単価を入力して登録ボタンを押したら、データベースにデータが登録されるような処理の実装例を紹介します。
| 商品コード | 商品名 | 単価 |
|---|---|---|
| 1 | ペン | 100 |
| 2 | ノート | 100 |
商品名： 単価：
商品マスタを出力する処理はホームページの問題点とサーバ処理の基本と必要性で紹介した通りです。商品名や単価のテキストボックスを出力をするhtmlは下記のようになります。
商品名：<input type="text">
単価：<input type="text">
<input type="button" value="登録">クライアントからサーバへデータを送信（submit/サブミット）する
クライアントからサーバへデータを送信することをsubmitと呼びます。
データを送信できるもの
送信できるものは基本的にユーザが入力・変更できるものです。例えば<input>（テキストボックスなど）、<select>、<textarea>があります。
ユーザに変更させず、サーバ処理での制御用に隠し項目のような感じで送信したい項目は<input type="hidden">を使用することが多いです。
ただし、隠し項目とはいえ、htmlとして出力されているため、画面には表示されませんが、出力されたソースを見るとユーザはこの値を見ることができるので、パスワードなどをhiddenに持たせるのはやめましょう。
hiddenに限らず、秘密にしたい情報はクライアント側に出力しないように注意が必要です。
フォーム(form)の基本的な使い方
サーバに送信するときは、コントロールを1つ1つ送信するのではなく、送信したいコントロールをformタグで囲んで、formを送信します。
formという箱にコントロールを詰め込んで送信するというイメージです。なので送信したいコントロールをformタグで囲みます。
<form>の属性にaction="submit先のURL"（省略時は現在のページ）を指定します。
<form>の属性にmethod="post"を指定します。postに関してはGETとPOSTの違いで詳しく説明します。
フォームを組み込んだhtmlは下記のようになります。
<!-- 今回は遷移先画面を同じページ（ファイル）にしたいので、action属性の値はセットしません-->
<form action="" method="post">
商品名：<input type="text">
単価：<input type="text">
<input type="button" value="登録">
</form>