(HTML)Uniform 入力フォームの見栄えを良くするスクリプト+CSS

(HTML)Niceforms 入力フォームの見栄えを良くするスクリプト+CSSで、Niceformsの紹介をしました。

今回取り上げる Uniform もフォーム項目の見栄えを良くするスクリプトですが、Niceforms よりかは構造的にシンプルです。

Niceformsほど凝った処理をしていないので、ある意味使いやすいです。

動作には jQuery が必要です。(UniformはjQueryプラグインです)

入力フォームの input, textarea, select, button にだけ適用されるようですね。(選択することも可能です)

こんな感じになります。(Firefox5)

IE8だと、テキストボックスの端の丸みがどうも出ないようです。

ダウンロードは、http://uniformjs.com/からできます。

使い方はまず、下記のように、外部ファイルを読み込みます。(jQueryは必須です)

 href="uniform.default.css" type="text/css" rel="stylesheet">
 type="text/javascript" src="jquery-1.6.2.js">
 type="text/javascript" src="jquery.uniform.js">

そして、下記のスクリプトを挿入します。

IE6には対応してませんが、デフォルトのフォームを表示するようです。

もし、MVCフレームワーク等の関係で、mod_rewriteを設定しURLと実際のパスが異なるような設定にしていて画像が表示されない場合は、uniform.default.css 内のbackgroundスタイルに指定している画像パスに適切な値を設定してみるといいかと思います。

参考：

セクシーなフォームがつくれるjQueryのプラグイン「Uniform」 | Web活メモ帳

ｊQueryでクールなフォームエレメント実装プラグイン「Uniform」:phpspot開発日誌

フォームの見栄え・使い勝手を強化するjQueryプラグインいっぱい | DesignWalker