Beautiful jQuery Plugin For Grid Based Dense Forms - Grid Forms
File Size: | 134KB |
---|---|
Views Total: | 2295 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Grid Forms is a grid based jQuery form plugin designed for dense forms that require a large number of data to be entered regularly. Check the demo page to see how to create a personal bank account initial application with Grid Forms plugin.
Features:
- Proximity of fields relative to each other on the grid provides useful context. And field sizes serve as hints for what the value might be.
- With grid forms, lengthy forms can easily fit above the fold. Which means less scrolling. And tabbing through the form comes more naturally.
- Each field wraps to its own line on mobile devices. Even then, the forms are denser than their counterparts.
Basic Usage:
1. Include the jQuery javascript library on your web page/app.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
2. Include the gridforms.js script and default stylesheet after jQuery library.
<link rel="stylesheet" type="text/css" href="gridforms/gridforms.css"> <script type="text/javascript" src="gridforms/gridforms.js"></script>
3. Follow the Html structure below to build your grid based dense form.
<form class="my-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>
4. Style the form in CSS to your taste.
This awesome jQuery plugin is developed by kumailht. For more Advanced Usages, please check the demo page or visit the official website.