Servlet/JSP 第7回では、フォームについて解説しています。
フォームは、Webページに入力したデータをサーバサイドプログラムに送信できます。
それを実現できるのがフォームの役割です。
検索サイトやショッピングサイトなどのほとんどのWebサイトで使われており、Webアプリケーションには欠かせない存在です。
一言で言うとブラウザから情報を入力して送信する仕組みです。
フォームの基本
フォームの構造
基本的なフォームの例
フォームは複数のHTMLのタグを組み合わせて作成します。
上記の基本的なフォームの例の構造とタグの関係を理解しましょう。
上図のひとまとまりが「フォーム」です。
フォームの中にはデータ入力や送信の為の部品を配置します。
この図の例では、「テキストボックス」「ラジオボタン」「送信ボタン」の3種類の部品があります。
フォームをコードで書いてみよう
<form action="Form" method="POST">
名前：<input type="text" name="name"> <!-- 部品１ -->
<br>
性別：
男<input type="radio" name="gender" value="0"> <!-- 部品２ -->
女<input type="radio" name="gender" value="1">
<br>
<input type="submit" value="送信"> <!-- 部品３ -->
</form>フォームの部品
HTMLには、データ入力や送信ための部品が用意されています。
各部品はタグを使って作成します
type属性・・・input要素の種類を選択する属性。type属性には20種類程あり決められた属性を使う
name属性・・・入力されたデータを送信するための識別子。name属性の値を識別名と言います。
value属性・・・input要素の値を指定する属性。テキスト入力欄などにおいては初期入力値、
チェックボックスやラジオボタンにおいては選択した時にだけ送信する値、送信ボタンなどにおいてボタン名を表します。
部品１ テキストボックス
<input type=”text” name=”name”>
１行のテキストを入力できる部品です。入力したテキストの値が送信されます
部品２ ラジオボタン
<input type=”radio” name=”gender” value=”0″>
<input type=”radio” name=”gender” value=”1″>
１つの選択肢グループの中から、１つだけを選択する部品です。
name属性の値が同じものが１つの選択肢グループです。
選択したボタンのvalue属性の値が送信されます。
部品３ 送信ボタン
クリックするとフォームに入力したデータを送信します。
フォームに最低1つは必要です。
name属性は必須ではありません。
value属性の値がボタンのラベルとして表示されます。
フォームの作成
form自他の書き方について説明します。
formタグの構文
<form action=”送信先” method=”GET/POST”>
・
・
・
</form>
・フォームは<form></form>このフォームタグの中に前述までのインプットタグを記述していきます。
・フォームタグの外に部品を書くと、その部品の値は送信されません。
action属性：送信先となるServletクラスまたはJSPファイルを指定します。
フォーム内の送信ボタンをクリックすると、ブラウザはこの属性に指定した先をリクエストすると同時にデータを送 信します。リクエストとともに送信されてきたデータを実行時に取得できます。
method属性：リクエストメソッドを指定して、ServletクラスへのリクエストをGETリクエストにするかPOSTリクエストにするかを選択します。
method属性をGETにしたら、ServletクラスではdoGetメソッドを実行、POSTにしたら、doPostメソッドを実行します。
リクエストパラメーター
フォームの送信ボタンをクリックすると、フォームの部品に入力したデータは「name=”name”」（部品名＝値）の形式で送信されます。これをリクエストパラメーターと言います。
GETリクエストとPOSTリクエスト
GETリクエスト・・・Webページで次のページへの遷移や検索する場面
POSTリクエスト・・・フォームに入力した情報を登録するような場面
というようなそれぞれ決まりになっています。
・GETリクエストで送信する場合
ブラウザでは、リクエスト先のURLの末尾にリクエストパラメータを付加して送信する。
ブラウザのアドレスバーにリクエストパラメーターが表示される。
URL例） http://localhost:8080/sample/Register/?name=yamada&age=25
・POSTリクエストで送信する場合
ブラウザは、リクエストのボディ部にリクエストパラメーターを入れて送信する。
ブラウザのアドレスバーに表示されない。
URL例） http://localhost:8080/sample/Register
GETリクエストとPOSTリクエストの使い分け
・GETリクエストを使う
送信した結果を保存、共有する場合
・POSTリクエストを使う
データをアドレスバーに表示したくない場合
（個人情報や機密情報の送信など）
コメント