"My Pure Lady" Junko Sakurada
桜田淳子資料館 管理人室
7.入力フォーム
フォーム
HTML INDEX
●<FORM> 〜 </FORM>
【説 明】
入力フォームは、このタグの範囲内に記述します。このタグはネスト（入れ子）させることはできません。
・ACTION="url"
「url」には、フォームの内容を処理するCGIのURL や、フォームを送信するE-mailアドレス（"mailto:メールアドレス" 形式）を指定します。
・METHOD="要求メソッド"
「要求メソッド」には、GET・POST が指定できます。
・ENCTYPE="エンコード"
「エンコード」には、エンコードする方法を指定します。フォームの内容をクライアントからサーバーにファイルとして送信する場合に使用します。
・NAME="フォーム名"
「フォーム名」は、JavaScriptでフォームを特定するために使用されます。
・TARGET="ウインドウ名"
「ウインドウ名」には、フォームの内容を送信した結果を表示するウインドウを指定します。指定した名前のウインドウがない場合には、新しいウインドウに表示します。ウインドウの名前は JavaScript で指定することができます。リンク先を特定のフレームに表示させたい場合には、 <FRAME> タグの「NAME=」で指定した値を指定します。
※ターゲットウインドウ名
ターゲットウインドウの名前は、必ず英数字で始まるものを使用してください。
ここでは、すでに付けられた名前を指定しますが、指定もとでこのように名前を付けていないと、ターゲットウインドウは無視されます。
※特別なターゲットウインドウ名
以下の４つの名前を指定した場合は、特別な動作をします。
TARGET="_blank"
名前のない、新しいウインドウにリンクします。
TARGET="_self"
クリックされたウインドウにリンクします。
TARGET="_parent"
フレームを使用している場合は、親（<FRAMESET>の１つ上の階層）ウインドウ（フレーム）にリンクします。親ウインドウが存在しない場合は、"_self"と同様に動作します。
TARGET="_top"
リンク先をウインドウ全体に表示します。フレームを解除する場合に使用します。
【使用例】
-
<FORM>
文字入力：<INPUT TYPE="text"><P>
<INPUT TYPE="button" VALUE="ボタン">
</FORM>
入力形式
HTML INDEX
●<INPUT>
【説 明】
「TYPE=」オプションを使用して、入力する形式を指定します。何も指定しなかった場合には、 "text" が指定されたことになります。
・TYPE="形式"
「形式」には以下の10種類が指定できます。
text（文字入力）
password（パスワード入力）
radio（ラジオボタン）
checkbox（チェックボックス）
hidden（隠しフィールド）
image（画像の座標入力）
button（ボタン）
submit（送信ボタン）
reset（リセットボタン）
file（ファイル選択）
・NAME="シンボリック名"
「シンボリック名」は、画面には表示されませんが、データの名前として使用されます。 submit と reset を除くすべてのタイプに共通です。
・VALUE="文字列"
「文字列」の意味は、「TYPE=」で指定した形式によって異なります。
text・password（フィールドの内容のデフォルト）
radio・checkbox（実際にサーバーに送信される値）
button・submit・reset（ボタン上に表示される文字）
・SIZE="文字数"
「文字数」は、text・password 形式で有効です。入力フィールドの長さを指定します。デフォルトは20文字です。
・MAXLENGTH="最大入力可能文字数"
「最大入力可能文字数」は、text・passwordで有効です。複数行の入力ができる場合は無効となります。
・SRC="url"
「url」で指定された画像が、ボタンとして表示されます。image 形式でのみ有効です。この画像がクリックされると、その位置の座標とともに他のデータも送信されますので、 submit ボタンは必要ありません。
・CHECKED
radio・checkbox 形式で有効です。あらかじめ選択された状態にします。
【使用例】
-
<FORM>
文字入力：<BR>
<INPUT TYPE="text" SIZE=40 VALUE="初期値" MAXLENGTH=20"><P>
</FORM>
<FORM>
パスワード：
<INPUT TYPE="password" SIZE=8 MAXLENGTH=8><P>
</FORM>
<FORM>
<INPUT TYPE="radio" NAME="crab" CHECKED>トゲクリガニ<BR>
<INPUT TYPE="radio" NAME="crab">ヒラツメガニ<BR>
<INPUT TYPE="radio" NAME="crab">サメハダヘイケガニ<BR>
</FORM>
※ラジオボタンを使用する場合は、「NAME=」で統一した名前をつけるようにしてください。そうしなければ、複数選択できるようになってしまいます。
<FORM>
<INPUT TYPE="checkbox" NAME="crab1" CHECKED>トゲクリガニ<BR>
<INPUT TYPE="checkbox" NAME="crab2">ヒラツメガニ<BR>
<INPUT TYPE="checkbox" NAME="crab3">サメハダヘイケガニ<BR>
</FORM>
<FORM>
<INPUT TYPE="button" VALUE="ボタン">
</FORM>
<FORM ENCTYPE="multipart/form-data" ACTION="送信先URL" METHOD=POST>
このファイルを送信：<BR>
<INPUT TYPE="file" NAME="fname" SIZE=30>
<P>
<INPUT TYPE="submit" VALUE="送信">
</FORM>
※「ACTION=」には、メールアドレスも指定できます。つまり、ファイルをメールで転送することが可能です。
例）ACTION="mailto:miki@zspc.co.jp"
メニュー・選択リスト
HTML INDEX
●<SELECT> 〜 </SELECT>
【説 明】
ポップアップ・メニューまたは選択リストを表示します。このタグの範囲内で<OPTION>タグを使用して各選択肢を指定します。
・NAME="シンボリック名"
「シンボリック名」は、画面には表示されませんが、データの名前として使用されます。
・SIZE="選択リストの行数"
このオプションを使用すると「選択リスト」形式、使用しないと「ポップアップ・メニュー」形式で表示されます。「選択リストの行数」には、選択リストのスクロールしないで表示される行数を指定します。
・MULTIPLE
複数の項目を選択できるようにする指定です。
【使用例】
-
<FORM>
<SELECT NAME="crab">
<OPTION SELECTED>トゲクリガニ
<OPTION>ヒラツメガニ
<OPTION>サメハダヘイケガニ
</SELECT>
</FORM>
<FORM>
<SELECT NAME="crabs" SIZE=3 MULTIPLE>
<OPTION SELECTED>トゲクリガニ
<OPTION>ヒラツメガニ
<OPTION>サメハダヘイケガニ
<OPTION>モクズガニ
<OPTION>ヨツハモガニ
<OPTION>コイチョウガニ
<OPTION>ヒライソガニ
</SELECT>
</FORM>
選択項目
HTML INDEX
●<OPTION>
【説 明】
<SELECT>タグの範囲内で、ポップアップ・メニューまたは選択リストの各選択肢を指定します。
・SELECTED
デフォルトで選択された状態にします。
・VALUE="文字列"
「文字列」には、実際にサーバーに送信される値を指定します。
【使用例】
-
<FORM>
<SELECT NAME="crab">
<OPTION VALUE="Telmessus acutidens">トゲクリガニ
<OPTION VALUE="Ovalipes iridescens">ヒラツメガニ
<OPTION SELECTED VALUE="Paradorippe granulata>サメハダヘイケガニ
</SELECT>
</FORM>
入力フィールド
HTML INDEX
●<TEXTAREA> 〜 </TEXTAREA>
【説 明】
<SELECT>タグの範囲内で、複数行の入力が可能な文字入力フィールドを表示させます。このタグの範囲内に記述した文章がデフォルトで表示されます。
・NAME="シンボリック名"
「シンボリック名」は、画面には表示されませんが、データの名前として使用されます。
・ROWS="行数
・COLS="１行の文字数"
・WRAP="折り返し方法"
フィールド内の文字の折り返し方法を指定します。「折り返し方法」には、OFF・VIRTUAL・PHYSICALのいずれかを指定できます。
【使用例】
-
<FORM>
<TEXTAREA NAME="tarea" ROWS=4 COLS=32>ここには、あなたの町のカニ情報を
入力してください。
札幌近郊の浜辺でも、たくさんの種
類のカニが生息しています。
特に「この時期にこれが取れる」系
の情報をお待ちしています。
</TEXTAREA>
</FORM>
<FORM>
<TEXTAREA WRAP=OFF ROWS=3 COLS=32>This attribute is supported Netscape Navigator 2.0.
</TEXTAREA>
</FORM>
<FORM>
<TEXTAREA WRAP=VIRTUAL ROWS=3 COLS=32>This attribute is supported Netscape Navigator 2.0.
</TEXTAREA>
</FORM>
<FORM>
<TEXTAREA WRAP=PHYSICAL ROWS=3 COLS=32>This attribute is supported Netscape Navigator 2.0.
</TEXTAREA>
</FORM>
|