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

form

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

input

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

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

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

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

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

option

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

textarea

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

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

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

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

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

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>