|Official Website:||Go to website|
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.
- 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.
2. Include the gridforms.js script and default stylesheet after jQuery library.
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.