フォームについて
- html フォーム編。サイト上で申込や買物をした事のある方は自分の情報などを入力したことがあると思います。あの入力する部分の説明です。
- □ 入力フォームを作る
<form action="★" method="☆" enctype="◆">〜</form>
★・・・データの送信先
☆・・・"get"、"post"（データの送信方法）
◆・・・データを送信する際のMIMEタイプ
ユーザーが入力して送信出来るフォームを作成する為の基本となるタグです。
<form>〜</form>は、この範囲が入力フォームである事を示します。フォームの送信先や送信方法などもこの<form>タグの属性で指定します。
action属性は、フォームに入力されたデータを処理するCGIなどのプログラムのURLを指定します。HTML4.01では省略不可の属性となっています。
method属性では入力されたデータをどのような形で送信するかを設定します。getとpostのどちらかを選択しますが、一般的には「post」使用します。両者の違いは以下の通りです。
get・・・URLとフォームのデータをセットして送信します。
post・・フォームのデータのみを送信
この属性は省略可能ですが、省略した場合にはデフォルトのgetが選択されます。
enctype属性は、method=2posuto"の場合のフォームの送信方法（MIMEタイプ）を指定するものです。デフォルトは「application/x-www-form-urlencoded」です。input type="file"のフォームの場合には「multipart/form-data」を指定します。
テキストなどの入力フィールドや送信ボタンば度、フォームの各部品を作成する様々なタグは、すべてこの<form>〜</form>タグの間に記述していきます。
なお、フォームに入力されたデータを実際に送信する為には、送信されたデータを処理するためのCGIなどのプログラムが別に必要となりますので注意しましょう。
- □ フォームをメールで送信する
<form action="mailto:★" method="post" enctype="☆">〜</form>
★・・・メールの送信先（メールアドレス）
☆・・・データを送信する際のMIMEタイプ
メールを使ってフォーム内容を送信するように設定します。
action属性には「mailto:メールアドレス」を指定します。この場合のmethod属性はpostです。
enctype属性にはデータを送信する際のMIMEタイプを指定しますが、デフォルトの「application/x-www-form-urlencoded」では内容がエンコード（変換）されていてそのままでは読むことができず、変換するためのツールが必要になります。それに対して「text/plain」（プレーンテキスト形式）や「multipart/form-data」を指定すると、そのまま読める状態で送信してもらう事が出来ます。
- □ 送信ボタンをつくる
<input type="submit" ★>
★・・・name="ボタン名"
value="ラベル名"
type="submit"でフォームの内容を送信ボタンを作成します。フォームを送信してもらうには、このボタンが必要になります。
value属性はボタンに表示するテキスト（ラベル）を設定するものです。「送信」「送る」などのテキストはこの属性で設定します。この属性を指定しない場合はブラウザ側のデフォルテのテキストが用いられます。Internet Explorerでは「クエリ送信」、Netscape 6では「クエリーの実行」、それ以前のNetEscape Navigatorでは「Submit Query」と表示されます。
name属性は複数の送信ボタンを作成した場合に、おあされたボタンを受信側で判別するための値を設定します。
- □ リセットボタンを作る
<input tyoe="reset" ★>
★・・・value="ラベル名"
type="reset"で、フォーム内容を初期状態に戻すリセットボタンを作成します。ユーザーがリセットボタンを押すと、そのフォームにユーザーが入力した内容やチェックした項目が取り消され、初期状態に戻ります。
value属性はボタンに表示するテキスト（ラベル）を設定するものです。「やり直し」「取り消し」などのテキストはこの属性で設定します。この属性を指定しない場合はブラウザ側のデフォルテのテキストが用いられます。Internet Explorer、Netscape 6では「リセット」、バージョン6以前のNetscape Navigatorでは「Reset」と表示されます。
- □ 画像を送信ボタンにする
<input type="image" ★>
★・・・src="画像ファイル名"（URL）
alt="画像の代わりのテキスト"
name="ボタン名"
align="top"、"middle"、"bottom"、"left"、"right"
type="image"を指定すると、画像を送信ボタンとして利用できるようになります。
src属性で使用する画像ファイル名（URL）alt属性で、画像の代替テキストを設定しますが、alt属性は対応していないブラウザもあります。
align属性では次のような値をとって、通常の画像同様に表示方法やテキストの回り込みを指定することができます。
top・・・画像の上部と周囲のテキストの上部を揃える
middle・・・画像の中央と周囲のテキストのベースラインを揃える
bottom・・・画像下部とテキストのベースラインを揃える
left・・・画像が左端に寄り、その右側にテキストを回り込ませる
right・・・画像が右端に寄り、その左側にテキストを回り込ませる
なお、回り込みを解除する場合は<br clear="★">を使って下さい。
- □ ボタンを作る
<button type="★" ☆>〜</button>
★・・・sumbit、reset、button
☆・・・name="ボタン名"
value="送信されるテキスト"
<input>タグを指定したときと同様のボタンを作成しますが、このタグでは<button>タグと</button>タグの間の内容をボタンの上に表示することができます。そのためテキストの表示方法を変えたり、ボタン上に画像を表示させたり、あるいはそれらを組み合わせたりする事が可能になります。
type属性でボタンのタイプに、submit（送信）、reset（リセット）、ボタン（button）のいずれかを指定して下さい。buttonを指定すると汎用的に利用できる押しボタンが作成されます。JavaScriptを遣う場合など、送信やリセット以外にボタンが必要な時に利用できます。
name、value、属性には複数のボタンを配置する場合に、受信側で押されたボタンを判別するための値を設定します。
- □ 1行のテキスト入力フィールドを作る
<input =type"★" ☆>
★・・・text、password
☆・・・name="フィールド名"
size="フィールド幅"（文字数）
value="デフォルテで表示されるテキスト"
maxlength="入力可能な最大文字数"
1行のテキスト入力フィールドを作成します。
name属性は、送信されてきたデータを解読する時などに使用する名前を指定するものです。
size属性は、表示されるフィールドの幅を文字数で指定します。
value属性で指定される値は、入力フィールドにあらかじめ表示されるテキストです。
maxlength属性は、フィールドに入力できる最大の文字数を指定します。
また、type="text"の代わりにtype="password"を指定すると、入力した文字が直接には表示されなくなり、一般的には「＊」や「●」で置き換えて表示されます。ただし、データが暗号化されるわけではなく、送信されたデータを直接見れば解読することができるので、利用には注意が必要です。
- □ 複数行のテキスト入力フィールドを作る
<textarea ★ >〜</textarea>
★・・・name="フィールド名"
cols="幅"（半角数字）
rows="行数"
wrap="soft"、"hard"、"off"（改行方法）
<textarea>タグは複数行の入力が可能なフィールドを作成します。
cols属性で幅（1行に入力可能な半角文字数）を、rows属性で行数を指定してフィールドの大きさを決めるので、この2つは必ず指定しなければならないので注意しましょう。
name属性は、送信されてきたデータを解読するときなどに使用する名前を指定するものです。
wrap属性は、土岐ストがフィールド右端にまで達した時の改行方法を指定します。
soft・・・画面上では自動的に改行して表示されるが、実際に送信されるデータは改行されない
hard・・・画面上で自動的に改行して表示し、送信されるデータにも改行が入る
off・・・改行されない
Internet Explorer、Netscape 6ともに、デフォルトがsoftとなっているためwrap属性がなくても表示上改行はされますが、4.7以前のNetscape Navigationでこの属性が指定されていない場合は改行されずに表示されます。このwrap属性はInternet ExplorerとNetscape Navigatorが独自に拡張したもので、HTML4.01では定義されていないので注意しましょう。
<textarea>タグと</textarea>タグの間にテキストを記述しておけば、入力フィールドの中にそのテキストをあらかじめ憑依させる事が出来ます。
- □ ラジオボタンを作る
<input type="radio" ★>
<input type="radio" ★ checked>
★・・・name="ボタン名"
value="送信されるテキスト"
丸いボタンを作成し、選択肢からひとつを選択できるようにします。
value属性はデータが送信された時に、選択された項目が何であるかを判別するための値です。
name属性でボタンに名前を付けますが、この値が同じボタンは同一のグループとして扱われます。共通の項目に対する選択肢の場合には同じ値を設定してください。同じグループのラジオボタンではひとつの項目しか選択できません。
また、cheked属性を指定しておくと、そのボタンがあらかじめ選択された状態で表示されるようになります。
- □ チェックボックスを作る
<input type="checkbox" ★>
<input type="checkbox" ★ checked>
★・・・name="ボタン名"
value="送信されるテキスト"
四角いボタンを作成し、選択肢から項目を複数選択できるようにします。
value属性はデータが送信された時に、選択された項目が何であるかを判別する為の値です。
name属性ではボタンに名前を付けますが、この値が同じボタンは同一のグループとして扱われます。共通の項目に対する選択肢の場合には、同じ値を設定してください。チェックボックスは、同一グループでも複数選択が可能です。
また、checked属性を指定しておくと、そのボタンがあらかじめ選択された状態で表示されるようになります。
- □ プルダウン系形式のメニューを作る
<select ★ ><option ☆ >〜</option></select>
★・・・name="メニュー名"
☆・・・value="送信されるテキスト"
selected
プルダウン形式のメニューを作成します。
<select>タグのname属性は、データ解読の手掛かりなどに利用される名前をメニュー自体に付けます。
選択肢は<option>タグを使って設定し、<option>tタグと</option>lタグで挟まれたテキストがそれぞれメニューに表示される項目止まります。
value属性はデータが送信された時に、選択された項目がなんであるかを判別するための値を指定します。この値を指定しない場合は、<option>タグと</option>タグで挟まれたテキスト、つまりメニュー内に表示されたテキストが選択された項目として送信されます。
また、selected属性を指定しておくと、その項目があらかじめ選択された状態で表示されるようになります。
- □ リストボックスを作る
<selected size="★" ☆ ><option ◆>〜</option></selece>
★・・・リストボックスの表示行数
☆・・・name="メニュー名"
multiple
◆・・・value="送信されるテキスト"
selected
リストボックス形式のメニューを作成するには、<select>タグに表示行数を指定するsize属性を設定します。name属性は、データ解読の手掛かりなどに利用される名前をメニュー自体につけます。
multiple属性を指定しておくと、複数の項目を選択できるようになります。この属性が指定されていない場合は、ひとつの項目しか選択できません。
選択肢は<option>タグを使って設定し、<option>タグと</option>タグで挟まれたテキストがそれぞれメニューに表示される項目となります。
value属性はデータが送信された時に、選択された項目が何であるかを判別するための値を指定します。この値を指定しない場合は<option>タグと</option>タグで挟まれたテキスト、つまりメニュー内に表示されたテキストが選択された項目として送信されます。
また、selected属性を指定しておくと、その項目があらかじめ選択された状態で表示されるようになります。
