HTML4.0の基本

フォームでデータを送信する

2009年8月6日

form html4.0

フォームの作り方

　フォームにはボタンやテキストボックスといった部品が沢山あるから、おぼえるのが大変だけどとても重要だからおぼえておこう。

ホームページでアンケート集計や､メールを受け取るときに、よく使われるのがフォームです。

↑これがフォーム。

HTMLでフォームというのは、入力可能なフィールドやボタンからなるセクションを指します。主に電子会議室やアンケートの集計に使われています。CGIやJavaScriptと組み合わせて使用されています。

フォームタグ

<FORM></FORM>

<FORM>タグは、HTML文書の中で入力フォームを記述するためのタグです。フォームは再びフォームを入れ子にする以外は、たいていのタグを入れ子にすることができます。一般に<INPUT>、
<SELECT>や<TEXTAREA>タグが使用されますが、通常のテキスト、画像やフォーム関連タグ以外のタグを置いても構いません。

<FORM>タグでは次の属性が使用できます。

action: 実行するCGIスクリプトをURLで記述します。
method: サーバに対する要求メソッドを記述します。GET、POSTの二通りの方法から選択できます。
enctype: 記入(Fill-Out)フォームの内容をエンコードする方法を指定します。
この属性は、methodがPOSTに設定されている場合のみ適用されます。デフォルト値は「application/x-www-form-urlencoded」です。
type属性の値が「file」のINPUT要素がある場合には「multipart/form-data」を指定します。

フォーム内容（コンテンツ）タグ：<INPUT><SELECT><TEXT>

フォーム内容を作るタグには次の三種類があります。

一行ラインのフィールドとボタンを作るタグ：<INPUT>
セレクトボックスを作るタグ：<SELECT></SELECT>
テキストエリア（複数行）フィールドを作るタグ：<TEXT></TEXT>

type属性で使い分ける

<INPUT>タグ

　<INPUT>タグは、<FORM>の中で簡単な入力エリアを作成する場合に用いられます。このタグは開始タグ・終了タグはありません。
　<INPUT>タグは、type属性によって、次の8つのタイプの入力形式が指定でき、いずれかを指定しなければなりません。

type属性

TEXT：テキスト入力を行うテキストフィールドを作ります。type属性を指定しなければテキストフィールドとなります。
PASSWORD：テキスト入力を行なうテキストフィールドですが、文字を入力するとアス
タリスクが表示され、打った内容が隠されます。パスワードの入力フィールドに用いられます。
CHECKBOX：トグルボタンで、複数の項目の選択を行います。
RADIO：トグルボタンで、一つの項目の選択を行います。
IMAGE：画像の座標入力を行います。
HIDDEN：WWWブラウザ側に表示されないフィールドを作ります。このフィールドは表示されませんが、サーバ側にデータが渡されます。このフィールドはあるデータをCGIスクリプトの引数として渡したい場合に用います。そのため、hidden形式のフィールドにはデータ値を含んでいなければなりません。
SUBMIT：ボタンが作成され、<FORM>タグのactionで指定された CGUスクリプトへデータを渡し実行します。
RESET：ボタンが作成され、一つの<FORM>タグ内の入力フィールド全てをデフォルト値にリセットします。

属性

name
は入力フィールドのシンボリック名で、この名前は表示されませんが、データの名前として使用します。これは
submitとreset以外の全てのタイプで必要となります。
value
はTextまたはpasswordフィールド内にあらかじめ文字を挿入しておく場合に用いられます。checkboxやradioボタンの場合、選択された時の値を指定します。submit、resetボタンではボタンの名前になります。
checked は選択フォーム(checkbox、radio)の選択ボタンをあらかじめ選択された状態にしておきます。
size
は入力フィールドの物理的な長さを文字(行)数で指定します。これはtextまたはpasswordエントリにのみ用
いられます。指定されていない場合、デフォルト値は20です。テキストエリア（複数行）にわたる場合、size=幅,高さのように指定します。(例:
size=60,12)
maxlength
は入力で許される最大文字数を指定します。これはtextまたはpasswordエントリにのみ用いられ、フィールドが1行の場合に用いられます。指定されていない場合は、制限はなくなります。

テキストフィールドの作成：text

テキストフィールドはデフォルトで20文字が表示可能なサイズで作られます。 type属性でtextと指定し、フィールドの長さはsize属性で指定します。

<INPUT type="text">
<INPUT type="text" size=30>

maxlengthを指定すると、テキストフィールドには表示できる文字以上に入力することができません。
下記の例では半角5文字が入力の上限です。

<INPUT type="text" size=25 maxlength=5>

valueを指定するとテキストフィールドにあらかじめ文字が表示されます。

<INPUT type="text" value="http://">

