Author: | spexnetworks |
---|---|
Views Total: | 1,850 views |
Official Page: | Go to website |
Last Update: | November 22, 2018 |
License: | MIT |
Preview:

Description:
Yet another dynamic form generator/builder/creator written in pure JavaScript.
The AOForm JavaScript library enables you to dynamically generate a fully responsive HTML form using JSON Schema and CSS Flexbox.
How to use it:
Load the AOForm’s JavaScript aoform.js
and stylesheet aoform.css
in the page.
<link rel="stylesheet" href="src/aoform.css"> <script src="src/aoform.js"></script>
Prepare your form data as follows:
var form = [ { "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"} ] }, { "type": "radio", "name": "color", "label": "Method for contact you", "values": [ {"label":"Email","value":"email"}, {"label":"Phone","value":"phone"}, {"label":"Videocall","value":"videocall"} ] }, { "type": "checkbox", "name": "pet", "label": "Pets have", "values": [ {"label":"Dog","value":"dog"}, {"label":"Cat","value":"cat"}, {"label":"Turtle","value":"turtle"} ] }, { "type": "textarea", "name": "history", "label": "History of you", "values": "Default text in textarea" }, { "type": "searchselect", "name": "language", "label": "Select languages you speak", "values": [ {"label":"Spanish","value":"spanish"}, {"label":"English","value":"english"}, {"label":"Russian","value":"russian"} ] }, ];
Generate a form inside a given container. Done.
var myForm = new AOForm(form, document.querySelector('body'));
Default CSS classes that will be applied to the form fields.
metaElement: { class: 'aoform' }, container: { class: 'aoform-container' }, input: { container: { class: 'aoform-input-container' }, text: { class: 'aoform-input' } }, textarea: { class: 'aoform-textarea' }, select: { container: { class: 'aoform-select-container' }, text: { class: 'aoform-text-select', notEmpty: 'aoform-selected' }, options: { container: { class: 'aoform-option-select' }, option: { class: 'aoform-option' } } }, radio: { container: { class: 'aoform-radio-container' }, option: { class: 'aoform-radio' } }, checkbox: { container: { class: 'aoform-checkbox-container' }, option: { class: 'aoform-checkbox' } }, multiselect: { container: { class: 'aoform-multiple-select' }, text: { container: { class: 'aoform-text-select aoform-options-selected' }, options: { container: { class: 'aoform-multiple-selected-option' }, option: { class: 'aoform-select-option' } } }, options: { container: { class: 'aoform-option-select' }, option: { class: 'aoform-option' } } }, searchselect: { container: { class: 'aoform-multiple-select' }, text: { container: { class: 'aoform-text-select aoform-options-selected' }, options: { container: { class: 'aoform-multiple-selected-option' }, option: { class: 'aoform-select-option' } } }, options: { container: { class: 'aoform-option-select' }, option: { class: 'aoform-option' }, search:{ container: { class: 'aoform-container-search' }, textarea: { class: 'aoform-text-search', placeholder: 'Type for search...' } } } }, title:{ class: 'aoform-title' }, subtitle:{ class: 'aoform-subtitle' }, activeClass: 'aoform-active',