makemyform

1.0.4 • Public • Published

MakeMyForm

MIT license PRs Welcome NPM: released


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

  • 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


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 issues GitHub pull requests

GitHub Repository


License

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

Package Sidebar

Install

npm i makemyform

Weekly Downloads

1

Version

1.0.4

License

MIT

Unpacked Size

19.9 kB

Total Files

7

Last publish

Collaborators

  • abhi9720