読者です 読者をやめる 読者になる 読者になる

TechNote

とあるエンジニアのただのメモ

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

jQuery

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


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



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 UI を無駄なく使いこなすために必要な知識まとめ(各ファイルの役割など) - TechNotejQuery UI を無駄なく使いこなすために必要な知識まとめ(各ファイルの役割など) - TechNote

jQueryUIは、インタラクティブなWebサイトを開発するために使用されるjQueryベースのUIライブラリです。このため、多くのサイトで「簡単」「手軽」など...

jQueryで簡単にフワッと画像を表示させる lazyload.jsの実装方法 - TechNotejQueryで簡単にフワッと画像を表示させる lazyload.jsの実装方法 - TechNote

よくWebサイト上で見かける、画面をスクロールしていくとフワッと画像が現れてくるあの小技です。いつか自分も使う機会があったら使ってみようと思っていましたが、本日...

jQueryで簡単にメッセージをスーッと消す setTimeoutの実装方法 - TechNotejQueryで簡単にメッセージをスーッと消す setTimeoutの実装方法 - TechNote

Web上でときどき見る「登録しました」などのメッセージ表示エリアがスーッと消えてなくなる動きを自分もやってみた。簡単ながら社内システムなどで今後も使えそうなので...


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

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


広告を非表示にする