主タグ | 従タグ | 属性 | 属性値 | 説明 |
form | form | 入力・送信フォームを作成する際に使用 | ||
action | URL | 送信先プログラムのURLを指定(必須) | ||
method | HTTPメソッド | 送信の際の転送方法(HTTPメソッド)を指定 | ||
name | 文字列 | スクリプト言語などから参照できるよう名前を指定 | ||
input | input | フォームを構成するテキスト入力欄や実行ボタン等の部品を作成 | ||
type | submit | フォームの内容を最終的に送信する送信ボタンの設置 | ||
reset | フォームに書かれた内容をリセット(初期の状態に戻す。多くは空欄)するボタンを設置 | |||
button | 汎用性のあるボタンを設置 value属性によりボタンに表示するラベル(文字)を指定 | |||
radio | 複数の項目から一つの項目を選ぶラジオボタンの設置 | |||
checkbox | 複数の項目から1つ以上の項目を選択するチェックボックスの設置 同じチェックボックスの構成部品は同じname属性名を持つ |
|||
type | 1行の文字列入力欄を設置 size属性は半角文字数 maxlength属性は半角、全角を問わず最大文字数 |
|||
password | 入力欄に記入された文字は隠されて入力文字が分からない事以外は、text入力と同じ | |||
file | ファイルをサーバーなどにアップロードする場合、このボタンを押すとファイルを開く画面が出る。ファイルを選択すると保存されているローカルファイルへのパスが入力欄に表示される。 | |||
image | 送信ボタン自体を画像にする | |||
hidden | 隠された部品を作成 | |||
name | 文字列 | フォーム部品の名前を指定 value属性の値とセットで送信 | ||
value | 文字列 | データとして送信される文字列を指定 | ||
select | select | 複数の項目から1つの項目を選ぶためのプルダウンメニューを設置 | ||
option | option | プルダウンメニュー内の項目の設定 | ||
textarea | textarea | 複数行テキストの入力欄 | ||
rows | 行数(文字) | 入力欄の行数(縦の長さ)を半角数字で指定 | ||
cols | 列数(文字) | 入力欄の横幅を半角数字で指定 |
ボタンのサイズを変える
inputタグのサイズはタグ属性ではなく、スタイル指定でborderとcell属性を組み合わせて行う。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>入力書式サンプル</title> </head> <body> <table width="530" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <table id="main" width="530" border="0" cellspacing="0" cellpadding="0"> <tr> <td><h2>応募フォーム</h2></td> </tr> <tr> <td> <div id="rc02" align="left"> <form name="form1" method="post" action="postmail.cgi"> <input type="hidden" name="reception" value="関口" /> <input type="hidden" name="email_from" value="form@koushuu-sangyou.com" /> <input type="hidden" name="email_to" value="sekiguchi@koushuu-sangyou.com" /> <input type="hidden" name="return_to" value="./postmail.html" /> <input type="hidden" name="subject" value="3" /> <input type="hidden" name="need" value="氏名" /> <table width="520" border="0" cellpadding="5" cellspacing="0"> <tr> <th width="130" align="left" bgcolor="#EFEFF2" scope="row"><strong>氏名 ※</strong></th> <td width="390"> <input name="氏名" type="text" value="関口" size="30"></td> </tr> <tr> <th width="130" align="left" bgcolor="#EFEFF2" scope="row"><strong>Eメール</strong></th> <td width="390"> <input type="text" name="email" size="30"></td> </tr> <tr> <th align="left" bgcolor="#EFEFF2" scope="row">年齢</th> <td> <input name="年齢" type="text" size="5">歳</td> </tr> </table> <table class="no" style="text-align : center;"> <tr align="center" class="td_02"> <td class="no" colspan="2"> <input type="submit" value="送信"> <input type="reset" value="リセット"> </td> </tr> </table> </form> </div> </td> </tr> </table> </td> </tr> </table> </body> </html>
19行 <form name="form1" method="post" action="postmail.cgi">入力書式の開始を指定しています。 formタグにはaction属性が必須で、データの送信先プログラムのURLが、method属性で指定されるデータ送信形式で送信されることを指定します。
書式データをURLの末尾に追加して送信します。送信できるデータ量に制限がありますが、制限内であれば送信を効率よく行えるので、検索エンジンでのデータ受渡しにはGET形式が使われているようです。
30行 <input name="氏名" type="text" value="関口" size="30">初期値を関口として設定した一行の文字列入力欄の内容を“氏名”という属性名の属性値とします。
35行 <input type="text" name="email" size="30"> 40行 <input name="年齢" type="text" size="5">初期値が空の一行の文字列入力欄の内容をそれぞれ“email”、“年齢”の属性値とします。