Webデザインには、あなたの知らない「落とし穴」がたくさん。大きなものから小さなものまで、それが及ぼす影響はさまざまだ。カンペキだと思っているあなたのサイトも、実はすでに暗い穴の中かも・・・。
| |
 |
 |
ユーザビリティの低いフォームの落とし穴 |
 |
現在のインターネット社会では、オンラインショッピングや懸賞の応募画面、会員登録などフォームを使う機会は多岐にわたる。サイト管理者はフォームの使いにくさによるユーザーのサイト離れを引き起こさないために、フォームのユーザビリティを向上させる努力が必要だ。
たとえばテキストフィールドへの入力時、自動で日本語／英語モードが切り替わるようにしておくと、ユーザーにはとても親切なフォームとなるだろう。実装の仕方としてはテキストフィールドのコードの部分にstyle属性を追加するだけでよい（Windows版IE5.0以上のみ対応）【1】【2】【3】。
また、IDなど決まった文字数を入力させるテキストフィールドがあるが、このフィールドに対して指定の桁を入力した後、次のフィールドへ自動で移動させることもできる。＜head＞～＜/head＞内に【4】を記述し、＜input＞タグ内にonKeyUp以下の記述を追加する【5】。移動先のフィールド名が'test02'に当たり、最大文字数が10に当たる部分である。
さらに、フォームのトラブルとしてもっとも多い二重送信を解決させたい。この二重送信を防ぐためにサイト管理者側が対策を行う必要がある。この実装の仕方としては、まず＜head＞～＜/head＞内にyのコードを記述する。「二重送信です。」の部分が二重送信しようとした場合の警告文なので自由に変更できる。それから、＜form＞タグ内にonSubmit以下の記述を追加する【7】。
| ＜imput name="name" type="text" id="name" size="100"＞ |
【1】基本のコード。これにstyle属性を追加し、入力モードを自動で切り替える
| |
＜imput name="name" type="text" id="name" size="100" style="ime-mode:active"＞ |
【2】日本語入力モードに切り替え
| |
＜imput name="name" type="text" id="name" size="100" style="ime-mode:inactive"＞ |
【3】英語入力モードに切り替え
| |
＜script language="JavaScript" type="text/JavaScript"＞ ＜!-- function chkInput(i, n, max){ if (i.value.length >= mac){ i.firm.elements[n].focus(); } } //--＞ ＜/script＞ |
【4】次フィールドへ自動に移動させる方法。＜head＞～＜/head＞内に記述する
| |
＜input name=" test02" type="text" id=" test01" size="10" maxlength="10" onKeyUp="chkInput(this, 'test02', 10)" ＞ |
【5】自動移動を行いたいテキストフィールドをこのように変更する
| |
＜script language="JavaScript" type="text/JavaScript"＞ ＜!-- flag=false; function send(){ if (flag){alart("二重送信です。"); return false;} flag=true; return true; } //--＞ ＜/script＞ |
【6】二重送信を防止する方法。＜head＞～＜/head＞内に記述
| |
＜form action="mailto:xxx@xxx.co.jp" method="post" name="form1" onSubmit="return send()"＞ |
【7】続いて＜form＞内にonSubmit以下の記述を追加
解説：横山 剛
（※本文中、及びキャプション内で使用している「＜」、「＞」は、全角になります。ご注意ください。）
