https://github.com/abhi9720/makemyform

https://github.com/abhi9720/makemyform

html javascript json-schema makemyform

Last synced: about 18 hours ago
JSON representation

• Host: GitHub
• URL: https://github.com/abhi9720/makemyform
• Owner: abhi9720
• Created: 2024-02-08T18:56:08.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2024-02-11T10:51:38.000Z (12 months ago)
• Last Synced: 2024-12-28T20:47:28.859Z (30 days ago)
• Topics: html, javascript, json-schema, makemyform
• Language: JavaScript
• Homepage:
• Size: 17.6 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: Readme.md

Awesome Lists containing this project

README

        
## MakeMyForm

![MIT license](https://img.shields.io/badge/License-MIT-blue.svg?longCache=true)

![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?longCache=true)

![NPM: released](https://img.shields.io/npm/v/makemyform.svg)

---

### Description

MakeMyForm is a simple and lightweight JavaScript library designed to generate HTML forms dynamically based on JSON input. It provides an easy way to create custom HTML forms using a JSON schema.

---

### Dependencies

MakeMyForm relies on the following npm packages:

- **Ajv**: A JSON Schema validator for Node.js and browser. It is used for validating the JSON schema input provided by the user.

  ![Ajv](https://img.shields.io/npm/v/ajv.svg)

- **Jsdom**: A pure-JavaScript implementation of many web standards, notably the WHATWG DOM and HTML Standards. It is used for parsing and manipulating HTML documents in Node.js.

  ![Jsdom](https://img.shields.io/npm/v/jsdom.svg)

---

### Installation

You can install MakeMyForm via npm:

```bash

npm install makemyform

```

---

### Usage

#### Schema Format

The library expects a JSON schema following a specific format:

```json

{

  "form": {

    "title": "string",

    "description": "string",

    "fields": [

      {

        "label": "string",

        "element": "string",

        "options": [

          {

            "name": "string",

            "label": "string",

            "value": "string"

          }

        ],

        "validation": {

          "required": "boolean",

          "regex": "string",

          "minLength": "number",

          "maxLength": "number",

          "minValue": "number",

          "maxValue": "number"

        },

        "attributes": {

          "attributeName": "value"

        }

      }

    ]

  }

}

```

#### Example Usage

```javascript

const MakeMyForm = require("makemyform");

const jsonFormData = {

  form: {

    title: "Student Registration Form",

    description: "Form for registering students at the university",

    fields: [

      {

        label: "Enter your Email",

        element: "email",

        validation: {

          required: true,

        },

      },

      {

        label: "Enter your password",

        element: "password",

        validation: {

          minLength: 5,

          maxLength: 10,

          required: true,

        },

      },

    ],

  },

};

const htmlOutput = MakeMyForm.createForm(jsonFormData);

console.log(htmlOutput);

```

#### Output

```html

  
Student Registration Form

  
Form for registering students at the university

  


    Enter your Email *

    

  

  


    Enter your password *

    

  

  Submit


```

---

### Repository

[![GitHub issues](https://img.shields.io/github/issues/abhi9720/makemyform)](https://github.com/abhi9720/makemyform/issues)

[![GitHub pull requests](https://img.shields.io/github/issues-pr/abhi9720/makemyform)](https://github.com/abhi9720/makemyform/pulls)

[GitHub Repository](https://github.com/abhi9720/makemyform)

---

### License

This project is licensed under the MIT License - see the [LICENSE](https://github.com/abhi9720/makemyform/blob/main/LICENSE) file for details.