htmlフォームの記述

はじめに

Webページ上で次のページを閲覧する際にパスワードを入力したり、
ECサイトで商品を購入する際自分の住所や支払い方法を選択した経験があると思います。
入力した（入力された）値に応じて次の処理を定義する方法について学んでいきます。

Step1: 概念を知る

HTML（Hyper Text Markup Language）: ウェブページを作成するためのマークアップ言語。; 画像や表を見れるようにするために、文字に印（タグ）をつけていくのが特徴。
フォーム: パソコンの操作画面における、ユーザーからの入力を受け付ける部分を指す。; 氏名やアドレスを入力する部分を入力フォームなどと呼ぶことがある。
HTMLフォーム: <input> タグ、 <form> タグを使用し、データを入力、送信するための項目を表示させる。; <input> タグ、 <form> タグ内の属性を変更することで様々な種類を使い分ける。; <input> タグで入力部分や選択部分を作成し、 <form> タグで送信ボタンの作成、送信の設定を行う。

Step2: 使い方を知る

HTMLフォームの表記方法を紹介します。
全てを紹介することはできないので、代表的なものに絞っています。
送信
後述する、 <input> タグで作成された入力フォームに入力されたデータを受け取って、
サーバーに送信します。
method属性 で指定した転送方法で、 action属性 に指定したアクション処理を行います。

<form action="/webapp/testservlet" method="post">
    ・各入力部品
       …
       …
    ・送信ボタン
</form>

テキストボックス（1行）
1行分のテキスト入力欄を作成します。
name属性 ：フォーム部品名および、サーバへ送信するリクエストパラメータ名のパラメータ名になります。
form属性 ：データが送信される際、 name属性 で指定した名前と入力された値が一組になって送信されます。
size属性 ：テキストボックスの表示サイズを指定します。
maxlength属性 ：入力できる最大文字数を指定します。

お名前：
<input type="text" name="name" size="30" maxlength="20">

テキストボックス（2行以上）
2行以上文のテキスト入力欄を作成します。

備考：
<textarea>
</textarea>

パスワード入力欄
入力したテキストがアスタリスク（*）などに置き換えて表示されます。
ただし、データを受け取れば見ることができますので、
完全に暗号化されるわけではない点注意してください。

パスワード：
<input type="password" name="pass" size="10" maxlength="8">

チェックボックス
複数選択可能なチェックボックスを作成します。
checked属性 を指定すると、その項目についてはあらかじめチェックの付いた状態となります。

言語を選択：
<input type="checkbox" name="language" value="html" checked="checked"> HTML
<input type="checkbox" name="language" value="css" checked="checked"> CSS
<input type="checkbox" name="language" value="php"> PHP
<input type="checkbox" name="language" value="java"> Java

ラジオボタン
1つしか選択できないラジオボタンを作成します。
ラジオボタンも checked属性 を指定すると、
その項目についてはあらかじめチェックの付いた状態となります。

性別：
<input type="radio" name="sex" value="m"> MEN
<input type="radio" name="sex" value="w"> WOMEN
<input type="radio" name="sex" value="o"> OTHER

ファイル送信（アップロード）
サーバーへファイルを送信するための、ファイル名の入力欄と[参照]ボタンを作成します。

ファイルをアップしてください：
<input type="file" name="fileup" value="1">

汎用ボタン
用途に合わせて使える汎用ボタンを作成します。
JavaScript等とあわせて、ボタン押下時にブラウザ上でさまざまな処理を行います。

<input type="button" value="button1" onClick="alert('ボタン1がクリックされました。');">

画像ボタン
画像をクリックできるボタンをつくります。
使用する画像ファイルは src属性 で指定します。
alt属性 が必須となります。
また、 alt属性 は画像が表示されなかった際の代替テキストになります。

<input type="image" src="./img/search_btn.gif" alt="検索ボタン">

リセットボタン
それまでに入力した情報をキャンセルして初期状態に戻します。

<input type="reset" value="reset">