Always with HTML でフォームの基本を扱ったが,ここではフォームコントロールを構造化する方法を中心に解説する。
フォームコントロールには,ボタンのようにそれ自身に役割を示唆する記述がされているものもあるが,多くのコントロールはそうではない。フォームコントロールの役割を“ラベル”というかたちで示すのが
<LABEL>...</LABEL>
内容としてとれるのは <LABEL> を除くインライン要素である。
<LABEL> の役割は,1 つのフォームコントロールと結びついて,そのコントロールに対してのキャプションのような情報を与えることである。
おもな属性は,次のとおり。
属性 | 値 | 解説 |
---|---|---|
FOR | ID | そのラベルに関連づけられるフォームコントロールの ID。 |
ACCESSKEY | 文字 | ラベル(に関連づけられたフォームコントロール)へのアクセスキー。 |
onFocus | スクリプト | フォーカスを得たときに実行されるスクリプト。 |
onBlur | スクリプト | フォーカスを失ったときに実行されるスクリプト。 |
ラベルはフォーカスを得うるが,そのフォーカスはただちに関連づけられたフォームコントロールに渡される。たとえば,ラベルの部分をクリックすると,関連づけられたコントロールがフォーカスを得たりするだろう。
この <LABEL> は,2 つの方法のいずれかでフォームコントロールとの関連づけを行う。ひとつは,FOR 属性を用いる方法,もうひとつは,関連づけたいフォームコントロールを <LABEL> の下位要素とすることである。
まず,FOR 属性を使う場合は,ID を指定する必要があるから,関連づけられるフォームコントロールに ID 属性が指定されていなくてはならない。
<P><LABEL FOR="txName" ACCESSKEY="m">お名前(M)</LABEL><BR>
<INPUT ID="txName" NAME="name" TYPE="text" SIZE="40"><BR>
<LABEL FOR="txAddr" ACCESSKEY="a">ご住所(A)</LABEL><BR>
<INPUT ID="txAddr" NAME="addr" TYPE="text" SIZE="60"><BR>
<LABEL FOR="txMail" ACCESSKEY="e">メールアドレス(E)</LABEL><BR>
<INPUT ID="txMail" NAME="mail" TYPE="text" SIZE="50"></P>
この方法では,ラベルとフォームコントロールとが離れていても構わない。たとえば,異なるブロック要素の下位要素となっていてもよい。フォームを表形式で(<TABLE> を用いて)組み立てたとき,ラベルがあるセルと,フォームコントロールがあるセルとが異なっていても構わないということにもなる。
また,2 つ以上のラベルが,同一のフォームコントロールに関連づけられていても構わない。
いっぽう,フォームコントロールを <LABEL> の下位要素とする場合は,下位要素とするフォームコントロールはただ 1 つに限られる。
このときは,必ずラベル(のテキスト)とフォームコントロールは直近になる。前述のような,表の別々のセルにラベルとコントロールを配置するということはできない。
<P>Academic HTML 3.2 をご利用になったことはありますか<BR>
<LABEL><INPUT TYPE="radio" NAME="ach32" VALUE="yes" CHECKED> はい</LABEL><BR>
<LABEL><INPUT TYPE="radio" NAME="ach32" VALUE="no"> いいえ</LABEL></P>
<P>Academic HTML 3.2 WinHelp Edition はダウンロードされましたか<BR>
<LABEL><INPUT TYPE="radio" NAME="achdl" VALUE="yes" CHECKED> はい</LABEL><BR>
<LABEL><INPUT TYPE="radio" NAME="achdl" VALUE="no"> いいえ</LABEL></P>
いずれの場合においても,1 つのラベルに関連づけられるフォームコントロールはただ 1 つであることに注意されたい。