makemyform

MakeMyForm

---

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.

  

• 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.

  

---

Installation

You can install MakeMyForm via npm:

npm install makemyform

---

Usage

Schema Format

The library expects a JSON schema following a specific format:

{
  "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

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

<form>
  <h2>Student Registration Form</h2>
  <p>Form for registering students at the university</p>
  <div>
    <label>Enter your Email *</label>
    <input type="email" />
  </div>
  <div>
    <label>Enter your password *</label>
    <input type="password" minlength="5" maxlength="10" />
  </div>
  <button type="submit">Submit</button>
</form>

---

Repository

GitHub Repository

---

License

This project is licensed under the MIT License - see the LICENSE file for details.