テキストフィールドに文章を入力すると、フォームを送信したときvalueの値として送られます。いくつもテキストフィールドがあるときはどの内容が送られたのかわからなくなるので、転送されたフォームの入力内容を読むときのために、フィールド自体に名前を付けておきます。これはブラウザに表示されませんが、複数のフィールドを判別することができます。

URL: <INPUT type="text" value="http://" name="URL">
E-Mail: <INPUT type="text" value="" nme="Mail Address">

ラジオボタンとチェックボタンの作成：RADIO、CHECKBOX

typeの値が radio
ならばラジオボタン、checkboxならばチェックボックスがそれぞれ作られます。

<INPUT type="radio">
<INPUT type="checkbox">

ラジオボタンは複数項目の中で、一つだけ項目を選択したい場合に用いられます。テキストフィールドと同様、ブラウザ上に表示されるテキストは転送されないので、name属性を使って同一カテゴリーのタグに共通な値を記入します。

<INPUT type="radio" name="Magazine">internetuser
<INPUT type="radio" name="Magazine">INTERNET ASCII
<INPUT type="radio" name="Magazine">INTERNET MAGAZINE

このまま転送してもどの雑誌が選択されたのか判別できません。そのため用いるのがvalue属性です。valueはテキスト名と一致させるか、またはその省略形を使えばわかりやすいでしょう。

<INPUT type="radio" name="Magazine" value="user">internetuser
<INPUT type="radio" name="Magazine" value="ASCII">INTERNET ASCII
<INPUT type="radio" name="Magazine" value="MAGAZINE">INTERNET MAGAZINE

チェックボックスは複数の項目から任意の数だけ選択する場合に用いられます。一つの<INPUT>タグで一つのチェックボックスが作成されます。そして、選択されたボタンにvalue属性で値が与えられていればその値を、無ければ
name=on
がデータとしてサーバに送られます。複数選択される可能性があるので、nameで与える名前を変えるのが普通です。

<INPUT type="checkbox" name="user">internetuser
<INPUT type="checkbox" name="ASCII">INTERNET ASCII
<INPUT type="checkbox" name="MAGAZINE">INTERNET MAGAZINE

チェックボックス、またはラジオボタンで予め選択しておくには、選択する項目に
checked属性を指定します。

<INPUT type="checkbox" name="uni" checked="checked">Unix
<INPUT type="checkbox" name="win" checked>PC/Windows
<INPUT type="checkbox" name="mac">Macintosh

<INPUT type="radio" name="program" value="delphi" checked="checked">Delphi
<INPUT type="radio" name="program" value="c++">C++
<INPUT type="radio" name="program" value="java">Java

リセットボタンの作成：RESET

リセットボタンは、フォームの内容を初期の状態に戻します。

<INPUT type="reset">

上の表示のようにボタンが作られ、Reestと名前が自動的に付きます。ボタンの名前を変えたいときにはvalueを使います。

<INPUT type="reset" value="リセット">

送信ボタンの作成：SUBMIT

サブミットボタンは、フォームの内容を送信するときに使われます。ボタンの中に表示されるデフォルトの名前はSubmit
Query（問い合わせの提出）となります。

<INPUT type="submit">

これもリセットボタンと同様に、valueの指定によって名前を変えられます。

<INPUT type="submit" value="送信">

なおreset、submitぼたんともに、valueによって名前を変えたとき、名前の長さに合わせてボタンの大きさが変わります。

<INPUT type="reset" value="初めから書き直し">
<INPUT type="submit" value="送信！">

パスワードフィールドの作成：PASSWORD

入力テキストを人に見えないようにするために、パスワードフィールドが用意
されています。パスワードフィールドはテキストを入力した時、入力した文字がアスタリスク(*)として表示され、何を入力したかをブラウザに表示しません。パスワードフィールドを作成するには
type="password" とし、テキストフィールドと同じようにsizeやmaxlength属性等も
指定できます。

ユーザー名：<INPUT type="text" size="25">
パスワード：<INPUT type="password" size="25" maxlength="8">

セレクトボックスの作成

<SELECT>

SELECTタグは<INPUT>タグのチェックボックスやラジオボタンとは異なる選択メニューです。そして、SELECTタグは開始タグと終了タグがあります。セレクトされる選択肢を作成するにはOPTION属性が使われます。

そして、SELECTタグには二種類の表示方法があります。一つはポップアップメニュー方式でデフォルトはこの方法で表示されます。もう一つは
size属性を指定することによって、メニューウィンドウ形式で表示されるようになります。multiple属性を加える事によって、
SELECTタグで選択できる選択肢を複数選ぶようにすることができます。

<SELECT name="menu">
   <OPTION>最初の選択肢</OPTION>
   <OPTION>2番目の選択肢</OPTION>
   <OPTION>3番目の選択肢</OPTION>
</SELECT>

まとめるとSELECTタグには、次の属性があります。

