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

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プラグイン

  • iCheck

    iCheck

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

  • pickadate

    pickadate

    入力フォームに日付や時間をピッカーから選択できるUIを簡単に設置できる

  • CharacterCount

    CharacterCount

    入力フォームに文字数制限を設定し、入力可能文字数をリアルタイムで表示する

  • SlidingLabels

    SlidingLabels

    入力フォームのラベルに動きをつける

  • PassStrength

    PassStrength

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