[JS]地味なフォームを簡単にかわいらしいデザインにする -Ideal Forms

画像を一切使用せず、既存のフォームをかわいらしいデザインに変更するjQueryのプラグインを紹介します。
チェックボックスのチェックも画像ではないですよ。

デモのキャプチャ

Ideal Forms
デモ

[ad#ad-2]

Ideal Formsのデモ

フォームの外観は画像は使用せずスタイルシートでデザインされているので、自分用のカラーに変更することも可能です。
デモでは、3つのスタイルが用意されています。

デモのキャプチャ

スタイル:ブラウザのデフォルト

デモのキャプチャ

スタイル:Sapphire

デモのキャプチャ

スタイル:Forest

デモのキャプチャ

スタイル:Comix

Ideal Formsの主な特徴

  • フォームに美しい外観を与える軽量(14Kb)のスクリプト。
  • カスタマイズも簡単で、非常に使いやすいです。
  • 画像は必要なく、スタイルシートでデザインを適用しています。

[ad#ad-2]

Ideal Formsの実装

ファイルのアップロード

以下の2つをフォルダごとアップロードします。

  • css/idealForms
  • js/idealForms.js

外部ファイル

スタイルシートとスクリプトを外部ファイルとして指定します。

<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen"/> 
<link href="css/idealForms/idealForms.css" rel="stylesheet" type="text/css" media="screen"/> 
<link href="css/idealForms/idealForms-theme-sapphire.css" rel="stylesheet" type="text/css" media="screen"/>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery-idealForms.js"></script>

HTML

フォームの各エレメントの定義はlabel要素で行います。

<form> 
    <!-- Section --> 
    <div class="idealWrap"> 
        <label>Custom</label> 
        <!-- Insert element here --> 
    </div> 
    <!-- End Section --> 
</form>

JavaScript

jQueryのセレクタで適用するフォームを指定します。

$('form').idealForms();

Ideal Formsの対応ブラウザ

対応ブラウザは下記の通りです。

  • IE7+
  • Firefox3+
  • Chrome3+
  • Safari3+
  • Opera11+

sponsors

top of page

©2018 coliss