Section 2 : フォーム(2)

 多数の入力をする必要があるフォームは,関連する項目をまとめておくと入力しやすい。また,フォームを補助するためにスクリプトを用いることも,アクセシビリティの向上に役立つ。

<FIELDSET> と <LEGEND>

 複数のフォームコントロールや,ラベルをまとめる要素として用意されているのが

<FIELDSET>...</FIELDSET>

である。簡単に言うとフォームコントロール用の <DIV>,Windows や MacOS で設定などに使われるダイアログボックスで,いくつかの項目をくくっているフレームと呼ばれるオブジェクトのようなものである。

 ただ,<DIV> と異なるのは開始タグの直後に表題の要素

<LEGEND>...</LEGEND>

を必ずとることである。

 <FIELDSET> の内容としては直後に <LEGEND>,そのあとはブロック要素,インライン要素を自由にとることができる。いっぽう,<LEGEND> はインライン要素をその内容とする。<LEGEND> はフォームコントロールのグループへのアクセスキーとなる ACCESSKEY 属性を持つ。

<FIELDSET>
  <LEGEND>
あなたのプロフィール</LEGEND>
  お名前: <INPUT TYPE="text" NAME="name" SIZE="40"><BR>
  メールアドレス: <INPUT TYPE="text" NAME="mail" SIZE="50">
</FIELDSET>
<FIELDSET>
  <LEGEND>
HTML について</LEGEND>
  HTML をはじめてどれくらいたちますか:<BR>
  <INPUT TYPE="radio" NAME="carrier" VALUE="1m"> 1 か月未満
  <INPUT TYPE="radio" NAME="carrier" VALUE="6m"> 6 か月未満
  <INPUT TYPE="radio" NAME="carrier" VALUE="over6"> 6 か月以上 <BR>
  Academic HTML はよく利用されますか:<BR>
  <INPUT TYPE="radio" NAME="freq" VALUE="first"> はじめて
  <INPUT TYPE="radio" NAME="freq" VALUE="sometime"> ときどき
  <INPUT TYPE="radio" NAME="freq" VALUE="often"> ひんぱんに
  <INPUT TYPE="radio" NAME="freq" VALUE="always"> いつも<BR>
  ご意見,ご感想があればお聞かせください:
  <TEXTAREA NAME="comment" COLS="50" ROWS="5"></TEXTAREA>
</FIELDSET>

あなたのプロフィール お名前:
メールアドレス:
HTML について HTML をはじめてどれくらいたちますか:
1 か月未満 6 か月未満 6 か月以上
Academic HTML はよく利用されますか:
はじめて ときどき ひんぱんに いつも
ご意見,ご感想があればお聞かせください:

 フォームコントロールのグループ化は,アクセシビリティの向上に大いに役立つ。フォームの構造がよくわかり,何を求められているかが明確になる。

フォームとスクリプト

 フォームのアクセシビリティを向上させる手段として,スクリプトを利用することがある。ここでは,具体的な例は示さず,ヒントを述べるにとどめる。また,スクリプトに対応していない UA のことも考慮して,スクリプトのみに頼らず,データが渡される CGI プログラムの側でも,スクリプトによってコントロールされないデータが来てもよいような準備はしておくべきである。

 まず,初期値が時と場合によって異なるとき。たとえば,日付の入力を要求する場合に,初期値として当日の日付を入力しておくとよいことがある。このようなときは,<BODY> の onLoad イベント属性にフォームコントロールの初期値を設定するようなスクリプトを書けばよい。

 いくつかのコントロールが連動して値が変化するとき。onChange,onBlur イベント属性でコントロールの内容を監視して別のコントロールの内容を書き換えていく。

 選択によってコントロールを有効としたり,無効としたりするとき。チェックボックスやラジオボタンを onChange イベント属性で監視し,対象とするコントロールの DISABLED 属性を書き換えていく。DISABLE,READONLY 属性は,この方法でしかダイナミックに書き換えることはできない。

 TYPE="button"<INPUT><BUTTON> に対して。これらのボタンはとくに定められた動作がないので,onClick イベント属性に処理を書き込む。

 フォームが送信要求され,アクションが起きる前に,記入された事項が有効なものかどうかを確認する。これをクライアントサイドスクリプトで行っておくことは,CGI プログラムを呼んで無効のメッセージを返すよりも手間がかからないという利点がある。当然,CGI プログラムの側でも,無効なデータを処理してトラブルが起こらないようにしておかなくてはならない。