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

サイト構築 -JavaScript

Post on:2011年9月21日

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>