フォームに関するタグ

フォームに関するタグを示します。

フォームの基本タグ form

フォーム全体を囲みます。以下の属性を持ちます。

action フォームデータの送信先(メールアドレスまたはCGIのURLアドレス)を指定します。
method フォームデータの送信形式をpostまたはgetで指定します。actionで指定したCGIに対応した形式で指定する必要があります。getには文字数制限があるので、一般的にpostが使用されます。
enctype フォームを送信する際の形式(MIMEタイプ)を指定します。

例 フォーム表示プログラムに送信

<form action="http://www.tokiwa.ac.jp/~shio/el/html/print.cgi" method="post">
</form>

入力 input

入力項目を作成します。終了タグはありません。type属性によってさまざまな入力を作成できます。type属性の値別に説明します。

type="text", "password"

入力行を作成します。passwordにした場合には入力された文字が*で表示され、他の人にはわからなくなります。続けて以下の属性を指定できます。

name 入力行に名前をつけます。
value あらかじめ表示させておく値を指定します。
size 入力欄の大きさを指定します。
maxlength 入力できる最大文字数を指定します。

例 入力行

名前<input type="text" name="name" size="15"><br>
パスワード<input type="password" name="password" length="10" size="10">
名前
パスワード

type="checkbox", "radio"

チェックボックス、ラジオボタンを作成します。続けて以下の属性を指定できます。

name 入力フィールドに名前を付けます。
value 選択肢の内容を指定します。
checked あらかじめチェックのついた状態になります。属性値はありません。

例 チェックボックス、ラジオボタン

血液型
<input type="radio" name="blood" value="A">A
<input type="radio" name="blood" value="B">B
<input type="radio" name="blood" value="AB">AB
<input type="radio" name="blood" value="O">O<br>
好きなゲーム(複数回答可)<br>
<input type="checkbox" name="MUSIC" value="yes">音ゲー
<input type="checkbox" name="RPG" value="yes">RPG
<input type="checkbox" name="SLG" value="yes">シュミレーション
<input type="checkbox" name="ACTION" value="yes">アクション

血液型 A B AB O
好きなゲーム(複数回答可)
音ゲー RPG シュミレーション アクション

type="file"

参照ボタンと参照したファイル名を表示する欄を作成します。続けて以下の属性を指定できます。

name 入力フィールドに名前をつけます。
value あらかじめ表示させておく値を指定します。

type="hidden"

ブラウザに表示されない項目を作成します。続けて以下の属性を指定できます。

name 入力フィールドに名前をつけます。
value 送信される値を指定します。

type="reset"

入力欄のクリアを行うリセットボタンを作成します。続けてvalue属性にボタンの名前を指定します。

例 リセットボタン

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

type="submit"

フォームの送信ボタンを作成します。続けてvalue属性にボタンの名前を指定します。

例 送信ボタン

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

type="image"

画像を使った送信ボタンを作成します。続けて以下の属性を指定できます。

src 画像のファイル名を指定します。
name ボタンにつける名前を指定します。
width 画像の横幅を指定します。
height 画像の高さを指定します。

テキストボックス textarea

あらかじめ表示させておくテキストを囲んで、複数行のテキスト入力欄を作成します。以下の属性を持ちます。

rows テキストボックスの行数を指定します。
cols テキストボックスの文字数を指定します。
name 入力欄に名前を付けます。
wrap 入力欄の自動改行を設定します。hardは、自動改行して実際の改行と自動改行の両方で改行コードを送信します。softは、自動改行して実際の改行のみ送信します。offは、自動改行せずに改行コードを取り除いて送信します。

例 テキストボックス

<textarea rows="10" cols="80" name="comment" wrap="soft">
コメントをどうぞ
</textarea>

選択メニュー select

選択メニュー全体を表します。各選択項目はoption要素として書きます。以下の属性を持ちます。

name 入力欄に名前を付けます。
size 項目を表示する行数を指定します。指定した行数以上に項目がある場合にはスクロールバーがつきます。省略した場合には、1行のプルダウンメニューになります。

選択項目 option

選択メニューの項目を表します。終了タグはありません。以下の属性を持ちます。

value 送信される内容を指定します。
selected あらかじめ表示される項目につけます。属性値はありません。

例 選択項目

<select name="syusshin" size="3">
	<option value="ibaraki">茨城
	<option value="fukusima">福島
	<option value="tochigi">栃木
	<option value="others">その他
</select>