[JS]Responsiveデザインに対応したフォームを作成するスクリプト -Ideal Forms

バリデーション機能付きのResponsiveデザインに対応したフォームを作成するためのLESSベースのjQueryのプラグインを紹介します。

デモのキャプチャ

Ideal Forms -GitHub

Ideal Formsの主な特徴

  • Responsiveデザインに完全対応
    ※CSSのMedia Queriesは必要としません。
  • キーボードのサポート
  • LESSを使ったカスタマイズ
  • バリデーション
  • 全てのブラウザにプレースホルダーを提供

対応ブラウザ

  • Chrome, Safari
  • Firefox
  • Opera

Ideal Formsのデモ

デモのキャプチャ

デモページ

デモはサイズを変更すると、レイアウトやバリデーションの表示などが最適化されて表示されます。

Ideal Formsの使い方

外部ファイル

jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/min/jquery.idealforms.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jquery.idealforms.css"></link>

HTML

各フォームの要素をdiv要素で内包して実装します。

<form id="my-form">

    <!-- Text -->
    <div><label>Username:</label><input name="username" type="text" /></div>
    <div><label>Date:</label><input name="date" type="text" placeholder="mm/dd/yy"/></div>
    <div><label>Comments:</label><textarea name="comments"></textarea></div>

    <!-- Select -->
    <div>
        <label>Colors:</label>
        <select name="colors">
            <option value="Choose a color">Choose a color</option>
            <option value="Red">Red</option>
            <option value="Blue">Blue</option>
            <option value="Green">Green</option>
        </select>
    </div>

    <!-- Checkbox -->
    <div>
        <label>Languages:</label>
        <label><input type="checkbox" name="langs&#91;&#93;" value="English"/>English</label>
        <label><input type="checkbox" name="langs&#91;&#93;" value="Chinese"/>Chinese</label>
        <label><input type="checkbox" name="langs&#91;&#93;" value="Spanish"/>Spanish</label>
    </div>

    <!-- Radio -->
    <div>
        <label>Options:</label>
        <label><input type="radio" name="options" value="One"/>One</label>
        <label><input type="radio" name="options" value="Two"/>Two</label>
        <label><input type="radio" name="options" value="Three"/>Three</label>
    </div>

    <!-- Buttons -->
    <!-- Empty label to align with all the other inputs -->
    <div><label>&nbsp;</label><input type="button" value="Button"/></div>
    <div><label>&nbsp;</label><button>Button</button></div>

</form>

JavaScript

ラッパーをjQueryのセレクタで指定し、オプションを記述してスクリプトを実行します。

$('#my-form').idealforms({ options });

top of page

©2017 coliss