Spaces:
Runtime error
Runtime error
| <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> |