フォームを作ろう

フォームとはアンケートのようにいくつかの入力欄を設けて
そこに記入された情報を受け取る為のシステムです

フォームの送信先や送信形式の設定

<form action="★" method="☆">〜</form>
★=フォームデータの送信先(mailto:メールアドレス)または(CGIのURL)
☆=送信形式の設定(post,get)postを使うのが一般的です
送信されるデータはエンコード(変換)されている為そのままでは読めません

CGIを使わずにデータを受け取る場合は
<form action="★" method="☆" enctype="text/plain">〜</form>
のようにenctype="text/plain"というオプションを付け加えると
データは変換されずに送信されます
★=mailto:メールアドレス

一行テキスト入力欄を作る

<input type="text" name="★" value="☆" size="■" maxlength="□">
★=入力フィールド名(質問の項目)
☆=入力欄に初めから表示されている文字
■=入力欄のサイズ(半角の文字数)
□=最大入力文字数(半角文字数)50と指定すると全角だと25文字になります
タグ使用例(mail送信の場合)
<html>
<head>
<title>タグであそぼう!</title>
</head>
<body bgcolor="#008b8b">
<form action="mailto:あなたのメールアドレス" method="post" enctype="text/plain">
<p>お名前:
<input type="text" name="name" value="お名前をどうぞ" size="30"><br>
メールアドレス:
<input type="text" name="mail" value="メールアドレス" size="30"><br>
URL:
<input type="text" name="urll" value="ホームページ" size="40"><br>
</p>
</form>
</body>
</html>

複数行テキスト入力欄を作る

<textarea rows="★" cols="☆" wrap="■">□</textarea>
★=行数
☆=横幅(半角文字表示数)
□=入力欄の初期値
■=改行コード
off(改行コードなし)
soft(実際に改行されている部分だけ送信)
hard(実際に改行されている部分と自動改行された部分の両方を送信)
スタイルシートの使用でスクロールバーを非表示にする事も可能です(上記サンプル右側)

入力欄を読み取り専用にする

<textarea rows="★" cols="★" readonly>
readonlyを指定すれば、テキスト入力欄が読み取り専用となります

オートコンプリートを無効にする

オートコンプリート(入力補助)無効エリア
オートコンプリート(入力補助)有効エリア
<input type="text" autocomplete="off">のみ
デフォルト(初期状態)ではon(有効)です

ドロップダウンメニューを作る

<select name="★">
<option value="☆">■</option>
</select>

★=識別名
☆=送信される内容
■=ページに表示される文字
タグ使用例
<html>
<head>
<title>タグであそぼう!</title>
</head>
<body>
<form action="mailto:あなたのメールアドレス" method="post">
<p>お名前:
<input type="text" name="name" value="お名前をどうぞ" size="30"><br>
メールアドレス:
<input type="text" name="mail" value="メールアドレス" size="30"><br>
URL:
<input type="text" name="urll" value="ホームページ" size="40"><br>
</p>
<select name="adres">
<option value="関東" selected>関東</option>
<option value="北海道">北海道</option>
<option value="東北">東北</option>
<option value="東海">東海</option>
<option value="関西">関西</option>
<option value="中国、四国">中国、四国</option>
<option value="九州、沖縄">九州、沖縄</option>
</select> </form>
</body>
</html>
赤い表示部分のサンプル

<select name="adres" multiple>とすると複数項目の選択が可能となります
[Ctrl]キーを押しながら複数選択が可能です


メニュー中に小見出しを付ける

<select name="adr">
<optgroup label="東日本">
<option value="東京">東京</option>
<option value="神奈川">神奈川</option>
<option value="埼玉">埼玉</option>
</optgroup>
<optgroup label="西日本">
<option value="大阪">大阪</option>
<option>兵庫</option>
<option>京都</option>
</optgroup>
</select>

サンプル


チェックボックス欄の作成

<input type="checkbox" name="★" value="☆">
★=識別名
☆=送信される内容
タグ使用例
<html>
<head>
<title>タグであそぼう!</title>
</head>
<body>
<form>
<input type="checkbox" name="sex" value="おとこ" checked>♂
<input type="checkbox" name="sex" value="おんな">♀

</form>
</body>
</html>
サンプル

ラジオボタンの作成

<input type="radio" name="★" value="☆">
複数の選択項目の中からひとつを選んでもらう場合使用します
★=識別名
☆=送信される内容
タグ使用例
<html>
<head>
<title>タグであそぼう!</title>
</head>
<body>
<form>
<input type="radio" name="性別" value="おとこ" checked>男性
<input type="radio" name="性別" value="おんな">女性

</form>
</body>
</html>
サンプル
男性 女性

ファイル参照ボタンの作成

<input type="file" name="★" >
★=識別名

パスワード入力欄を作る

<input type="password" name="★" value="☆" size="●" maxlength="■">
★=識別名
☆=入力欄の初期状態での表示文字
●=入力欄の横幅
■=最大入力文字数(半角文字数)

送信ボタンの作成

<input type="submit" value="送信する">
<input type="img" src="☆">☆=画像URL
とすれば、画像のボタンが指定できます

リセットボタンの作成

<input type="reset" value="リセットする">
入力した内容や選択した項目を全てリセットします
上のソースのサンプル

お名前:
メールアドレス:
URL:


ボタンに画像をつかう

<input type="image" src="★">
★=画像ファイル名

フォームボタン群にタイトルを表示する

<fieldset><legend>★</legend></fieldset>
★=タイトル
グループ化したい部分を<fieldset>〜</fieldset>ではさんで下さい
使用例)
<html>
<head>
<title>タグであそぼう!</title>
</head>
<body>
<form>
<fieldset>
<legend>性別記入欄</legend>

<input type="radio" name="性別" value="おとこ" checked>男性
<input type="radio" name="性別" value="おんな">女性
</fieldset>
</form>
</body>
</html>
ブラウザ表示
性別記入欄 男性 女性