マークアップの定石：入力書式

formタグ、及びそれと主従関係にあるinput、select、textarea等の従タグは、ホームページ上に利用者からの反応を受け取るためのアンケート用紙のようなん入力書式を作成します。
formタグと従タグは利用者の入力の手間を省いたり、利用者の反応を整理された形で収集するため、入力書式の部品として働き、タグごと及びタグの属性値ごとに下記のような個別の役割を持っています。
主タグ 従タグ 属性 属性値 説明
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属性を組み合わせて行う。

入力書式サンプル

左図が入力書式の例ですが、このページを記述したHTMLソースを下記に示します。
HTMLソース
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!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行で始まり51行で終わるのがformタグによる入力フォームですが、入力項目を作り上げているタグは30行、35行、40行目のinputタグで、19行目のformタグで指定したデータの転送先にデータを送るのが46行目のinputタグで、47行目のinputタグは入力された内容をクリアします。 
19行　　<form name="form1" method="post" action="postmail.cgi">
入力書式の開始を指定しています。 formタグにはaction属性が必須で、データの送信先プログラムのURLが、method属性で指定されるデータ送信形式で送信されることを指定します。
ここではpost形式でデータをCGIで書かれたプログラムに渡しています。
データの送信形式にはpostとgetがあり、それぞれ次のような違いがありますが、省略された場合はget形式が適用されます。
POST形式　　書式データを本文として送信します。一度に大量のデータを送信することが出来るので、通常入力書式にはPOST形式が使われます。
GET形式　　 書式データを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”、“年齢”の属性値とします。
3 4 5

 

このサイトは個人生活を健やかに、愉しく、 企業活動を闊達にして、 持続可能な社会作りを目指します
Copyright © しなやか暮し研究所 2012 All Rights Reserved.