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

サイト構築 -JavaScript

Post on:2012年5月17日

sponsorsr

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

Ideal Forms -GitHub

[ad#ad-2]

Ideal Formsの主な特徴
Ideal Formsのデモ
Ideal Formsの使い方

Ideal Formsの主な特徴

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

対応ブラウザ

Chrome, Safari

Firefox

Opera

[ad#ad-2]

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>