人気ブログランキング | 話題のタグを見る
(HTML)Uniform 入力フォームの見栄えを良くするスクリプト+CSS
(HTML)Niceforms 入力フォームの見栄えを良くするスクリプト+CSSで、Niceformsの紹介をしました。

今回取り上げる Uniform もフォーム項目の見栄えを良くするスクリプトですが、Niceforms よりかは構造的にシンプルです。
Niceformsほど凝った処理をしていないので、ある意味使いやすいです。

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

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

こんな感じになります。(Firefox5)
(HTML)Uniform 入力フォームの見栄えを良くするスクリプト+CSS_e0091163_7192681.jpg



IE8だと、テキストボックスの端の丸みがどうも出ないようです。
(HTML)Uniform 入力フォームの見栄えを良くするスクリプト+CSS_e0091163_7193763.jpg



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

使い方はまず、下記のように、外部ファイルを読み込みます。(jQueryは必須です)
<link href="uniform.default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript" src="jquery.uniform.js"></script>


そして、下記のスクリプトを挿入します。
<script type="text/javascript" charset="utf-8">
$(function(){
$("input, textarea, select, button").uniform();
});
</script>



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

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


参考:
セクシーなフォームがつくれるjQueryのプラグイン「Uniform」 | Web活メモ帳
jQueryでクールなフォームエレメント実装プラグイン「Uniform」:phpspot開発日誌
フォームの見栄え・使い勝手を強化するjQueryプラグインいっぱい | DesignWalker
by Jehoshaphat | 2012-06-28 07:21 | Webがらみ


<< (Xperia arc)roo... (HTML)Niceforms... >>