jQuery Ideal Forms is a small framework to build awesome responsive forms. It's built on top of jQuery and LESS.
Features:
- Fully responsive. (aka adaptive, adapts to the container, no css media queries needed)
- Keyboard support.
- Customizable input types with LESS, the dynamic css language.
- "On the spot" validation.
- Placeholder support for every browser.
Adaptive
The adaptive approach is the key to responsiveness everywhere, compatible with every browser, and works with any grid system.
Custom
To customize it open jq-idealforms.less and fiddle with the "user config". Then compile into css and load it inside your project. Quick & easy.
How to use it:
Load the latest jQuery library, the js/min/jquery.idealforms.min.js plugin and the css/jquery.idealforms.css stylesheet into your project.
Markup
For Ideal Forms to work its magic create your markup using the following template as a reference, nothing fancy, just the usual form tags wrapped in a div. Drop the form into a container of any size and Ideal Forms will do the rest.
<form id="my-form">
<!-- Text -->
<div><label>Username:</label><input name="username" type="text" /></div>
<div><label>Date:</label><input name="date" type="text" placeholder="mm/dd/yy"/></div>
<div><label>Comments:</label><textarea name="comments"></textarea></div>
<!-- Select -->
<div>
<label>Colors:</label>
<select name="colors">
<option value="Choose a color">Choose a color</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Green">Green</option>
</select>
</div>
<!-- Checkbox -->
<div>
<label>Languages:</label>
<label><input type="checkbox" name="langs[]" value="English"/>English</label>
<label><input type="checkbox" name="langs[]" value="Chinese"/>Chinese</label>
<label><input type="checkbox" name="langs[]" value="Spanish"/>Spanish</label>
</div>
<!-- Radio -->
<div>
<label>Options:</label>
<label><input type="radio" name="options" value="One"/>One</label>
<label><input type="radio" name="options" value="Two"/>Two</label>
<label><input type="radio" name="options" value="Three"/>Three</label>
</div>
<!-- Buttons -->
<!-- Empty label to align with all the other inputs -->
<div><label> </label><input type="button" value="Button"/></div>
<div><label> </label><button>Button</button></div>
</form>Invoke the plugin
Call Ideal Forms on each form separately.
$('#my-form').idealforms({ options });