戻る

フォームで使われる要素と属性

GET、POSTについて

ユーザがフォームに入れたデータはPOST送信、またはGET送信されてサーバーに渡されます。

GET送信とPOST送信

POST送信 送信データが指定したURLへのリクエストメッセージのボディ部に格納されて送信します。POST送信したデータ内容をURLから見ることはできません。
GET送信 指定したURLの後ろに、データを[?]でつないでサーバーに送信します。たとえばaction属性でaaa.phpを指定しているとき「aaa.php?data1=1234&data2=abc」となり、URL欄でどのようなデータが渡されてきたのか分かるという特徴があります

フォーム関係のタグと属性の使い方

フォーム(form)

<form action="xxx.php" method="POST" enctype="multipart/form-data">

action どのページに送信するか指定します
method POSTまたはGETを指定します。GETを指定するとデータはURLに組み込まれて送信されます
enctype 送信時のMIMEタイプを指定できます(省略可能)。「enctype="multipart/form-data"」とするとファイルタイプで指定したファイルをサーバーに送信することができます

フィールドセット(fieldset)レジェンド(legend)

<form>で囲まれたフォームの中の入力部品をグループ化します。<legend>を指定すると、グループのタイトルを記述することができます。

<form method="POST" action="cgi-bin/xx.cgi">
<fieldset>
<legend>お客様情報</legend>
名前:<input type="text" name="name" size=15>
年齢:<input type="text" name="age" size=15>
</fieldset>
<fieldset>
<legend>ご利用環境</legend>
OS:<input type="text" name="os" size=15>
ブラウザ:<input type="text" name="browser" size=15>
</fieldset>
<input type="submit" value="OK">
</form>

お客様情報 名前: 年齢:
ご利用環境 OS: ブラウザ:

ラベル(label)

<label>は、フォームの中で、フォーム部品とラベルを関係付けるために用います。ラベルを明示することにより、ブラウザでラベルをクリックした時や、ラベルのアクセスキーを押した時に、その部品をクリックしたのと同じ動作をさせることができるようになります。 ラベルは、2通りの指定方法があります。ひとつは、<label>~</label>でラベルと部品を囲む方法です。

<label>名前:<input type="text" name="name"></label>

もうひとつは、

<label for="t1">名前:</label>
<input id="t1" type="text" name="name">

本来はこのどちらかを指定すればよいのですが、Internet Explorer(元バージョンは 6.0)ではまだ、前者の形式をサポートしていないようです。

<label for="t1">
 名前: <input id="t1" type="text" name="name">
</label>

テキストボックス/テキストフィールド(text)

<input type="text" name="kname" value="" size="40">

type="text" テキストボックスのタイプを意味します
name 入力データの名前となります
value データ初期値です
size 入力フィールドの幅です
maxlength 最大入力文字数を指定します
readonly 読み出し専用にします
disabled この属性を指定すると、部品が無効化されます

隠し文字列(hidden)

<input type="hidden" name="no" value="abc">

type="hidden" 隠し文字列タイプを意味します
name 隠しデータの名前となります
value データ初期値です

パスワード(password)

<input type="password" name="pw" value="">

type="password" パスワードタイプを意味します
name パスワードデータの名前となります
value データ初期値です
size 入力フィールドの幅です
maxlength 最大入力文字数を指定します
readonly 読み出し専用にします
disabled この属性を指定すると、部品が無効化されます

テキストエリア(textarea)

<textarea name="biko" cols="60" rows="10"></textarea>

name 複数行の文字列データの名前となります
cols 列数です
rows 行数です
readonly 読み出し専用にします
disabled この属性を指定すると、部品が無効化されます

セレクトボックス/プルダウンメニュー(select)

<select name="ken">
    <option value="0" selected>---</option>
  <optgroup label="関西">
    <option value="1">大阪府</option>
    <option value="2">京都府</option>
    <option value="3">兵庫県</option>
  </optgroup>
  <optgroup label="関東">
    <option value="4">東京都</option>
    <option value="5">神奈川県</option>
    <option value="6">千葉県</option>
  </optgroup>
</select>

selectの属性
name セレクトデータの名前となります
size セレクトボックスの展開行数です
readonly 読み出し専用にします
disabled この属性を指定すると、部品が無効化されます
optgroupの属性
label 選択項目のラベルを指定します。

optionの属性
value データ初期値です
selected セレクトデータの初期値になります

ラジオボタン(radio)

<input type="radio" name="seibetsu" value="1">男性
<input type="radio" name="seibetsu" value="2">女性

type="radio" ラジオボタンの入力タイプを意味します
name ラジオボタン選択データの名前となります(1つだけ選択したい場合は同じ名前にします)
value データの初期値です
checked 初期値として選択するラジオボタンにチェックを入れます
readonly 読み出し専用にします(ラベルタグに指定することも可能)
disabled この属性を指定すると、部品が無効化されます(ラベルタグに指定することも可能)

チェックボックス(checkbox)

<input type="checkbox" name="flg" value="1">公開する

type="checkbox" チェックボックスの入力タイプを意味します
name チェックボックス選択データの名前となります
value データの初期値です
checked 初期値として選択するチェックボックスにチェックを入れます
readonly 読み出し専用にします(ラベルタグに指定することも可能)
disabled この属性を指定すると、部品が無効化されます(ラベルタグに指定することも可能)

ファイル(file)

<form action="xxx.php" method="POST" enctype="multipart/form-data">
<input type="hidden" name="MAX_FILE_SIZE" size="30000">
<input type="file" name="pic" size="40">

type="file" アップロードファイルの入力タイプを意味します
name アップロードファイルデータの名前となります
value データの初期値です
size 入力フィールドの幅です
readonly 読み出し専用にします
disabled この属性を指定すると、部品が無効化されます

イメージ付きボタン(image)

<input type="image" src="" alt="" name="" width="" height="">

type="image" イメージ付きボタンタイプを意味します
src ボタンに使用する画像のURIを指定
alt 画像の代わりになるテキストを指定
name 部品の名前を指定
width ボタンの幅を指定
height ボタンの高さを指定
align 画像に並ぶテキストの位置を指定

送信ボタン(submit)

<input type="submit" name="submit" value="登録する">

type="submit" 送信ボタンタイプを意味します
name 送信ボタンデータの名前となります
value 送信ボタン上に表示される名前です

inserted by FC2 system