1. 入力内容をその場で確認

ユーザの入力をリアルタイムに確認し、内容に問題があれば「その場で」案内を表示できると便利です。

フォームの入力内容をリアルタイムにチェックする方法

フォームへの入力文字列や選択項目が、指定の条件に合致しているかどうかをリアルタイムに調べられるJavaScript「jQuery-Validation-Engine」の使い方をご紹介。その場でバルーン型のエラーメッセージを表示できるので、いちいち送信する手間が省け、使いやすくて便利な入力フォームが作れます。

出典: フォームの入力内容をリアルタイムにチェックする方法 [ホームページ作成] All About

2. 郵便番号から住所を自動補完

住所の記入を求めるなら、郵便番号の入力だけで住所が自動で入力(補完)される仕組みを用意しておくと便利です。

郵便番号からの住所自動入力機能を設置する方法

郵便番号を入力するだけで、該当する住所が自動入力(補完)される仕組みを、自サイト内に設置する方法を解説。jQueryプラグイン「jquery.jpostal.js」を使えば、とても簡単に「郵便番号からの住所自動入力機能」を自身のウェブページに加えられます。住所が自動入力できると、手間が省けるだけでなく、入力ミスも防げて便利です。

出典: 郵便番号からの住所自動入力機能を設置する方法 [ホームページ作成] All About

3. スマートフォンからでも使いやすいフォームに

スマートフォンやタブレットでは、画面上のキーボード(ソフトウェアキーボード)を使って入力しなければなりません。入力して欲しい内容に応じてキー配列を調整した「入力しやすい形態」のキーボードを表示できると便利です。

スマートフォンでも使いやすいテキスト入力欄を作る

テキスト入力欄を、PC用ブラウザだけでなく、スマートフォンやタブレット端末でも使いやすくしてみましょう。既存のページを大きく改修することなく、簡単に実現できる方法をご紹介。

出典: スマートフォンでも使いやすいテキスト入力欄を作る [ホームページ作成] All About

4. 入力欄の役割を分かりやすいアイコンで示す

何を入力するための項目なのかを、入力欄の内側にアイコンで掲載しておくと、分かりやすくなります。

テキスト入力欄の内側にアイコンを表示する

無味乾燥なテキスト入力フォームの内側左端にアイコンを表示させてみましょう。検索用の入力欄なら虫眼鏡などの「検索機能」を示すアイコンを表示させることで、役割が分かりやすいテキスト入力フォームになります。

出典: テキスト入力欄の内側にアイコンを表示する [ホームページ作成] All About

5. ボタンにもアイコンを加える

ボタンが複数ある場合は、どのボタンを押せば良いのかが判断しにくい場合があります。ボタンの表面にアイコンを表示することで、ボタンの役割を分かりやすくしてみましょう。

フォームのボタンにアイコンや装飾を加える

入力フォームなどに配置する「ボタン」の表面には、単純にテキスト(文字列)しか表示できないわけではありません。任意のアイコンを表示させたり、色や書体を指定して自由に装飾した文字を表示させることもできます。

出典: フォームのボタンにアイコンや装飾を加える [ホームページ作成] All About

6. 文字数をその場でカウントする

入力文字数に制限がある場合や、長文の入力を求める場面では、「今、何文字書いたのか」または「あと何文字書けるのか」をリアルタイムに表示しておくと便利です。

テキスト入力欄の文字数をリアルタイム表示

テキスト入力欄にユーザが何かを入力する際に、現在の入力文字数をリアルタイムに表示するようにしてみましょう。入力文字数に制限のある入力欄などで活用すると便利です。入力可能な残り文字数の表示もできます。

出典: テキスト入力欄の文字数をリアルタイム表示 [ホームページ作成] All About

7. 何も入力されていないテキスト入力欄に案内を掲載する

入力欄の内側に「入力して欲しい内容に関する補足的な情報」を掲載しておくと、ユーザに対して「何の記入が求められているのか」が伝わりやすくなるでしょう。

未記入の入力フォームに案内画像を表示する

入力フォーム内に何も入力されていないとき、フォームの内側に案内用の画像が表示されるようにしてみましょう。入力欄にカーソルが入ったら案内画像は消えるようにします。文字だけよりも凝ったデザインにできます。

出典: 未記入の入力フォームに案内画像を表示する [ホームページ作成] All About

8. ブラウザの自動補完機能を有効に活用する

たいていのブラウザには、過去に入力した内容を「入力候補」として自動表示する機能があります。その機能を有効に活用できる入力欄の作り方があります。

他サイトでの入力履歴を出せる入力欄を作る

入力フォーム内の項目には、「名前」や「メールアドレス」など他サイトでも頻繁に入力していると思われる項目がたくさんある場合があります。他サイトでの入力履歴を利用して補完できるように作っておくと便利です。

出典: 他サイトでの入力履歴を出せる入力欄を作る [ホームページ作成] All About

9. 重複送信を防止する

同じ内容を何度も送信してしまうのを防ぎたい場合は、1回しか押せないボタンを用意しておくと便利です。

1回クリックすると無効になるボタンを作る

BBSの投稿ボタンやメッセージの送信ボタンなどは、複数回クリックされると同じ内容を何度も送信してしまいます。1回クリックすると無効状態に変化する送信ボタンを用意して、重複送信を防ぐ方法をご紹介。

出典: 1回クリックすると無効になるボタンを作る [ホームページ作成] All About

10. リセットボタンは不要では?

入力フォームを作るinput要素では、すべての入力を消す「リセットボタン」も作成可能です。しかし、リセットボタンには大きなデメリットがあります。その理由を押さえておき、本当に掲載が必要かどうかを確認してみて下さい。

フォーム上のリセットボタンはデメリット大

入力フォームには、送信ボタンのほかにリセットボタンを配置することができます。しかし、このリセットボタンは、配置しない方が望ましい『デメリットの大きな』機能です。その理由とリセット機能の対策を解説。

出典: フォーム上のリセットボタンはデメリット大 [ホームページ作成] All About