4.1 画面の入力部品について
4.1 画面の入力部品について
HTMLで用意されているフォームを利用すると、Webブラウザで表示した画面からデータを入力することができます。画面からの入力データをプログラムで処理できるようになると、作れるアプリケーションの範囲も広がり、これまで以上に楽しさも出てきます。
まずは画面からデータを送るためのフォームについて学習していきましょう。
※「HTML&CSS入門」の4章：フォームの作成を学習済みの方は、復習として読み進めてください
4.1.1 フォームについて知ろう
Webサイトは、単にそのページを見るだけではなく、情報を入力することもできます。会員登録、アンケート、お問合せ等、自分で入力した情報を送信した経験があると思いますが、このような入力情報はWebサーバーへと送られます。Webサーバー側では送られてきた情報を受け取り、それに対応した処理を行います。
このようなWebサーバーへデータを送るための仕組みをフォームと呼びます。フォームには、用途に応じて、入力するための部品が複数用意されています。テキストボックスやラジオボタン等は、よく利用されるフォームです。
図4.1-2のような、Web画面上からデータを入力する部品群がフォームです。フォームはHTMLタグを利用して作成します。そのため、画面から入力するWebサイトを作成したい場合は、HTMLの知識も必要です。
これから、図4.1-2の画面のHTMLソースコードを例に、フォームの各部品について説明していきます。以下にソースコードを示します。
applyForm.html
<html>
<head>
<meta charset=”UTF-8">
<title>受講お申し込みページ</title>
</head>
<body>
【神田ITスクール受講申し込みページ】<br><br>
<form action="receipt.jsp" method="post">
<table>
<tr>
<th style="background-color:#66CCFF; text-align:left">お名前：</th>
<td><input type="text" name="onamae" value="" ></td>
</tr>
<tr>
<th style="background-color:#66CCFF; text-align:left">電話番号：</th>
<td><input type="text" name="dennwa" value="" ></td>
</tr>
<tr>
<th style="background-color:#66CCFF; text-align:left">受講開始希望日：</th>
<td>
<select name="hiduke">
<option value="1">2/1</option>
<option value="2">3/1</option>
<option value="3">4/1</option>
</select>
</td>
</tr>
<tr>
<th style="background-color:#66CCFF; text-align:left">希望講座：</th>
<td>
<input type="radio" name="kouza" value="0" checked>Java基礎Ⅰ講座
<input type="radio" name="kouza" value="1">Java基礎Ⅱ講座
</td>
</tr>
<tr>
<th style="background-color:#66CCFF; text-align:left">当スクールをお知りになった<br>きっかけ：(複数回答可)</th>
<td>
<input type="checkbox" name="kikkake[]" value="1">当スクールのWebページ
<input type="checkbox" name="kikkake[]" value="2">口コミ
<input type="checkbox" name="kikkake[]" value="3">検索サイト<br>
<input type="checkbox" name="kikkake[]" value="4">知人からの紹介
<input type="checkbox" name="kikkake[]" value="5">雑誌
<input type="checkbox" name="kikkake[]" value="6">その他
</td>
</tr>
<tr>
<th style="background-color:#66CCFF; text-align:left">備考：</th>
<td><textarea name="bikou" rows="3" cols="45"></textarea></td>
</tr>
<tr>
<td colspan=2 style="text-align:center">
<input type="submit" name="okuru" value="申し込む">
<input type="reset" name="torikesi" value="入力取り消し">
</td>
</tr>
</table>
<input type="hidden" name="kakusi" value="2012">
</form>
</body>
</html>
applyForm.html内では、以下の表に示すフォーム部品を使用しています。
それでは、今回利用したフォームの部品を順番に説明していきます。
データ送信の土台になるフォームタグ
<form>タグはフォームを作るための土台になる最も重要な役割を持っています。フォーム部品からの入力データをWebサーバーへ送信する場合、そのフォーム部品は必ず「<form>と</form>のタグの間」に記述する必要があります。
applyForm.html内には1つの<form>～</form>しかありませんが、フォームはいくつでも記述することができます。
また、HTMLの各タグ（開始タグ）には、そのタグの性質や特性を示す「属性」を設定できます。
HTMLのタグには多くの種類があり、タグごとに設定できる属性はそれぞれ違います。詳しく知りたい方は、Webページや書籍のHTMLリファレンスを確認してみてください。
セレクトボックス（プルダウンメニュー）
セレクトボックスは、プルダウンメニューやコンボボックスと呼ばれることもあり、複数の選択データから1つ、もしくは複数を選択するための入力部品です。
セレクトボックスを作るには<select>タグ（セレクトボックスの土台）と<option>タグ（選択データ指定）の両方を使います。また<option>タグは「必ず<select>と～</select>の間」に記述する必要があります。
ここからは<input>タグを使う入力部品について、いくつか紹介します。
<input>タグはtype属性の値を変えることで、さまざまな部品になります。またname属性は、各部品の名前を表します。
テキストボックス
テキストボックスは、短い文字列を入力するためのフォーム部品です。type属性には「text」を設定します。
テキストボックス内で入力したデータは、遷移先の画面やサーブレットで受け取れます。
ラジオボタン
ラジオボタンは、複数の選択データの中から1つだけ選ばせるためのフォーム部品です。type属性に「radio」を設定します。
チェックボックス
チェックボックスは、データを複数選ばせるためのフォーム部品です。type属性に「checkbox」を設定します。
隠しフィールド
入力データではない固定のデータを、画面上では見せずにサーバーへ送るフォーム部品です。type属性に「hidden」を設定します。ユーザーIDのような次の画面には渡したいが上書きをしたくない値を設定する時によく使われます。
実行ボタン（submitボタン）
<form>タグで囲まれ、フォーム部品の入力データをaction属性で指定した先へ送信するためのトリガーとなるフォーム部品です。type属性に「submit」を設定します。
リセットボタン（resetボタン）
<form>タグで囲まれ、フォーム部品の入力データを初期状態に戻す（リセットする）フォーム部品です。type属性に「reset」を設定します。
テキストエリア
テキストエリアとは、複数行に渡る長い文章を入力するためのフォーム部品です。初期表示文字列をテキストエリア内に表示したい場合は、<textarea>文字列</textarea>のように、タグの間に表示したい文字列を挟みます。
