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

スポンサーリンク

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

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

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

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

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>

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

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

f:id:kojikoji75:20130726221343p:plain

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

現場で役立つjQueryデザインパーツライブラリ

現場で役立つjQueryデザインパーツライブラリ

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

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

タイトルとURLをコピーしました