グリッド上の洒落たフォームレイアウトを実装するjQueryプラグイン「Grid forms」。

Grid Forms · Example   Personal Bank Account Initial Application

最近グリッドを作る時に要素をCSSでdisplay:tableに設定して作る手法(例1)を見かけますが、「Grid forms」も擬似テーブルでグリッドを作っています。

メタ言語はSASSを使用し、レスポンシブにも対応。ブレイクポイントでワンカラムに切り替わるよになっています。

最近はスマホのお陰もあってinput(text)のボーダーやインセットシャドウがあるって常識も薄れてきてるけど、何も考えずに無くしてしまうと判りづらくなってしまうかもしれない。
けど、「Grid forms」のように入力フォームの周りからの考えなおすと、ボーダーやシャドウなど関係無く、昔から馴染みのある紙の「お申込み書」的なレイアウトを意識した「お申込みフォーム」にすることで、ユーザーは使いやすくなるという場合も有るでしょうね。

Grid forms

<link rel="stylesheet" type="text/css" href="gridforms.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="gridforms/gridforms.js"></script>
<form class="grid-form">
<fieldset>
<legend>Form Section</legend>
<div data-row-span="2">
<div data-field-span="1">
<label>Field 1</label>
<input type="text">
</div>
<div data-field-span="1">
<label>Field 2</label>
<input type="text">
</div>
</div>
</fieldset>
</form>
  • このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

20 + fifteen =