HTML MANUAL 5

フォームの作成
こちらからデータを発信するだけでなく、感想を書いてもらったり連絡をしたりするためにはつぎにあげるフォームが必要です。この作り方について説明します。次の例をみてください。

フォームの基本

フォームは
<FORM ACTION="http://133.91.154.53/cgi/mls.pl" METHOD="POST" ENCTYPE="text/plain">
のような<FORM>ではじまり </FORM>でおわります。この中にいろいろなタグを書いていくことになります。

まず<FORM>タグのなかの指定を説明します。 ACTION="*** "はデータの送付先を指定します。例のようにサーバのプログラムにおくって処理をまかせるか、メールアドレスを指定します。メールアドレスを指定する時は mailto:mz@tamacc.chuo-u.ac.jpのように書きます。ただし、送られたデータはそのままでは読めません。それを読むためには処理が必要です。

次にMETHOD="*** "は送信方法を指定します。ここではget, postを指定できます。 getでは半角255文字までしか送信できません。 postではそのような制限はありません。フォームから送信する時は通常はpostを用います。

ENCTYPE="*** "は送信形式を指定します。指定できるのはtext/plain, application/x-www-form-urlencoded, multiple/form-dataのいずれかです。省略した時はapplication/x-www-form-urlencodedで送付されます。

テキスト入力欄をつくる

フォームの例に沿って、説明をしていきます。まず氏名を入力する欄はテキスト入力欄になっています。
<INPUT TYPE="text" NAME="name" VALUE="ここに名前を書いてください" SIZE="50" MAXLENGTH="60" STYLE="ime-mode: active">

ここでINPUT TYPE="text"はテキスト入力欄であることを示します。 NAME="name"は送信される時の識別名です。送信される時は 識別名=入力された名前という形でデータが送信されます。
VALUE="ここに名前を書いてください"ではあらかじめ入力欄に表示しておく文字を指定します。 SIZE="50"は入力欄の半角での横幅を指定します。 MAXLENGTH="60"は最大入力可能文字数を指定します。 STYLE="ime-mode: active">は日本語入力モードを指定します。 activeは日本語を入力可能にし、inactiveは英語入力モードにします。disabledにすると日本語入力を禁止します。
e-mailアドレスを記入する欄は名前と同じ形式です。異なるのは日本語入力モードを禁止している点です。これは全角文字を禁止するために指定しています。それを書いておきました。

<INPUT TYPE="text" NAME="e-mail" VALUE="e-mailアドレスをお願いします" SIZE="50" MAXLENGTH="60" STYLE="ime-mode: disabled">

同様にして年齢を記入する欄を作ることができます。ソースを書いておきます。各自理解してください。

<INPUT TYPE="text" NAME="age" VALUE="18" SIZE="10" MAXLENGTH="5" STYLE="ime-mode: disabled">

ラジオボタンをつくる

ラジオボタンは複数の項目の中から1つを選択してもらう時に用います。例では性別と所属学科を選んでもらう時にこのボタンを用いています。

<INPUT TYPE="radio" NAME="sex" VALUE="m" CHECKED>男姓
　　 <INPUT TYPE="radio" NAME="sex" VALUE="f">女姓
ここで<INPUT TYPE="radio" >はラジオボタンであることを示します。 NAME="sex"で同じ名前を付けられた中からひとつを選びます。 VALUE="m"は選ばれる項目を指定します。送信される時は sex=m(男性が選ばれた時) sex=f(女性が選ばれた時)と送信されます。 CHECKEDはあらかじめ選択されている項目を指定します。

所属学科の例を下に書いておきます。自分で理解してください。
<INPUT TYPE="radio" NAME="department" VALUE="keizai" CHECKED>経済学科
<INPUT TYPE="radio" NAME="department" VALUE="kokukeii">国際経済学科
<INPUT TYPE="radio" NAME="department" VALUE="sankei">産業経済学科
<INPUT TYPE="radio" NAME="department" VALUE="koukyo">公共経済学科

同様にして複数項目からひとつを選択してもらう場合をつくることができます。ソースを書いておきます。各自で理解してください。

<INPUT TYPE="radio" NAME="necessity" VALUE="1">思ったことはない
<INPUT TYPE="radio" NAME="necessity" VALUE="2">たまに思う
<INPUT TYPE="radio" NAME="necessity" VALUE="3">時々思う
<INPUT TYPE="radio" NAME="necessity" VALUE="4">よく思う
<INPUT TYPE="radio" NAME="necessity" VALUE="5">切実に思う

チェックボックスをつくる

チェックボックスは複数項目から複数の項目をえらんでもらう場合に使います。次の例を見てください。

ではチェックボックスをつくります。 NAME="koukou-kamoku"はチェックボックスの名前です。 VALUE="1"は送信データです。選ばれた項目の応じてデータが送信されます。たとえば、数学Iがえらばれるとkoukou-kamoku=1と送信されます。

次の例もチェックボックスを用いて作られています。自分で理解してください。

<INPUT TYPE="checkbox" NAME="necessity-reason" VALUE="1">経済学部の授業で
<INPUT TYPE="checkbox" NAME="necessity-reason" VALUE="2">就職の時に
<INPUT TYPE="checkbox" NAME="necessity-reason" VALUE="3">資格試験のときに
<INPUT TYPE="checkbox" NAME="necessity-reason" VALUE="4">コンピュータを学ぶ時に
<INPUT TYPE="checkbox" NAME="necessity-reason" VALUE="5">その他日常生活で

ファイル選択ボタンをつくる

ファイル選択ボタンはブラウザを表示している人がファイルや画像をアップロードする時にファイル名を入力してもらったりファイルを選択してもらうためのボタンです。次の例を見てください。

<INPUT TYPE="file" NAME="picture-file" VALUE="c:\mydocument\myphoto.jpg">

NAME="picture-file"にはボタンの識別名を書きます。今の場合には picture-fileです。VALUE="c:\mydocument\myphoto.jpg"にはあらかじめ入力されている文字を書きます。今の場合には c:\mydocument\myphoto.jpgです。送信される時は picture-file=c:\mydocument\myphoto.jpgと送信されます。

選択メニューをつくる

これは複数の項目からひとつあるいは複数の項目を選択してもらう時に使います。次の例を見てください。

<SELECT NAME="kibou-kiso" MULTIPLE>
<OPTION VALUE="a1" SELECTED>基礎数学A１
<OPTION VALUE="a2">基礎数学A2
<OPTION VALUE="b1">基礎数学B1
<OPTION VALUE="b2">基礎数学B2
</SELECT>

ここで<SELECT NAME="kibou-kiso" MULTIPLE>～</SELECT>は選択メニューを作ります。NAME="kibou-kiso"はメニューの名前を表します。これは識別名になります。MULTIPLEは複数選択するときに指定します。何も書かなければひとつだけ選択することになります。 <OPTION VALUE="a1" SELECTED>は項目名です。これは項目の数だけ繰り返します。ここでSELECTEDはあらかじめ選択しておく項目を表します。データを送信する時は kibou-kiso=a1 (基礎数学A１が選択された時)のように送られます。

選択メニューの例をあげておきます。各自で理解してください。

複数行のテキスト入力欄をつくる

テキスト入力欄のうち複数行を入力するための入力欄の作り方は次のようです。

<TEXTAREA ROWS="10" COLS="70"WRAP="soft" STYLE="background-color: aqua; ime-mode:active">
数学の授業に対する希望などをお書きください。
</TEXTAREA>

ここでテキスト入力欄は<TEXTAREA>～</TEXTAREA>で指定します。あらかじめ表示しておきたい文字は～の所に書きます。 ROWS="10" COLS="70"は行が10段、列が半角で70文字であることを示します。 WRAP="soft"は改行文字の送信方法を指定します。softは実際に改行されている部分のみを送信します。従って、画面の上で改行されていてもリターンキーで改行を指示しない限り改行は行われません。これ以外にoffとするとすべての改行コードは省かれて送信されます。実際に改行されている部分と画面上で改行されている部分を両方改行して送信する時にはhardとします。 STYLE="background-color: aqua; ime-mode:active"では背景色と日本語入力モードを切り替えています。

パスワード入力欄をつくる

パスワード入力欄は次のようにして作ります。

<INPUT TYPE="password" NAME="passwd" VALUE="aaaaa" SIZE="20" MAXLENGTH="30">

ここでNAME="passwd"は識別名です。送信する時はpasswd=パスワードの形で送信されます。 VALUE="aaaaa"にはあらかじめ入力しておくパスワードを書いておきます。但し、画面の上ではこれは表示されません。 SIZE="20" MAXLENGTH="30">はそれぞれパスワード入力欄の横幅と最大入力文字数を表します。

送信ボタン、取り消しボタン、隠し項目ボタンを作成する

次の例を見てください。最初の2つはほとんど明らかでしょう。最初は取り消しボタンです。フォームの入力を取り消して最初の状態に戻します。 VALUEではボタンの上に表示する文字を指定します。
2番目の例は送信ボタンです。このボタンをクリックするとフォームへの入力データを送信します。 VALUEには送信ボタンに上に表示する文字を指定します。
3番目の例は隠し項目データ送信ボタンです。これはブラウザには表示されませんが、データとして送信したい時に用います。管理情報がこれにあたります。これを用いてサーバは送られたデータの処理を実行します。 NAMEは識別名、VALUEは送信データです。mathdata=requestの形でデータが送られます。

戻る