フォームとは？
アンケートなどによくある入力エリアになります。ここでは表示上の説明だけに留めておきます。内面までいくとCGIなどの技術が必須になります。アンケートなどで送信されたデータは通常CGIで受け取るからです。ですので、ここでは入力フォームのタグについて説明します。興味がある方はCGIの勉強をしてみては如何でしょうか？まずは入力フォームの種類について見てみましょう。
入力フォームの種類
フォームタグでは以上のような入力フォームを作成する事ができます。送信ボタンを押しても動作しないサンプルフォームですので色々動作確認して見てください。
<form>タグ
<form>〜</form>このタグに入力フォームを挟む事によりデータを送信したりリセットしたりする事ができます。送信先や送信形式は<form>タグの属性として指定します。
| <form> |
method="送信形式" |
POSTかGETで指定する。 |
| action="送信先" |
送信先パスを指定する。通常はCGIが送信先になる。 |
ここで、送信形式GETとPOSTが出てきました。これについて見てみましょう。GETは、データをURLの後ろに付け加えて送信するタイプです。データ量に制限があります。POSTは、GETのようにURLとして送信されるわけではありません。データ量に制限ありません。他にも受け取り側(CGI)で少々違いが出てきますが、通常はPOSTを使うといいでしょう。
テキストフォーム
<input type="text" name="名前" value="初期値" size="30" maxlength="20">
| type="text" |
入力タイプをテキストフォームにする。 |
| name="任意の名前" |
項目の名前をつけます。それぞれ違う名前にする(半角英数) |
| value="初期値" |
入力フォームにデフォルトで文字を入れておくことができる。 |
| size="数値" |
フィールドの幅を設定する。 |
| maxlength="数値" |
最大文字数を設定する。 |
パスワードフォーム
<input type="password" name="名前" value="初期値" size="30" maxlength="20">
| type="password" |
入力タイプをパスワードフォームにする。 |
| name="任意の名前" |
項目の名前をつけます。それぞれ違う名前にする(半角英数) |
| value="初期値" |
入力フォームにデフォルトで文字を入れておくことができる。 |
| size="数値" |
フィールドの幅を設定する。 |
| maxlength="数値" |
最大文字数を設定する。 |
複数行テキストフォーム
<textarea name="名前" cols="30" rows="3"></textarea>
<textarea name="名前" cols="30" rows="3">要素を囲む事により初期値を設定</textarea>
| name="任意の名前" |
項目の名前をつけます。それぞれ違う名前にする(半角英数) |
| cols="数値" |
フィールドの幅を設定する。 |
| rows="数値" |
フィールドの行数を設定する。 |
チェックボックス
<input type="checkbox" name="グループ名" value="送信内容">
<input type="checkbox" name="グループ名" value="送信内容" checked>
| type="checkbox" |
入力タイプをチェックボックスにする。 |
| name="グループ名" |
複数のチェックボックスの名前を同じにする事により、一つのグループを作成する事ができます。 |
| value="送信内容" |
そのボタンが選択されている時、この内容が送信される。 |
| checked |
この属性を指定すると、デフォルトでチェックが入ります。 |
ラジオボタン
<input type="radio" name="名前" value="送信内容">
<input type="radio" name="名前" value="送信内容" checked>
| type="radio" |
入力タイプをラジオボタンにする。 |
| name="グループ名" |
複数のチェックボックスの名前を同じにする事により、一つのグループ
を作成する事ができます。ラジオボタンの場合は選べる項目はグループ
内で一つ。 |
| value="送信内容" |
そのボタンが選択されている時、この内容が送信される。 |
| checked |
この属性を指定すると、デフォルトでチェックが入ります。 |
セレクトボックス
<select name="名前" size="3">
<option value="送信内容" selected>東京都</option>
<option value="送信内容">千葉県</option>
<option value="送信内容">神奈川県</option>
</select>
| name="任意の名前" |
項目の名前をつけます。それぞれ違う名前にする(半角英数) |
| size="数値" |
フィールドの行数を設定する。 |
| value="送信内容" |
その項目が選択されている時、この内容が送信される。 |
| selected |
この属性を指定すると、デフォルトで選択されている状態。 |
プルダウンメニュー
<select name="名前">
<option value="送信内容" selected>東京都</option>
<option value="送信内容">千葉県</option>
<option value="送信内容">神奈川県</option>
</select>
| name="任意の名前" |
項目の名前をつけます。それぞれ違う名前にする(半角英数) |
| size="数値" |
フィールドの行数を設定する。 |
| value="送信内容" |
その項目が選択されている時、この内容が送信される。 |
| selected |
この属性を指定すると、デフォルトで選択されている状態。 |
ファイル選択フォーム
<input type="file" name="名前" size="40">
| type="file" |
入力タイプをファイル選択フォームにする。 |
| name="任意の名前" |
項目の名前をつけます。それぞれ違う名前にする(半角英数) |
| size="数値" |
フィールドの幅を設定する。 |
送信ボタンとリセットボタン
<input type="submit" value="送信">
<input type="reset" value="リセット">
| value="任意の表示名" |
これを変えることにより、表示されているボタンの文字を変える事ができます。 |
