AOForm JS Library
Simple responsive Forms generator with JSON Schema, without dependencies (Pure JS) in 10Kb. We want to continue improving our open source library, so any changes or additions of new elements will be found in the documentation. 😃
AOForm is completly compatible with Webkit, Gecko and IE9+.
In CSS we use Flexible Box Layout Module, making complete responsive form 😎. See compatibility here.
Usage
For start using add to <head>:
<link rel="stylesheet" type="text/css" href="aoform.min.css">
<script src="https://example.com/js/aoform.min.js"></script>For create form need understand the simple JSON Schema. More types of form elements in Wiki.
var jsonForm = [
{
"type": "input",
"name": "name",
"label": "Name",
"values": ""
},
{
"type": "select",
"name": "color",
"label": "Favorite Color",
"values": [
{"label":"Blue","value":"blue"},
{"label":"Yellow","value":"yellow"},
{"label":"Orange","value":"orange"}
]
}
];After JSON Schema, can create new Form with:
var myForm = new AOForm(jsonForm, document.querySelector('body'));AOForm function need Form and Element for append form.
Get Form Data
myForm.data;Custom CSS
We add classes in ClassesAO object in the follow struct:
const ClassesAO = {
metaElement: {
class: 'aoform'
},
container: {
class: 'aoform-container'
},
input: {
container: {
class: 'aoform-input-container'
},
text: {
class: 'aoform-input'
}
}...Also you can replace the class of element with your own class. The HTML struct of elements can see in Wiki.
Screenshot
| Normal | Responsive |
|---|---|
 |
 |