インターネット論/インターネット・リテラシー 第19回[2001/11/15]
 

フォーム



課題製作について      期限は12月20日(木) す。



 これまでこの講座で取り上げてきたページの機能は、作者が提供したページをユーザー側は「みる」という一方方向のものでした。ページ上でユーザー側から何らかの「情報」を(作者や)Webサーバー側に伝えために、HTMLに用意されているものが フォーム(Form)です。実際にはこのフォームと
CGIと呼ばれるサーバー側に作者が用意したプログラムを組み合わせて使用する場合が多いのですが、CGIは本講座の範囲外なので、今回はフォーム単独の(mailを呼び出す)サンプルを取り上げます。

mailを呼び出すフォームはNetscape Communicator(Netscape 4)でないと動きません。
新しいHTMLではフォームからmailを呼び出す機能は抑制されているのでNetscape6ではサポートされていません。
本格的なフォームはCGIと組み合わせて意味があるのでまたの機会に勉強しましょう。

 
フォームのサンプル1  (アンケート)
このHTMLのソースは以下のようになる。
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
   <meta name="Author" content="Kan Sakamoto">
   <meta name="GENERATOR" content="Mozilla/4.75 [ja] (Win98; U) [Netscape]">
   <title>formsample1</title>
</head>
<body>

<h1>
アンケート</h1>

<hr WIDTH="100%">
<br>
<form ACTION="mailto: username@wakhok.ac.jp" METHOD="POST" ENCTYPE="text/plain">
<br>氏名:<input TYPE="text" NAME=" 氏名" SIZE=20 >
<p>年齢
<br>
<input TYPE="radio" NAME=" 年齢" VALUE="20未満 ">20未満
<br>
<input TYPE="radio" NAME=" 年齢" VALUE="20以上 ">20以上
<p>感想
<br>
<TEXTAREA NAME="感想 " ROWS=3 COLS=40 ></TEXTAREA>
<br>
<input TYPE="submit" VALUE=" メール送信"><input TYPE="reset" VALUE=" 取り消し">
<br>
</form>
<br>&nbsp;
</body>
</html>

赤字の部分がフォームに関係するHTMLのタグです。

Copmoserの下側にある編集モードツールバー (「標準」「すべてのタグを表示」「<HTML>ソース」「プレビュー」と並んでいる)にある「 すべてのタグを表示」を選んで編集していきます。

フォームに関係するHTMLのタグはComposerでは「挿入 」メニューの「HTML」で入力していきます。
例えば、フォームの最初のタグ

<form ACTION="mailto: username@wakhok.ac.jp" METHOD="POST" ENCTYPE="text/plain">


 
というように入力していきます。
上のサンプルでは入力が終わるとComposerは次のように9つのフォームに関係するタグの印がついています。


 

inputタグにはフォームに貼り付けるinput 部品TYPE= で指定します。

<input TYPE="radio" NAME="年齢 " VALUE="20未満">

この例ではラジオボタンを貼り付けています。

TYPE="checkbox"

とするとチェックボックスに変わります。( フォームのサンプル3 )

また
<input TYPE="radio" NAME="年齢" VALUE="20未満">20未満
<br>
<input TYPE="radio" NAME="年齢" VALUE="20以上">20以上
の部分を

selectタグ optionタグを使って
<select NAME=" 年齢">
<option VALUE="20未満 ">20未満
<option VALUE="20以上 ">20以上
</select>

に変えると選択ボックスに変わります。( フォームのサンプル4 )



今後課題制作を進めながらも、実習時間にはHTMLの補足など新しいことも勉強していきます。実習時間に欠席しないようにしてください。 出席日数も成績に関係します

出席状況の確認方法


題製作」とは別に授業の「 実習課題」も合わせて後期は評価します。



課題のページに進む