入力フォームを更に便利にするjQueryプラグイン5つ

入力フォームを更に便利にするjQueryプラグイン5つ

モモコ

モモコ

お疲れさまです、デザイナーのモモコです。

以前こちらの記事「入力フォームをユーザーフレンドリーにする便利なJSプラグイン」でもいくつか紹介させていただきましたが、今回また新たに制作された入力フォームが更に便利になるプラグインを5つほど紹介したいと思います。

flexselect

flexselect

セレクトボックスの各項目をフレキシブルに表示できるjQueryプラグイン。

選択だけでなく、フォームに文字を入力させることでソートも行えるようになっています。項目数が多い場合に有効活用できそうです。

Multi-Column-Dropdown

Multi-Column-Dropdown

セレクトボックスのUIをボタンで選択する形式に変更し使いやすくするjQueryプラグイン。

一項目を選択させるパターンと、複数項目の選択できるパターンの2つがDEMOにあげられています。IE7以上からの対応となっているので比較的導入しやすそうです。

selectordie

selectordie

セレクトボックスに様々な機能を付属できるjQueryプラグイン。

プレースホルダーやリンク、接頭辞の設定など、あると便利なオプションがそろっています。
デモで使用されているCSSも付属しているので、シンプルなデザインであればそのまま流用できそうです。

flyLabel.js

flyLabel.js

プレースホルダーに入れたテキストをフォーム部品の上部に出すjQueryプラグイン。

JavaScriptとCSS3を使用しており、フォーカス時とタイトル表示時にアニメーションがつきます。
前回ご紹介したLabel Betterと合わせてサイト全体の雰囲気に合ったものを選べるのがいいですね。

FullscreenForm

FullscreenForm

フルスクリーンのフォームを実装できるプラグイン。

HTML自体はolと各部品というシンプルな構成で組まれています。
エラーメッセージの表示方法や注釈の出し方など、デザインの参考にもなりそうです。

まとめ

いかがでしたでしょうか? 日々新しい技術をチェックし、積極的に取り入れることでユーザーが使いやすいフォーム作成を目指していきたいですね。
それでは、また。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

デザイナーのモモコです。ジャンプは単行本派です、よろしくお願い致します。

このメンバーの記事をもっと読む
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL