jQueryでオシャレかつ機能的なフォーム画面を実装 formly.js

1. ダウンロード

以下からダウンロード
http://thrivingkings.com/read/Formly-The-form-glamorizer-for-jQuery

2. head内で読み込み

cssとjsを読み込む。当然jQueryも必要。

<link rel="stylesheet" href="formly.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/formly.js"></script>
<script type="text/javascript">
$(function() {
	$('#test').formly({
		'onBlur':false, //マウスオーバーでダイアログを出すか
		'theme':'Light' //指定しない or Light or Dark
	});
});
</script>

3. body内に記述

formのidは上記と合わせておく。

<form id="test" width="600px">
UserID: <input type="text" name="uid" place="必須" label="Username" require="true"><br>
Password: <input type="password" name="pwd" place="必須" label="Password" require="true"><br>
<input type="submit" value="Sign up" /><input type="reset" value="Clear" >
</form>

inputで指定できる内容は下記のとおり。

label:注意文
place:プレースホルダー
require:true/false（必須かどうか）
match:文言のマッチ
validate:バリデーション

以上、とても簡単でした。