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

JavaScriptを便利にするライブラリ「jQuery」を活用するJavaScriptを「便利に」かつ「容易に」してくれるライブラリ、jQueryJavaScriptのライブラリである「jQuery」(ジェイ・クエリー)は、JavaScriptの記述を「容易に」かつ「便利に」してくれる優れた...続きを読む

郵便番号を入力するだけで、該当住所が自動的に補完される仕組みを設置郵便番号を入力するだけで住所が自動入力(補完)される仕組みは、通販サイトなどでよく見かけます。ユーザの手間を省ける上、入力ミスも防止でき、ユーザ側にとってもウェブサイト運営側にとっても便利な仕組みです。このような「郵便番号からの...続きを読む

フォームの入力チェックは、JavaScriptでリアルタイムにできると便利ウェブ上のフォームに何らかの入力をするとき、一旦送信してからエラーを表示されるよりも、その場でリアルタイムに入力ミスを指摘してくれる方が便利です。その方がページを移動する手間が省けますし、戻る際に入力内容が消えてしまう心...続きを読む

入力される内容に一定以上の文字数が必要な場合入力フォームを作成した際、項目によっては「少なくとも○文字以上は入力して欲しい」という「最低入力文字数」を設定したいことがあります。 例えば、 「パスワード入力欄」で最低6文字の入力が必要な場合 「郵便番号入力欄」で7桁の入力が必要な場合...続きを読む

IEでは入力欄のサイズが変わらないフォームの構成要素として、input要素で作る1行入力欄やボタン、textarea要素で作る複数行入力欄、select要素で作るプルダウンメニューなどがあります。 例えば、以下のようなものです。 ...続きを読む

[Enter]キーでフォームの内容が送信されてしまうと困る場合もある入力の途中でも[Enter]キーを押すと送信されてしまうフォームの入力欄にカーソルが入っている状態(＝フォーカスがある状態)で[Enter]キーを押すと、フォームの内容が送信されることがあります。これは、[Enter]キーの押...続きを読む

選択式入力フォームで使えるラジオボタンやチェックボックス等の違いHTMLで作れる入力フォームの中で、閲覧者に何かを選択して欲しい場合に使えるUI（ユーザ・インターフェイス）としては主に、下図のようなチェックボックス・ラジオボタン・プルダウンメニューの3種類があります。用途に応じて適切なUIを選...続きを読む

div.samplearea { background-color: #eeeeee; padding: 4px 4px 4px 20px; margin: 12px; line-height: 1.4; }テキスト入力欄の長さを変更可能に掲示板やメッセージ送信フォームなどでは、投稿欄（入力...続きを読む

重複送信を防ぐため、1回しかクリックできないボタンを作りたい掲示板の投稿ボタンやメッセージ送信ボタンなどは、誤って連続クリックされると同じ内容が何度も送信されてしまうことがあります。ボタンが1回クリックされた直後にそのボタンを無効化して、2回以上のクリックはできない仕様にすると、誤操作を防ぎや...続きを読む

div.sourcecode { background-color: #eeeeee; padding: 4px 4px 4px 20px; margin: 12px; line-height: 1.4; font-family: monospace; } div.samplearea { ...続きを読む