インターネット論/インターネット・リテラシー 第21回[2000/11/16]
 

フォーム



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



 これまでこの講座で取り上げてきたページの機能は、作者が提供したページをユーザー側は「みる」という一方方向のものでした。ページ上でユーザー側から何らかの「情報」を(作者や)Webサーバー側に伝えために、HTMLに用意されているものがフォーム(Form)です。実際にはこのフォームと
CGIと呼ばれるサーバー側に作者が用意したプログラムを組み合わせて使用する場合が多いのですが、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のタグです。
フォームに関係する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の補足など新しいことも勉強していきます。実習時間に欠席しないようにしてください。出席日数も成績に関係します

出席状況の確認方法


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



課題のページに進む