フォームの活用・装飾 (HTML,CSS,JavaScript)

JavaScriptを便利に・容易にする「jQuery」(ジェイ・クエリー)は、様々なウェブサイトで活用されている有名ライブラリです。jQueryの設置(読み込み)方法、バージョンの選択方法、記述位置など、jQueryを活用する準備についてを簡単に解説。jQueryを使ったテクニック記事も紹介しています。

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

ウェブ上のフォームでは、JavaScriptでリアルタイムに入力チェックし、その場でエラー表示のバルーンを出せると便利。jQuery-Validation-Engineを使えば、入力文字列や選択内容が指定条件(複数項目の組み合わせも可)を満たしているかどうかを入力と同時に確認し、ミスがあればエラーメッセージを吹き出しの形で表示可能。送信前に自動で入力チェックされる使いやすいフォームの作り方を解説。

入力欄によっては、「最低○文字は入力してほしい」という『最低入力文字数』を指定したいことがあります。入力欄の隣に『現在不足している文字数』をリアルタイムに表示して、入力ミスを減らす方法をご紹介！

input要素などで作る入力欄(フォーム)は、IEで表示させた場合だけ、本文の文字サイズに影響されずに、常に同じ大きさで表示されてしまいます。閲覧者のフォントサイズ設定に合ったサイズで表示させる方法をご紹介。

Enterキーによる誤送信を防ぐ方法や設定はあるのでしょうか。Enterキーを押してもフォームの内容が送信されないようにする方法と、送信する前に確認ダイアログを表示する方法の2通りをご紹介いたします。

HTMLで作成できる入力フォームで複数の選択肢を見せる方法には、チェックボックス・ラジオボタン・プルダウンメニュー(リストボックス)などのUIがあります。複数の値から1項目だけを選ばせる入力フォームとして使う場合の特徴を比較して、UIとしての選択例とHTMLの書き方を解説。使いやすくて分かりやすい入力フォームの作り方をご紹介いたします。

入力欄が狭すぎると長文が入力しにくくなります。しかし広すぎるとページが見渡しにくくなってしまいます。ユーザが自ら入力欄の大きさを調節できるような「編集領域の増減機能」付き入力欄を作ってみましょう。

1回クリックされると無効化され、2回以上はクリックできないボタンの作り方を解説。入力フォームで使えば、送信ボタンが複数回クリックされても同じ内容の重複送信を防げます。HTMLのinput要素で作成したボタンに対して、JavaScriptを使ってdisabledプロパティをON/OFFすることで、ボタンの有効/無効状態を簡単に切り替える方法を解説。

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