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

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

使用方法 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>

あとは必要に応じて上記ルールで項目を増やしていけば完成です。
特にレスポシブにすることを意識することなく簡単に導入できますね。

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

sponsors

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

記事作成:
記事URL:

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