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

社内システムだったら必ずフォームのPost送信は多用するし、Webサイトであっても入力画面が存在するところには必ずフォームは必要となる。そんなとき、簡単にオシャレで機能的なフォームが設置できたら重宝するだろう。bootstrapなどのcss フレームワークを使っても、当たり前だが楽をできるのはデザイン面だけである。

そんなことを思っていた矢先、formlyというjQuery プラグインに出会ったので使用方法のメモを残す。

Web制作の現場で使うjQueryデザイン入門[改訂新版] (WEB PROFESSIONAL)

作者: 西畑一馬
出版社/メーカー: アスキー・メディアワークス
発売日: 2013/03/07
メディア: 大型本
クリック: 4回
この商品を含むブログ (6件) を見る

1. ダウンロード

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

f:id:kojikoji75:20130726221250p:plain

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>