■ フォームモジュール要素サンプル

form

フォームを設定するための要素です。この要素はブロックレベル要素ですが、この中に各コントロールを直接配置することができません。必ず何らかのブロックレベル要素を記述してその中で配置しなければなりません。

input

ユーザからの入力領域を設定する要素です。基本的には、以下のタイプが用意されています。

属性	機能
text	１行のテキストフィールドを設定します。
radio	丸いボタンを設定します。ユーザが選択できるのは１つだけです。
checkbox	チェックボックスを設定します。複数の選択が可能なボタンです。
password	パスワード入力用。「＊あるいは・」などに置換えて表示します。
submit	送信ボタンの設定。フォーム内容を送信する際に必要です。
reset	フォーム内容を取消して初期状態に戻すリセットボタン。
file	送信するファイルを選択します。（添付ファイルとして使います）
button	汎用ボタン。value属性で設定された値がボタンに表示されます。
image	ボタンを画像で使用する場合に使います。

label

コントロールにラベル（キャプション）を設定する要素です。

基本的に、１つのコントロールに対してのみ設定しますので、複数には適応しません。

select

メニューコントロールを設定する要素です。

option要素で指定されたメニューを選ぶことができるコントロールです。

option

select要素によって設定されたメニューの項目を記述する要素です。

textarea

ユーザが入力するテキスト領域を設定する要素です。

button

汎用的なボタンを設定するとうそです。

ボタンには value属性によって任意に名前をつけることができます。

fieldset

フォーム内のコントロールをグループ化する要素です。

この要素は、１つのフォームに複数設定することが可能です。

legend

fieldset要素によってグループ化したコントロール群のラベルを設定する要素です。

optgroup

select要素によって設定された各メニュー項目をグループ化します。

まだ、この機能を実現しているブラウザは少ないようです。

ここでは、簡単なフォームのサンプルを掲載しています。


HTMLサンプル：
<form action="mailto:banban@scollabo.com" enctype="text/plain" method="post">
<fieldset>
<legend>フォームのサンプル</legend>
<p><label>メールアドレス：
<input type="text" name="メールアドレス" value="" tabindex="0" accesskey="a" />
</label>

<label>お名前：
<input type="text" name="名前" value="" tabindex="1" accesskey="b" />
</label></p>

<p>性別：
<input type="radio" name="sex" value="man" tabindex="2" accesskey="c" />男性
<input type="radio" name="sex" value="woman" tabindex="3" accesskey="d" />女性
<br />

職業：
<input type="checkbox" name="job" value="Student" tabindex="4" accesskey="e" />学生
<input type="checkbox" name="job" value="worker" tabindex="5" accesskey="f" />会社員
<input type="checkbox" name="job" value="official" tabindex="6" accesskey="g" />公務員
<input type="checkbox" name="job" value="etc" tabindex="7" accesskey="h" />その他
</p>

<p>年代：<select name="age" tabindex="8">
<option value="10ages">10代</option><option value="20ages">20代</option>
<option value="30ages">30代</option><option value="40ages">40代</option>
<option value="50ages">50代</option><option value="60ages">60代</option>
<option value="age" selected="selected">お選びください</option>
</select></p>

<p><label>お問合せ<br />
<textarea name="title" rows="5" cols="60" tabindex="9" accesskey="i">
コメントをお書きください。
</textarea>
</label></p>

<p>
<input type="reset" value="送信" tabindex="10" accesskey="s" />
<input type="reset" value="取消" tabindex="11" accesskey="r" />
</p>
</fieldset>
</form>