<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Form Viewer</title> </head> <body> <div id="form-container"></div> <script> // Пример JSON-файла const formJson = { "components": [ { "text": "# File an Invoice\n\nAdd your invoice details below.", "type": "text", "id": "Field_1na090z", "layout": { "row": "Row_0lmsy15" } }, { "label": "Image view", "type": "image", "layout": { "row": "Row_1ju954r", "columns": null }, "id": "Field_0kfhe9d", "source": "https://i.ibb.co/NrZMfsR/105.png" }, { "key": "creditor", "label": "Creditor", "type": "textfield", "validate": { "required": true }, "id": "Field_12chft0", "layout": { "row": "Row_1rvpcsw" } }, { "description": "An invoice number in the format: C-123.", "key": "invoiceNumber", "label": "Invoice Number", "type": "textfield", "validate": { "pattern": "^C-[0-9]+$" }, "id": "Field_0jcge34", "layout": { "row": "Row_0960rdj" } }, { "values": [ { "label": "Value", "value": "value" } ], "label": "Tag list", "type": "taglist", "layout": { "row": "Row_1szoxy7", "columns": null }, "id": "Field_0mea1nt", "key": "taglist_30y47" }, { "values": [ { "label": "Value", "value": "value" } ], "label": "Checkbox group", "type": "checklist", "layout": { "row": "Row_1szoxy7", "columns": null }, "id": "Field_0u7r33p", "key": "checklist_vyc3y" }, { "action": "submit", "key": "submit", "label": "Submit", "type": "button", "id": "Field_0ie528a", "layout": { "row": "Row_1szoxy7" } } ], "schemaVersion": 16, "exporter": { "name": "form-js (https://demo.bpmn.io)", "version": "1.8.3" }, "type": "default", "id": "Form_020yixm" }; // Функция для генерации HTML-формы function generateForm(formData) { const container = document.getElementById('form-container'); formData.components.forEach(component => { const element = document.createElement('div'); element.id = component.id; if (component.type === 'text') { element.innerHTML = `<p>${component.text}</p>`; } else if (component.type === 'textfield') { element.innerHTML = `<label for="${component.key}">${component.label}</label> <input type="text" id="${component.key}" name="${component.key}" ${component.validate.required ? 'required' : ''}>`; } else if (component.type === 'checklist') { element.innerHTML = `<label>${component.label}</label>`; component.values.forEach(value => { element.innerHTML += `<input type="checkbox" id="${value.value}" name="${value.value}" value="${value.value}"> <label for="${value.value}">${value.label}</label>`; }); } else if (component.type === 'button') { element.innerHTML = `<button type="button" id="${component.key}">${component.label}</button>`; } container.appendChild(element); }); } // Генерация формы generateForm(formJson); </script> </body> </html>