フォームのユーザビリティを向上させる
テキストフィールドの入力時、自動的に内容に合わせて日本語／英語入力モードが切り替えたり、次のフィールドへ自動移動させたり、二重送信を防止したり、フォームのユーザビリティーを向上させるテクニックを幾つかご紹介します。テキストフィールドへの入力時、自動的に日本語／英語モードが切り替わるようにしておくと、ビジターには大変親切なフォームとなります。Windows版IE5.0以上にしか対応しませんが、入力モードの切り替えは意外と簡単に行うことができます。コードビューを表示し、目的のテキストフィールドを選択して、下のようにStyle属性を追加するだけです。
↓
メンバーIDやシリアルナンバーなど、決まった文字数を入力するタイプのテキストフィールドがあります。こうしたフィールドの場合、指定の桁を入力後、次へ自動移動するようにしておくととても便利です。
コードビューを表示し、<head>〜</head>の間に以下のようなコードを入力します。既に<script>タグが定義されている場合は、赤字の部分だけを追加します。次に自動移動を行いたい各テキストフィールドを以下のように変更します。
↓
「member02」の部分が、移動先のテキストフィールド名、「5」の部分が最大文字数です。これで設定した最大文字数に達すると、指定したテキストフィールドにカーソルが自動移動するようになります。
フォームで最も多いトラブルが二重送信です。この二重送信もJAVA Scriptで簡単に防ぐことができます。
<head>〜</head>の間に以下のようなコードを入力します。次に<form>タグ内の記述を以下のように変更します。
