This time I will share jQuery Plugin and tutorial about Create And Handle HTML Forms With jQuery Reform.js Plugin, hope it will help you in programming stack.
The Reform.js jQuery plugin provides an easy way to create and handle forms with a modern approach in mind.
Features custom styles, AJAX form submit, form validation and more.
How to use it:
1. Create the form fields using the following CSS classes:
02 |
< input type = "text" name = "name" > |
03 |
< input type = "submit" value = "Submit" > |
07 |
< div class = "rf-group rf-group-single" > |
08 |
< label class = "rf-checkbox rf-req" > |
09 |
< input type = "checkbox" value = "sample-1" name = "checkbox" > |
12 |
< label class = "rf-checkbox rf-req" > |
13 |
< input type = "checkbox" value = "sample-2" name = "checkbox" > |
16 |
< label class = "rf-checkbox rf-req" > |
17 |
< input type = "checkbox" value = "sample-3" name = "checkbox" > |
21 |
< input type = "submit" value = "Submit" > |
26 |
< label class = "rf-select" > |
28 |
< select placeholder = "Please select ..." name = "select" > |
29 |
< option value = "option-1" >Option 1</ optionv > |
30 |
< option value = "option-2" >Option 2</ option > |
31 |
< option value = "option-3" >Option 3</ option > |
34 |
< input type = "submit" value = "Submit" > |
41 |
< input type = "text" name = "name" > |
43 |
< label class = "rf-req" > |
45 |
< input type = "text" name = "required" > |
47 |
< label class = "rf-req rf-val" > |
49 |
< input type = "email" name = "email" > |
51 |
< label class = "rf-req rf-val" > |
53 |
< input type = "url" name = "ulr" > |
55 |
< label class = "rf-req rf-val" rf-val = "phone" > |
57 |
< input type = "text" name = "phone" > |
59 |
< input type = "submit" value = "Submit" > |
2. Include jQuery library and the jQuery Reform.js script at the bottom of the page.
2 |
integrity = "sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" |
3 |
crossorigin = "anonymous" > |
5 |
< script src = "/dist/reform.js" ></ script > |
3. Attach the Reform.js to your HTML forms.
1 |
var reform = $( 'form' ).reform(); |
4. The example CSS to beautify the form controls.
001 |
label+label, button { margin-top : 1em } |
011 |
-webkit-appearance: none ; |
012 |
-moz-appearance: none ; |
014 |
padding : 5px
source : jquery.net
|