フォームの構成

<form action="hogehoge.cgi"> <div><input id="from" id="from" type="hidden" value="アンケートフォームより" /></div> <fieldset> <legend>貴方のIDとパスワード</legend> <label for="id" accesskey="i">ID(I)</label><br /> <input id="id" type="text" size="8" value="ABC" tabindex="8" /><br /> <label for="password" accesskey="p">パスワード(P)</label><br /> <input id="password" type="password" size="8" maxlength="8" tabindex="9" /><br /> <label for="file" accesskey="f">添付ファイル(F)</label><br /> <input id="file" type="file" accept="text/plain" tabindex="10" /><br /> <label for="member" accesskey="m">会員種別(M)</label><br /> <select id="member" tabindex="11"> <optgroup label="adult"> <option value="gold" selected="selected">ゴールド会員</option> <option value="normal">レギュラー会員</option> </optgroup> <optgroup label="student"> <option value="student">ステューデント会員</option> </optgroup> </select> </fieldset> <fieldset> <legend>このウェブサイトについて</legend> 評価(V)<br /> <label accesskey="v"> <input id="value" type="radio" value="good" checked="checked" tabindex="12" />良い </label><br /> <label accesskey="v"> <input id="value" type="radio" value="bad" tabindex="13" />悪い </label><br /> 気に入ったコンテンツ(L)<br /> <label accesskey="l"> <input id="like" type="checkbox" value="contents1" tabindex="14" />コンテンツ1 </label><br /> <label accesskey="l"> <input id="like" type="checkbox" value="contents2" tabindex="15" />コンテンツ2 </label><br /> <label for="comment" accesskey="c">感想(C)</label><br /> <textarea id="comment" rows="4" cols="60" tabindex="16"> ここに感想を書いて下さい. </textarea> </fieldset> <div> <input type="submit" value="送信(S)" accesskey="s" tabindex="17" /> <input type="reset" value="リセット(R)" accesskey="r" tabindex="18" /> </div> </form>

出力結果は以下です.

貴方のIDとパスワード






このウェブサイトについて 評価(V)


気に入ったコンテンツ(L)



フォームを作るときはform要素を使います.action属性では,フォームの内容が渡されるURIを指定します.これはCGIプログラムやメールアドレスが対象で,指定が必須です.method属性はgetpostを指定します.既定値はgetです.action属性で指定されたURIに対してどのように働きかけるのかを指定します.enctype属性はmethod属性でgetが指定されたとき,フォームのデータをどのタイプで渡すのか指定します.既定値は application/x-www-urlencoded です.accept-charset属性はフォームに対して,どの文字コードセットで受け入れるか指定します.これらの属性の指定方法は,利用するCGIのマニュアルで指定されることが多いです.

次に,input要素を用いたフォームコントロールの生成について説明します.input要素のtype属性に値を指定することで,色々なフォームコントロールを生成できます.

テキストボックス

type属性にtextを指定すると,1行分のテキストボックスを生成します.id属性の指定は必須で,フォームのデータを受け渡すときに使われます.同一フォーム内に同じ名前が2つ以上あってはいけません.

value属性でテキストボックスの初期値を設定します.なお,UAによっては,正しく処理されない場合があるため,何らかの初期値を与えることが推奨されています.size属性はテキストボックスの大きさを何文字分にするか指定します.maxlength属性で,テキストボックスに入力できる最大文字数を設定します.

テキストボックス(パスワード)

type属性にpasswordを指定すると,パスワード入力用の1行分のテキストボックスを生成します.指定できる属性はテキストボックスと同じです.このテキストボックスでは,入力した文字が伏せ字で表示されます.

ファイルセレクト

type属性にfileを指定すると,フォームデータとしてファイルをアップロードするコントロールを生成します.

id属性の指定は必須で,フォームのデータを受け渡すときに使われます.同一フォーム内に同じ名前が2つ以上あってはいけません.value属性で初期値を設定します.accept属性で,受け入れるファイルのMIMEタイプのリストを与えます.

ラジオボタン

type属性にradioを指定すると,ラジオボタンを生成します.

id属性の指定は必須で,フォームのデータを受け渡すときに使われます.1つの質問に対する回答群に対して,同じ名前を指定します.value属性も必須で,ラジオボタンが選択されている場合,データの受け渡しに使われます.checked属性でcheckedと指定すると,初期状態でチェックが入ります.

チェックボックス

type属性にcheckboxを指定すると,チェックボックスを生成します.

id属性の指定は必須で,フォームのデータを受け渡すときに使われます.基本的に,1つの質問に対する回答群に対して,同じ名前を指定します.value属性も必須で,チェックボックスが選択されている場合,データの受け渡しに使われます.checked属性でcheckedと指定すると,初期状態でチェックが入ります.

