Skip to content

Vanilla JS Library to Create Forms Dynamically

License

Notifications You must be signed in to change notification settings

vednig/forms.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

28 Commits
 
 
 
 
 
 
 
 

Repository files navigation

forms.js

Open Sourced JS to Create Forms Dynamically. Object Mapped Create Dynamic Forms Like these:

Building Sample Mail Subscribe Form with forms.js

  • include 'bootstrap'
  • include 'forms.js'
    <div id='dataform'></div>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" integrity="sha384-DhY6onE6f3zzKbjUPRc2hOzGAdEf4/Dz+WJwBvEYL/lkkIsI3ihufq9hk9K4lVoK" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/js/bootstrap.min.js" integrity="sha384-5h4UG+6GOuV9qXh6HqOLwZMY4mnLPraeTrjT5v07o347pj6IkfuoASuGBhfDsp3d" crossorigin="anonymous"></script>
    <script src='https://cdn.jsdelivr.net/gh/vednig/forms.js@latest/src/forms.js'></script>
    <script>
        div=document.getElementById('dataform')
        myform=formcreate(div,'GET','forms.js','uk',{'class':'red'})
        console.log(myform)
        label=formadd(myform,'label','y',{class:'container text-primary',value:'Go'},'Subscribe to Email')
        email=formadd(myform,'input','z',{class:'form form-control',placeholder:'Email-Address'})
     </script>

Functions

formcreate - creates form component

  • div - provide DIV to add form to.
  • form_type - POST/GET
  • id - Id of New Element
  • props - define props of element
  • innerHTML - inside of element (can be label or div )

formadd - adds a component to formcreate object.

  • div - provide formcreate instance
  • element_type - INPUT/BUTTON/LABEL
  • id - Id of New Element
  • props - define props of element
  • innerHTML - inside of element (can be label or div )

Releases

No releases published

Packages

No packages published