Generador de formularios JSON responsive-AOForm
| Autor: | spexnetworks |
|---|---|
| Views Total: | 388 |
| Sitio oficial: | Ir a la web |
| Actualizado: | November 22, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Sin embargo, otra forma dinámica generador/constructor/creador escrito en JavaScript puro.
La biblioteca JavaScript de AOForm le permite generar dinámicamente un formulario HTML totalmente adaptable usando el esquema JSON y el Flexbox CSS.
Funcionamiento
Cargue la aoform. js y la hoja de estilos aoform. CSS de AOForm en la página.
<link rel="stylesheet" href="src/aoform.css"> <script src="src/aoform.js"></script>
Prepare los datos del formulario de la siguiente manera:
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"}
]
},
]; Genere un formulario dentro de un contenedor determinado. Hecho.
var myForm = new AOForm(form, document.querySelector('body')); Clases CSS predeterminadas que se aplicarán a los campos del formulario.
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',
