フォームタグを使おう!

Webの森.com ホームページ作成支援サイト
フォームタグを使おう!

フォームとは?

アンケートなどによくある入力エリアになります。ここでは表示上の説明だけに留めておきます。内面までいくとCGIなどの技術が必須になります。アンケートなどで送信されたデータは通常CGIで受け取るからです。ですので、ここでは入力フォームのタグについて説明します。興味がある方はCGIの勉強をしてみては如何でしょうか?まずは入力フォームの種類について見てみましょう。

入力フォームの種類

テキストフォーム:
パスワードフォーム:
複数行テキストフォーム:
チェックボックス チェックボックス2 チェックボックス3
ラジオボタン ラジオボタン2 ラジオボタン3
セレクトボックス:
プルダウンメニュー:
ファイル選択フォーム:
   
フォームタグでは以上のような入力フォームを作成する事ができます。送信ボタンを押しても動作しないサンプルフォームですので色々動作確認して見てください。

<form>タグ

<form>〜</form>このタグに入力フォームを挟む事によりデータを送信したりリセットしたりする事ができます。送信先や送信形式は<form>タグの属性として指定します。
<form> method="送信形式" POSTかGETで指定する。
action="送信先" 送信先パスを指定する。通常はCGIが送信先になる。
ここで、送信形式GETPOSTが出てきました。これについて見てみましょう。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="任意の表示名" これを変えることにより、表示されているボタンの文字を変える事ができます。
お願い
もしページの内容がお役に立てたら、ポチっと押して貰えると幸いです。

正当なCSSです!