履歴書っぽいグリッドなフォームを作成するjQueryプラグイン「Grid forms」

フォームを作成する際に、レスポンシブでそれなりのデザインでユーザビリティも考慮して・・・とかなると煩雑ですよね。
そんな時にはjQueryプラグインのGrid Formsを利用してみてはいかがでしょうか。

sponsors

使用方法

Grid Formsからファイル一式をダウンロード。

<link rel="stylesheet" type="text/css" href="gridforms.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="gridforms.js"></script>
    
フォーム部分の基本的な記述は下記の通りです。

    <form class="grid-form">
        <fieldset>
            <!-- フォームのタイトル -->
            <legend>履歴書的な</legend>
            <!-- 1行の記述 data-row-spanでグリッド数を調整 -->
            <div data-row-span="4">
                <!-- 1行の区分けを設定 -->
                <div data-field-span="3">
                    <label>お名前</label>
                    <!-- autofocusで初期フォーカス -->    
                    <input type="text" autofocus>
                </div>
                <div data-field-span="1">
                    <label>性別</label>
                    <input type="text">
                </div>
            </div>
        </fieldset>
    </form>
    
あとは必要に応じて上記ルールで項目を増やしていけば完成です。
特にレスポシブにすることを意識することなく簡単に導入できますね。
履歴書的な
Javascriptサンプルページ一覧
skuare.net