画面の入力部品について

7.1 画面の入力部品について

 フォームを利用すると、Webブラウザで表示した画面からデータを入力することができます。画面からの入力データをプログラムで処理できるようになると、作れるアプリケーションの範囲も広がりこれまで以上に楽しさがでてきます。
 まずは画面からデータを送るためのフォームについて学習していきましょう。

7.1.1 フォームについて知ろう

 Webサイトは、単にそのページを見るだけではなく、情報を入力するフォームでできているものもあります。フォームには会員登録、アンケート、お問合せなどがあります。
 このようなフォームで入力された情報はWebサーバへと送られ、Webサーバ側では送られてきた情報を受け取り、それに対応した処理を行います。

図 7.1.1 WebブラウザからWebサーバへ入力情報を送信

 フォームには用途に応じて入力するための部品が複数用意されています。テキストボックスやラジオボタンなどは、よく目にしたことがあると思います。

図 7.1.2 HTMLフォーム画面の例

 図7.1.2のようなWeb画面上からデータを入力する部品群をフォームといいます。フォームはHTMLタグを利用して作成します。そのため、画面から入力するWebサイトを作成するには、HTMLの知識も必要になってきます。図7.1.2の画面のHTMLソースコードを例にして、フォームの各部品について説明していきます。以下にソースコードを示します。

➢ applyForm.html

 applyForm.html内では以下の表に示すフォーム部品を使用しています。

表 7.1.1 使用しているフォーム部品一覧

それでは、今回利用したフォームの部品について順番に説明していきます。
<form>タグ   :フォームの土台になる、最も重要な役割を持つタグ
 action=”XXX” :データの送信先をaction属性に設定する
 method=”XXX” :データの送信方法をmethod属性に設定する(GETまたはPOST)

<select>タグ  :複数の選択データから1つもしくは複数を選択するための入力部品のタグ

<input>タグ   :type属性の値を変えることで様々な部品になるタグ
 type=”text”   :テキストボックスは短い文章を入力する部品
 type=”radio”  :ラジオボタンは複数の中から1つだけ選べる部品
 type=”checkbox”:チェックボックスはデータを複数選ばせるための部品
 type=”hidden” :入力データではない固定のデータを、画面上では見せずにサーバへ送る部品
 type=”submit” :フォームのaction属性へ送信するためのトリガーとなる部品
 type=”reset”  :フォーム内の各部品の入力データを初期状態に戻す部品

<textarea>タグ :複数行に渡る長い文章を入力するためのフォーム部品になるタグ

※<select>タグ、<input>タグ、<textarea>タグは、必ず<form>タグ囲み内で利用しなければいけません。
 <form>タグ囲み内でない部品はデータ送信対象にならないので注意が必要です。

NEXT>> 7.2 Webサーバへデータを送る方法