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

フォームのユーザビリティを向上させる

 

テキストフィールドの入力時、自動的に内容に合わせて日本語/英語入力モードが切り替えたり、次のフィールドへ自動移動させたり、二重送信を防止したり、フォームのユーザビリティーを向上させるテクニックを幾つかご紹介します。

■ 入力モードを自動で切り替える

テキストフィールドへの入力時、自動的に日本語/英語モードが切り替わるようにしておくと、ビジターには大変親切なフォームとなります。Windows版IE5.0以上にしか対応しませんが、入力モードの切り替えは意外と簡単に行うことができます。コードビューを表示し、目的のテキストフィールドを選択して、下のようにStyle属性を追加するだけです。

      ↓ 

■ 次フィールドへの自動移動

メンバーIDやシリアルナンバーなど、決まった文字数を入力するタイプのテキストフィールドがあります。こうしたフィールドの場合、指定の桁を入力後、次へ自動移動するようにしておくととても便利です。
コードビューを表示し、<head>〜</head>の間に以下のようなコードを入力します。既に<script>タグが定義されている場合は、赤字の部分だけを追加します。

次に自動移動を行いたい各テキストフィールドを以下のように変更します。

      ↓ 

「member02」の部分が、移動先のテキストフィールド名、「5」の部分が最大文字数です。これで設定した最大文字数に達すると、指定したテキストフィールドにカーソルが自動移動するようになります。

■ 二重送信を防止する

フォームで最も多いトラブルが二重送信です。この二重送信もJAVA Scriptで簡単に防ぐことができます。
<head>〜</head>の間に以下のようなコードを入力します。

次に<form>タグ内の記述を以下のように変更します。

■ 作例


お名前
E-mail
ご職業
メンバーID - - -
ご意見


 

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