プッシュボタン

type属性にbuttonを指定すると,プッシュボタンを生成します.JavaScript等をからませて使用します.

id属性の指定は必須で,どのボタンが押されたか識別します.同一フォーム内に同じ名前が2つ以上あってはいけません.value属性で,ボタンに書かれる文字列を指定します.

承諾ボタンとリセットボタン

type属性にsubmitを指定すると,承諾ボタンを生成します.検索フォームの「検索」ボタン等,form要素のaction属性に指定されたURIに,フォームのデータを渡すときに使われます.1つのフォームに複数の承諾ボタンがあっても構いません.どのボタンが押されたかはid属性で識別します.

また,type属性にresetを指定すると,リセットボタンを生成します.このボタンを押すと,そのフォームに入力された全てのデータをリセットします.ただし,押してしまうと確認なしでデータがリセットされてしまうため,設置が本当に考えるようにしましょう.

それぞれのボタンには,ボタンに書かれる文字列を指定するvalue属性があります.

イメージコントロール

type属性にimageを指定すると,画像が承諾ボタンの役割を果たします.

id属性の指定は必須で,どの画像が押されたか識別します.同一フォーム内に同じ名前が2つ以上あってはいけません.src属性とalt属性の指定は必須で,img要素と同じ内容です.usemap属性を指定した場合は,クリッカブルマップになります.

このコントロールでは,クリックされた画像のx座標とy座標が,フォームのaction属性で指定したURIに渡されます.

見えないコントロール

type属性にhiddenを指定すると,見えないコントロールを生成します.内容は表示されず,書き換えることもできません.

id属性の指定は必須で,フォームのデータを受け渡すときに使われます.同一フォーム内に同じ名前が2つ以上あってはいけません.value属性の指定も必須で,受け渡すデータの内容を指定します.

textarea要素は,複数行の入力ができるテキストボックスの生成に使用します.id属性でフォームにおける一意性を保証する名前を指定します.同一フォーム内に同じ名前が2つ以上あってはいけません.rows属性とcols属性は必須で,それぞれテキストボックスの行数と桁数を指定します.なお,初期値は要素の中に書きますが,初期値が空だと,UAによっては正しく処理されない場合があります.何らかの初期値を与えることが推奨されます.

リストボックスやドロップダウンリストを生成するには,select要素,option要素,optgroup要素を組み合わせて使用します.

select要素は,id属性で,フォームの中で一意性を保証する名前を指定します.同一フォーム内に同じ名前が2つ以上あってはいけません.size属性は,コントロールがリストボックスとして表示されるとき,その行数を指定します.また,multiple属性にmultipleと指定すると,複数の選択を許可します.select要素がul要素だとすれば,li要素にあたるのがoption要素です.selected属性でselectedと指定すると,その項目をはじめから選択済みにします.value属性は,項目が選択されたときに,フォームデータとして渡される値の初期値を指定します.省略するとoption要素の中に書かれた文字列の内容が渡されます.

option要素のグループ化には,optgroup要素を用います.label属性は必須で,その項目のグループの表題を指定します.

label要素は,コントロールに対する説明を表すもので,関連づけといいます.2つの方法があり,1つはfor属性を指定し,関連づけるコントロールにid属性を指定して,それぞれに同じ名前をつけます.もう1つは,label要素の中にコントロールの要素を書く方法です.また,accesskey属性に1文字のアルファベットを指定すると,altキーと指定された文字キーを押すことで,関連づけたコントロールにフォーカスを与えることができます.

fieldset要素は,複数のフォームコントロールをグループ化するために使います.また,必ずlegend要素を直下に記述し,グループの表題を指定します.

button要素

<form action="hogehoge.cgi"> <div><button id="hogehoge" type="button">サンプルボタン</button></div> </form>

出力結果は以下です.

button要素を使うと,ボタンの内容を自由にデザインできます.id属性で,フォームの中で一意を保証する名前を指定します.また,value属性で,押されたときに渡す値を指定できます.type属性でボタンの役割を変えられます.submitを指定すると承諾ボタン,resetを指定するとリセットボタン,buttonを指定すると単なるボタンとして機能します.

ボタンの中に画像や文字列を入れることができます.button要素内にその内容を記述します.

フォームコントロールの無効化

button要素,input要素,optgroup要素,option要素,select要素,textarea要素には,コントロールを無効化するdisabled属性とreadonly属性を指定できます.

disabled属性にdisabledと指定すると,フォームコントロールを無効化します.また,そのコントロールに関するデータも送られません.一方,readonly属性にreadonlyと指定すると,フォームコントロールは無効化しますが,データは送られます.