https://github.com/israeljunior/json-to-form

A lightweight script to generate forms from objects or JSON files.
https://github.com/israeljunior/json-to-form

form javascript json vanilla-js

Last synced: 4 days ago
JSON representation

A lightweight script to generate forms from objects or JSON files.

• Host: GitHub
• URL: https://github.com/israeljunior/json-to-form
• Owner: israeljunior
• License: mit
• Created: 2019-08-15T13:47:20.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T07:16:26.000Z (about 2 years ago)
• Last Synced: 2024-12-24T01:37:32.289Z (15 days ago)
• Topics: form, javascript, json, vanilla-js
• Language: JavaScript
• Size: 416 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
# JsonToForm

A lightweight script to generate forms from objects or JSON files.



## Getting Started

Compiled and production-ready code can be found in the `dist` directory. The `src` directory contains development code.

### 1. Include JsonToForm on your site

You can [download the files directly from GitHub](https://github.com/israeljunior/json-to-form/archive/master.zip).

```html

```

### 2. Add the markup to your HTML

Needed only a container for the form.

```html



```


### 3. Initialize JsonToForm

In the footer of your page, after the content, initialize JsonToForm by passing in an object or JSON path, and the selector for the container.

```html

    var form1 = new JsonToForm({

        data: './src/data.json',

        container: '#form1'

    })

    // OR

    var form1 = new JsonToForm({

        data: {

            options: {

                action: 'submit.php'

            },

            fields: [

                {

                    name: 'name',

                    placeholder: 'Enter your name'

                },

                {

                    name: 'email',

                    placeholder: 'Enter a valid email address',

                    type: 'email'

                },

                {

                    name: 'options',

                    type: 'checkbox',

                    data: [

                        {title: 'aaa'},

                        {title: 'bbb'},

                        {title: 'ccc'},

                    ]

                }

            ]

        },

        container: '#form1'

    })

```

## License

The code is available under the [MIT License](LICENSE.txt).