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
License
This project is licensed under the MIT License - see the LICENSE file for details.