Ideal Forms 表單美化套件

Ideal Forms 是一個基於 jQuery 框架開發的表單美化套件，輕量級的框架用於建立滿觀和友善的表單介面。他能夠將標準的 input 元素轉化成為一個傭有圓角效果，並且選中元素還有加入了高亮效果的套件，內容的 radio 和 checkbox 完全可以使用自定義的方式。套件中沒有使用到任何的圖片，只用到了非常少的 HTML 語法並且使用 CSS 進行美化。

使用方法：
第一步 載入 Ideal Forms 需要使用到的 CSS 和 JavaScript 檔案
<link href="css/normalize.css" rel="stylesheet"/>
<link href="css/idealforms/idealforms.css" rel="stylesheet"/>
<link href="css/master.css" rel="stylesheet" media="screen"/>
<!-- 使用 Google AJAX API 取得 jQuery 框架 1.8.2 min 版本 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- 載入 Ideal Forms 的主程式碼-->
<script src="js/jquery.idealforms.js"></script>

第二步 使用 HTML 元素設計表單內容
<form id="myform">
  <fieldset>
    <h1>Ideal Forms 1.0</h1>
    <div>
 <label class="required">First Name:</label>
 <input type="text" size="40" />
    </div>
    <div>
 <label class="required">Password:</label>
 <input type="password" size="40"/>
    </div>
    <div>
 <label>Checkboxes:</label>
 <ul>
<li><label><input type="checkbox" checked />Lorem</label></li>
<li><label><input type="checkbox"/>Ipsum</label></li>
<li><label><input type="checkbox"/>Dolor</label></li>
<li><label><input type="checkbox"/>Sit amet</label></li>
 </ul>
    </div>
    <div>
 <label>State:</label>
 <select id="select">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA" selected >Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
 </select>
    </div>
    <div>
 <label>Numbers:</label>
 <select>
<option>Number One</option>
<option>Number Two</option>
<option>Number Three</option>
<option>Number Four</option>
<option>Number Five</option>
 </select>
    </div>
    <div>
 <label>Radios:</label>
 <ul>
<li><label><input type="radio" name="radios" checked />Lorem</label></li>
<li><label><input type="radio" name="radios"/>Ipsum</label></li>
<li><label><input type="radio" name="radios"/>Dolor</label></li>
<li><label><input type="radio" name="radios"/>Sit amet</label></li>
 </ul>
    </div>
<div>
 <label>Comments:</label>
 <textarea cols="40" rows="10"></textarea>
    </div>
<div>
 <label>&nbsp;</label>
 <button>Button</button>
 <input type="submit" value="Submit"/>
    </div>
  </fieldset>
</form>

第三步 使用 JavaScript 讓 Ideal Forms 初始化
$(function(){
$('#myform').idealforms();
});

作者網站：http://code.google.com/p/idealforms/
檔案大小：18.4 KB (包含範例)
檔案下載：http://code.google.com/p/idealforms/downloads/list
備份下載：下載