入力フォーム

form タグで枠組みを指定する

ユーザーからの入力を受け取り、何らかの処理 を行う仕組みを作成したいときにはページに フォームを配置します。ひとつのフォームの枠組みを規定するのがform要素で、 <form>と</form>の間に各種のパーツ(コントロール) を配置していきます。また、 form要素には右衰のような属性を指定して入力されたデータの取り扱いなどを定めます。 なお、送信の方法を参照して ください。

名前などの一行の入力欄を作成するには、 input タグのtype属性に textを指定します。こ の場合、さらに各属性を設定して、入力欄の設定を行います。サンプルではsize属性 を20に設定して、半角20文字分の帽で表示しています。name属性で 「name」 という名前 を付け、 value属性を「お名前」として、あら かじめ表示しています。

アンケート項目など. に使用するチェックボックスを作成するには input タグのtype属性に 「checkbox」を指定します。下衰の各属性を 指定して詳細を設定します。 name属性を同じ にしたチェックボックスは 1 つのグループとな ります。value属性で、送信される値を指定 します。

複数選択不可の項目は、ラジオボタンを使用す るのが一般的です。 HTMLではinputタグの type属性を 「radio」 に設定します。さらに name属性に同じ値を設定すると、同じ name属性のボタン聞で 1 つしか選択できないようにな ります。さらにそれぞれの項目はvalue属性 に送信されたときに受け取る値を設定しておきます。

長いチキストの入力欄を作成する

<input type=”text”>による1行のテキスト入 力欄に対し、長い文章の入力も可能な入力欄は textarea タグで作成します。textarea タグは下表の属性を設定します (rows cols属性は必須) 。サンプルではname属性で「kanso」という名前を付け、 rows属性を5に設定して5行 分の高さで表示し、 cols 属性を 40に設定して半角40字分の幅で表示しています。

あらかじめ用意した選択肢をドロップダウンリ ストから選択させるには、 select タグおよび optionタグを使用します。 selectタグでリスト の闘始と終了を示し、 option タグで各選択肢 を示します。select タグ、optionタグにはそ れぞれ表の属性を設定できます。ここでは selectタクにname属性で「os」という名前を付 けています。各選択肢にはvalue属性で送信 される値を指定しています。

ドロップダウンリストの項目を複数選択可にするには、select タグに multiple属性を設定します。ユーザー側では、離れた項目は Windowsならctrlキーを、 Macitosh なら×(コマンド) キーを押しながら選択します。連続した項目を選択する場合はshiftキーを押しながら複数項目をクリックします。

ドロップダウンリストの項目がいくつかのカテゴリに分かれるときは、 option タグで指定した選択肢をさらにoptgroup タグでグループ化します。 label属性にグループの名称を指定します。

フォームを送信する

フォーム入カ内容をブラウザから送信するには、まず、フォーム内に送信ボタンを作成します。 inputタグのtype属性 を「submit 」とします。また、 value属性で送信ボタンに表示する文字列を指定できます。指定しない場合は、ブ ラウザによって[クエリ送信] (lE の場合) などと表示されます。

ボタンをクリックしたときにフォームに入力されたデータを処理するプログラムの場所のURLform タグの action属性に指定します。form タグのmethod属性を「post」に設定します。

サンプルでは、名前と感想を送る設定にしてい ます。 action属性にメールを送信するプログラ ム名を指定します。各コントロールに入力さ れた内容を送信するためにはそれぞれのコント ロールに必要な属性を設定しておく必要があり ます。ここでは 1行のテキスト入力欄で名前を、複数行のテキスト入力欄で感想を送るものとします。それぞれ name属性で名前を付けておき ます。

ブラウザに表示し、[送信] ボタンをクリックす ると、 action属性に指定したプログラムが呼 び出されて、メールが送信されます。