Submit your widget

beautiful Radio, check button with Forms

Created 7 years ago   Views 21988   downloads 5819    Author jqidealforms
beautiful Radio, check button with Forms
View DemoDownload 21.1 KB
109
Share |

What's Ideal Forms:

  • Ideal Forms is a small framework to build powerful and beautiful online forms.
  • It's very easy to use and requires minimal html syntax.
  • Absolutely everything is stylable with css, no images needed.
  • Support for IE 7+, Firefox 3+, Chrome 3+, Safari 3.1+ and Opera 11+.
  • Degrades gracefully with javascript disabled.

1. Add the files to your project:

  • Copy the css/idealForms folder to your css folder.
  • Copy the script js/idealForms.js to your scripts folder.


2. Load the css files:

  • All css files are required.
  • Css reset by html5doctor.
  • You can use one of the included themes or create your own.
    <link href="css/reset.css" rel="stylesheet" type="text/css" media="screen"/> 
    <link href="css/idealForms/idealForms.css" rel="stylesheet" type="text/css" media="screen"/> 
    <link href="css/idealForms/idealForms-theme-sapphire.css" rel="stylesheet" type="text/css" media="screen"/>
    

3. Load the jQuery library and the Ideal Forms plugin:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery-idealForms.js"></script>

4. Create your forms using the following syntax:

  • You can add as many sections as you want.
  • Elements are defined by their label.
    <form> 
     
        <!-- Section --> 
        <div class="idealWrap"> 
         
            <label>Custom</label> 
             
            <!-- Insert element here --> 
             
        </div> 
        <!-- End Section --> 
     
    </form>
    

5. Insert elements:

Text inputs

  • Use default syntax.
  • You can only insert one text input element per section.
<input type="text" id="One"/> 
<input type="password" id="Two"/> 
<textarea id="Three"></textarea>

Select Menu

  • Set the header text with the title attribute.
  • If there's no value attribute Ideal Forms sets it equal to the option text.
  • You can also set your own values and they won't get overridden.
    <select id="options" title="Select Option"> 
        <option>One</option> 
        <option>Two</option> 
        <option>Three </option> 
        <option>Four</option> 
    </select>
    

Radio and Checkbox

  • Wrap them inside a p tag.
  • The input goes inside the label not after.
  • Always set the name attribute.
  • Watch the br tags at the end.
    <p> 
        <label><input type="checkbox" name="checks"/>Check 1</label><br/> 
        <label><input type="checkbox" name="checks"/>Check 2</label><br/> 
        <label><input type="checkbox" name="checks"/>Check 3</label> 
    </p> 
    <p> 
        <label><input type="radio" name="radios"/>Radio 1</label><br/> 
        <label><input type="radio" name="radios"/>Radio 2</label><br/> 
        <label><input type="radio" name="radios"/>Radio 3</label> 
    </p>
    

Button

  • If your button section doesn't have a label you need to insert an empty label.
    <label>&nbsp;</label> 
    <input type="button" value="One"/> 
    <input type="button" value="Two"/> 
    <input type="submit" value="Submit"/>
    

Description

  • Descriptions go before or after the main element.
    <p>Description One</p> 
    <p>Description Two</p>
    

6. Finally, call the Ideal Forms plugin on your forms:

$('form').idealForms();

FAQ:

Ideal Forms code is well documented. Just read the comments as you inspect it.

Here's a list of some common questions:


Get input values with jQuery:

// Inputs text 
$('#id').val() 
 
// Select selected 
$('#id').find(':selected').val() 
 
// Radio and checkbox checked 
$('input[name="radios"]:checked').val() 
$('input[name="checks"]:checked').val()

Change form elements size:

  • Tweaking the global font size in idealForms.css should be enough.
  • Select elements width is auto adjusted to the longest option text.
  • You can also tweak the global width and padding to adjust text input and button elements.
  • If you want to change the width of a single element, style its id.
  • Label width is fixed. For long labels you need to edit the width.

Add scrollbar to select menu:

  • Uncomment scrollbar at the end of idealForms.css.
  • The scrollbar is not themable so it depends on the OS.

Round corners radius

  • To change the border-radius edit the Round Corners section in idealForms.css.

Change checkmark icon:

  • The checkmark icon is generated using a custom dingbat font.
  • You can change the font in idealForms.css. You might need to tweak the css settings to adjust its position.
  • To change the character you need to edit the checkmark content in idealForms.css.
    label input[type="checkbox"] + span.selected:before { /* Checkmark */
    	content: "|"; 
    	...
    
  • And for IE you also need to change the character in jquery-idealForms.js in between the em tags.
    // IE checkmark fix 
    if ($.browser.msie) {  
        if (input.is(':checkbox')) { 
            if (input.is(':checked')) { 
                span.append('<em>|</em>'); 
                ...
    

The article source:http://jqidealforms.com/