Dreamweaver TechniqueJAVA Script サンプル | CSS sample | JAVA Applet sample | Flash Sample
HTML4.0 riference | DynamicHTMLXHTML | XML sample | XSLT sample | RIKO's ASP Trial

入力フィールド間の移動を容易にする

入力フィールドにタブインデックスを設定しておくと、【TAB】キーが押された時に、どのような順で、入力カーソルを移動させるかを決めることができます。ここでは、タブインデックスを設定して入力フィールド間の移動を容易にする方法を考えてみましょう。

■ ページ読み込み時の処理

ページ読み込み時に「姓」の入力フィールドにフォーカスをあてる(入力カーソルを置く)ための処理を記述します。

<BODY
ONLOAD="document.Form1.lastname.focus();">

■ フォーカスの移動順序の定義

フォーム上の各入力フィールドに対して、フォーカスをどのような順で移動させるかを決めるためのタブインデックスを定義します。

<TABLE BGCOLOR="#ccffff" BORDER=3>
<TR>
<TD>名前</TD>
<TD>姓<INPUT CLASS="textbox" TYPE="text"
SIZE="17" NAME="lastname" TABINDEX="1">
名<INPUT CLASS="textbox" TYPE="text"
SIZE="17" NAME="firstname" TABINDEX="2">
ミドルネーム<INPUT CLASS="textbox" TYPE="text"
SIZE="10" NAME="middlename" TABINDEX="-1"></TD>
</TR>
<TR>
<TD>メール</TD>
<TD><INPUT CLASS="textbox" TYPE="text"
SIZE="40" NAME="email" TABINDEX="3">
</TD>
</TR>
<TR>
<TD>質問内容</TD>
<TD><TEXTAREA CLASS="textbox"
NAME="question" ROWS="4" COLS="60"
TABINDEX="4"></TEXTAREA></TD>
</TR>
</TABLE>

■ 「focus」メソッド

特定の入力フィールドにフォーカスをあてるには、「focus」メソッドを使用します。
例tでは、ページの読み込み時に「姓」の入力フィールドに自動的にフォーカスが設定されるようになっています。通常、読み込まれたページは、どの入力フィールドにもフォーカスがあたっていない状態で表示されます。この場合、訪問者が入力を開始するには、いずれかの入力フィールドをクリックしなければなりません。例のように、最初の入力フィールドにフォーカスを設定しておくと、訪問者の手間を軽減することができます。

■ 「TABINDEX」プロパティ

【TAB】キーを押した時に、どのような順番でフォーカスを移動させるかは、「TABINDEX」プロパティで指定することができます。「TABINDEX」プロパティでフォーカスの順序を指定する際は、「TABINDEX="1"」のように、1から始まる番号で指定します
「TABINDEX="-1”」と指定すると、その入力フィールドにフォーカスがあたらないようにすることができます。
例では、「ミドルネーム」と「クリア」は飛ばして、「姓」→「名」→「メール」→「質問内容」→「送信ボタン」の順でフォーカスが移動するように設定しています。

<<<戻る

R HOUSE | RIKO's Trial Page | Shirley's Pettit Case | Shirley's i-box | Shirley's little box