name属性: SELECT要素のシンボリック名です。
size属性: size属性を指定すると、その数だけメニュー項目形式で表示されます。指定された以上にオプションがある場合、スクロールリストになります。
multiple属性: multiple属性は、メニューの中で選択肢を複数選ぶ事ができる項目に対して使用します。コントロールキーを押しながら複数選択する事ができます。

OPTIONタグには、次の属性があります。

SELECTEDは、予め選択された状態にしておく項目に対して指定します。複数の選択を行う場合は、SELECTタグにmultiple属性を指定しておく必要があります。
valueは、選択された場合の値を指定します。 valueが無ければ、<OPTION>タグで記述し
た項目がその値となります。

<SELECT name="menu">
   <OPTION value="1">選択１</OPTION>
   <OPTION value="2"selected="selected">選択２</OPTION>
   <OPTION value="3">選択３</OPTION>
   <OPTION value="4">選択４</OPTION>
</SELECT>

<SELECT name="menu" size="4">
   <OPTION>選択１</OPTION>
   <OPTION selected="selected">選択２</OPTION>
   <OPTION>選択３</OPTION>
   <OPTION>選択４</OPTION>
   <OPTION>選択５</OPTION>
   <OPTION>選択６</OPTION>
</SELECT>

<SELECT name="menu" size=4 multiple>
   <OPTION>選択１</OPTION>
   <OPTION selected="selected">選択２</OPTION>
   <OPTION>選択３</OPTION>
   <OPTION selected="selected">選択４</OPTION>
   <OPTION>選択５</OPTION>
   <OPTION>選択６</OPTION>
</SELECT>

CTRLキーを押しながら選択してください

テキストエリア（複数行）フィールドの作成

<TEXTAREA></TEXTAREA>

TEXTAREAタグは、テキストエリア（複数行）にわたる記入テキストフィールドを作る際に用いられます。TEXTAREAには次の属性があります。

name属性: テキストフィールドの名称です。
rows属性: フィールドの縦幅の文字数です。；ROW（行）
cols属性: 横幅の文字数です。；語源はCOLUMN（列）

TEXTAREAは必ず終了タグ</TEXTAREA>が必要で、次のように指定します。作成されたテキストフィールドには自動的にスクロールバーが表示されます。

<TEXTAREA name="COMMENT" rows="4" cols="40"></TEXTAREA>

また、開始タグと終了タグとの間にテキストを入れると、デフォルトでそのテキストがテキストフィールドに表示されます。

<TEXTAREA name="COMMENT" rows="1" cols="40">コメントをよろしくね</TEXTAREA>

フォームの送信：action,method

入力内容を転送するには<FORM>タグにactionとmethodの二つの属性を加えます。

<FORM action="mailto:メールアドレス" method="POST">

action属性の後でmeilto:のあとに、自分のE-Mailアドレスを記入します。methodの値には"POST"を使います。あとはできあがったフォームをSubmitしてみて、どんなメールが送られてくるか試してみましょう。

ただし、mailto:は英語しか対応していません。日本語で送られてくると、文字コードが変換されないままなのでとても読むことができません。対処法としては、送られてくる前に読めるような形式に指定しておくか、文字コードを自分のマシンで読めるようにデコード（変換）するかのどちらかになります。それではまず、とても簡単に対処できる１番目の方法から説明しましょう。

１．enctype属性

FORM属性のenctypeでMIME形式を指定します。FORMタグに
ENCTYEP="multipart/form-data" または enctype="text/plain"
と入れるだけで日本語がそのまま送られてきます（というよりも、実際はテキストのままで送られてくるだけなんですが）。
　一部のメーラーで受け取ると添付ファイルという形になりますが、まったく支障なく読むことができます。enctypeの指定方法には２種類ありますが、２番目の方法だと、ウインドウズ版のネットスケープ・ナビゲーター2.0以降でないと無視されてしまいます。確実なのは1番目の方法です。

enctype="multipart/form-data"
<FORM enctype="multipart/form-data" method="post"
action="mailto:USER@pro.or.jp">
enctype="text/plain"
<FORM method="POST" enctype="text/plain"
action="mailto:USER@pro.or.jp">

たぶん上記２つの方法が一番簡単でしょう。ただし、きちんと送信できたという確認をダイレクトにユーザーに知らせることができません。ここでJavaScriptなどを使うと良いでしょう。詳しくは当ホームページの「HTMLのJavaScript添え」に説明してあります。

おまけ-Emailウインドウの利用

フォームから送る方法以外に、もう一つ別の方法として、ブラウザのEmail機能を利用するためのタグがあります。

テキストがないとウインドウには何も現れないので注意してください。テキストを"メールを送る"と入れると次のようになります。

メールを送る

注）メールアドレスはでたらめです。

上記をクリックすれば、メールウインドウが表示され、文章を書いてメールウインドウから送信すれば<A
href="mailto:info@rfs.or.jp">で指定したアドレスにメールが送られます。

Programming Language

Server Side

Blog