スタイル指定無しのフォーム

Your name:
Email address:
Username:
Password:

テーマ「Base」

Your name:
Email address:
Username:
Password:

テーマ「Dark」

Your name:
Email address:
Username:
Password:

テーマ「Light」

Your name:
Email address:
Username:
Password:

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<link href="<PATH>/formly.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/formly.js"></script>
<script>
	$(window).load(function(){
		$('#form01').formly();
		$('#form02').formly({theme: 'Dark'});
		$('#form03').formly({theme: 'Light'});
	});
</script>
<p>スタイル指定無しのフォーム</p>
<form>
	Your name: <input type="text" name="Name" /><br />
	Email address: <input type="text" name="Email" validate="email" /><br />
	Username: <input type="text" name="Username" place="No spaces" label="Username" require="true" /><br />
	Password: <input type="password" name="Password" label="Password" require="true" /><br />
	<input type="submit" value="Sign up" /><input type="reset" value="Clear" />
</form>

<p>テーマ「Base」</p>
<form id="form01">
	Your name: <input type="text" name="Name" /><br />
	Email address: <input type="text" name="Email" validate="email" /><br />
	Username: <input type="text" name="Username" place="No spaces" label="Username" require="true" /><br />
	Password: <input type="password" name="Password" label="Password" require="true" /><br />
	<input type="submit" value="Sign up" /><input type="reset" value="Clear" />
</form>

<p>テーマ「Dark」</p>
<form id="form02">
	Your name: <input type="text" name="Name" /><br />
	Email address: <input type="text" name="Email" validate="email" /><br />
	Username: <input type="text" name="Username" place="No spaces" label="Username" require="true" /><br />
	Password: <input type="password" name="Password" label="Password" require="true" /><br />
	<input type="submit" value="Sign up" /><input type="reset" value="Clear" />
</form>

<p>テーマ「Light」</p>
<form id="form03">
	Your name: <input type="text" name="Name" /><br />
	Email address: <input type="text" name="Email" validate="email" /><br />
	Username: <input type="text" name="Username" place="No spaces" label="Username" require="true" /><br />
	Password: <input type="password" name="Password" label="Password" require="true" /><br />
	<input type="submit" value="Sign up" /><input type="reset" value="Clear" />
</form>

Formlyについて

Fomlyは、簡単にフォームにきれいなスタイルを設定することができるプラグインです。
3つのテーマが用意されています。
IE10, 9でもほぼ動作しますが、一部ボタンのスタイルなどが反映されないようです。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • ClearableTextField

    ClearableTextField

    入力フォームに文字を入力すると文字削除用のボタンを表示

  • Placeholders

    Placeholders

    IE6-9でplaceholderと同じ機能を実現する

  • iCheck

    iCheck

    チェックボックス、ラジオボタンのなどの見た目をPC,スマホ、クロスブラウザで統一できる

  • PassStrength

    PassStrength

    入力されたパスワードの強度をわかりやすく表示

  • Chosen

    Chosen

    セレクトボックスの見た目と機能をグレードアップ