Create Handle Forms Reform - Download Create And Handle HTML Forms With jQuery Reform.js Plugin

Download Create And Handle HTML Forms With jQuery Reform.js Plugin

By Posted on

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.

Create Handle Forms Reform - Download Create And Handle HTML Forms With jQuery Reform.js Plugin
File Size: 87.5 KB
Views Total: 1314
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

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:

view source
01 <!-- Normal Input -->
02 <input type="text" name="name">
03 <input type="submit" value="Submit">
04  
05 <!-- Grouped Checkboxes -->
06 <form>
07   <div class="rf-group rf-group-single">
08     <label class="rf-checkbox rf-req">
09       <input type="checkbox" value="sample-1" name="checkbox">
10       <p>Sample 1</p>
11     </label>
12     <label class="rf-checkbox rf-req">
13       <input type="checkbox" value="sample-2" name="checkbox">
14       <p>Sample 2</p>
15     </label>
16     <label class="rf-checkbox rf-req">
17       <input type="checkbox" value="sample-3" name="checkbox">
18       <p>Sample 3</p>
19     </label>
20   </div>
21   <input type="submit" value="Submit">
22 </form>
23  
24 <!-- Select Box -->
25 <form>
26   <label class="rf-select">
27     <p>Sample</p>
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>
32     </select>
33   </label>
34   <input type="submit" value="Submit">
35 </form>
36  
37 <!-- Form <a href="https://www.jqueryscript.net/tags.php?/Validation/">Validation</a> -->
38 <form>
39   <label>
40     <p>Normal</p>
41     <input type="text" name="name">
42   </label>
43   <label class="rf-req">
44     <p>Required*</p>
45     <input type="text" name="required">
46   </label>
47   <label class="rf-req rf-val">
48     <p>E-Mail*</p>
49     <input type="email" name="email">
50   </label>
51   <label class="rf-req rf-val">
52     <p>Website*</p>
53     <input type="url" name="ulr">
54   </label>
55   <label class="rf-req rf-val" rf-val="phone">
56     <p>Phone*</p>
57     <input type="text" name="phone">
58   </label>
59   <input type="submit" value="Submit">
60 </form>

2. Include jQuery library and the jQuery Reform.js script at the bottom of the page.

view source
1 <script src="https://code.jquery.com/jquery-1.12.4.min.js"
2         integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
3         crossorigin="anonymous">
4 </script>
5 <script src="/dist/reform.js"></script>

3. Attach the Reform.js to your HTML forms.

view source
1 var reform = $('form').reform();

4. The example CSS to beautify the form controls.

view source
001 label+label, button { margin-top: 1em }
002  
003 label, button {
004   display: block;
005   width: 400px
006 }
007  
008 button {
009   border: 0;
010   width: 100%;
011   -webkit-appearance: none;
012   -moz-appearance: none;
013   appearance: none;
014   padding: 5px
source : jquery.net

Related posts: