ユーザがフォームに入れたデータはPOST送信、またはGET送信されてサーバーに渡されます。
POST送信 | 送信データが指定したURLへのリクエストメッセージのボディ部に格納されて送信します。POST送信したデータ内容をURLから見ることはできません。 |
GET送信 | 指定したURLの後ろに、データを[?]でつないでサーバーに送信します。たとえばaction属性でaaa.phpを指定しているとき「aaa.php?data1=1234&data2=abc」となり、URL欄でどのようなデータが渡されてきたのか分かるという特徴があります |
<form action="xxx.php" method="POST" enctype="multipart/form-data">
action | どのページに送信するか指定します |
method | POSTまたはGETを指定します。GETを指定するとデータはURLに組み込まれて送信されます |
enctype | 送信時のMIMEタイプを指定できます(省略可能)。「enctype="multipart/form-data"」とするとファイルタイプで指定したファイルをサーバーに送信することができます |
<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>
<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>
<input type="text" name="kname" value="" size="40">
type="text" | テキストボックスのタイプを意味します |
name | 入力データの名前となります |
value | データ初期値です |
size | 入力フィールドの幅です |
maxlength | 最大入力文字数を指定します |
readonly | 読み出し専用にします |
disabled | この属性を指定すると、部品が無効化されます |
<input type="hidden" name="no" value="abc">
type="hidden" | 隠し文字列タイプを意味します |
name | 隠しデータの名前となります |
value | データ初期値です |
<input type="password" name="pw" value="">
type="password" | パスワードタイプを意味します |
name | パスワードデータの名前となります |
value | データ初期値です |
size | 入力フィールドの幅です |
maxlength | 最大入力文字数を指定します |
readonly | 読み出し専用にします |
disabled | この属性を指定すると、部品が無効化されます |
<textarea name="biko" cols="60" rows="10"></textarea>
name | 複数行の文字列データの名前となります |
cols | 列数です |
rows | 行数です |
readonly | 読み出し専用にします |
disabled | この属性を指定すると、部品が無効化されます |
<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>
name | セレクトデータの名前となります |
size | セレクトボックスの展開行数です |
readonly | 読み出し専用にします |
disabled | この属性を指定すると、部品が無効化されます |
label | 選択項目のラベルを指定します。 |
value | データ初期値です |
selected | セレクトデータの初期値になります |
<input type="radio" name="seibetsu" value="1">男性 <input type="radio" name="seibetsu" value="2">女性
type="radio" | ラジオボタンの入力タイプを意味します |
name | ラジオボタン選択データの名前となります(1つだけ選択したい場合は同じ名前にします) |
value | データの初期値です |
checked | 初期値として選択するラジオボタンにチェックを入れます | readonly | 読み出し専用にします(ラベルタグに指定することも可能) |
disabled | この属性を指定すると、部品が無効化されます(ラベルタグに指定することも可能) |
<input type="checkbox" name="flg" value="1">公開する
type="checkbox" | チェックボックスの入力タイプを意味します |
name | チェックボックス選択データの名前となります |
value | データの初期値です |
checked | 初期値として選択するチェックボックスにチェックを入れます | readonly | 読み出し専用にします(ラベルタグに指定することも可能) |
disabled | この属性を指定すると、部品が無効化されます(ラベルタグに指定することも可能) |
<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 | この属性を指定すると、部品が無効化されます |
<input type="image" src="" alt="" name="" width="" height="">
type="image" | イメージ付きボタンタイプを意味します |
src | ボタンに使用する画像のURIを指定 |
alt | 画像の代わりになるテキストを指定 |
name | 部品の名前を指定 |
width | ボタンの幅を指定 |
height | ボタンの高さを指定 |
align | 画像に並ぶテキストの位置を指定 |
<input type="submit" name="submit" value="登録する">
type="submit" | 送信ボタンタイプを意味します |
name | 送信ボタンデータの名前となります |
value | 送信ボタン上に表示される名前です |