[{"data":1,"prerenderedAt":63},["Reactive",2],{"blog-post-markdown-form-creation-input-validation-complete-guide":3},{"slug":4,"title":5,"description":6,"excerpt":7,"date":8,"category":9,"author":10,"keywords":11,"readingMinutes":12,"html":13,"headings":14,"tools":37,"related":38},"markdown-form-creation-input-validation-complete-guide","Markdown Form Creation and Input Validation: Complete Guide for Interactive Documentation and User Input Systems","Master advanced Markdown form creation techniques for interactive documentation, user input validation, and dynamic content generation. Learn to build accessible forms, implement client-side validation, and create sophisticated input systems within Markdown-based platforms.","Advanced Markdown form creation and input validation capabilities enable sophisticated interactive documentation systems that combine the simplicity of Markdown with powerful user input…","2025-10-10","Tutorial","Matthew Rathbone","markdown forms, markdown input validation, interactive markdown, markdown user input, form creation markdown, markdown form validation, dynamic markdown forms, markdown form processing",23,"\u003Cp>Advanced Markdown form creation and input validation capabilities enable sophisticated interactive documentation systems that combine the simplicity of Markdown with powerful user input collection, real-time validation, and dynamic content generation. By implementing comprehensive form systems within Markdown environments, content creators can build engaging documentation experiences that collect user feedback, generate personalized content, and create interactive tutorials that adapt to user inputs while maintaining the accessibility and maintainability advantages of Markdown-based content systems.\u003C/p>\n\u003Ch2 id=\"why-implement-markdown-form-creation-and-input-validation\">Why Implement Markdown Form Creation and Input Validation?\u003C/h2>\n\u003Cp>Professional form integration provides essential benefits for interactive content systems:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>User Engagement\u003C/strong>: Create interactive documentation experiences that respond to user inputs and preferences\u003C/li>\n\u003Cli>\u003Cstrong>Data Collection\u003C/strong>: Gather feedback, preferences, and usage patterns directly within documentation environments\u003C/li>\n\u003Cli>\u003Cstrong>Personalization\u003C/strong>: Generate customized content based on user selections and form submissions\u003C/li>\n\u003Cli>\u003Cstrong>Validation Quality\u003C/strong>: Ensure data integrity through comprehensive client-side and server-side validation systems\u003C/li>\n\u003Cli>\u003Cstrong>Accessibility Compliance\u003C/strong>: Build forms that meet accessibility standards while maintaining Markdown's simplicity\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"foundation-form-creation-concepts\">Foundation Form Creation Concepts\u003C/h2>\n\u003Ch3 id=\"basic-html-form-integration\">Basic HTML Form Integration\u003C/h3>\n\u003Cp>Understanding how to integrate HTML forms seamlessly with Markdown content:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Basic form integration in Markdown -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">form\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"user-preferences-form"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"markdown-form"\u003C/span> \u003Cspan class=\"hljs-attr\">method\u003C/span>=\u003Cspan class=\"hljs-string\">"post"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">fieldset\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">legend\u003C/span>>\u003C/span>User Preferences\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">legend\u003C/span>>\u003C/span>\n    \n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"form-group"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">label\u003C/span> \u003Cspan class=\"hljs-attr\">for\u003C/span>=\u003Cspan class=\"hljs-string\">"username"\u003C/span>>\u003C/span>Username:\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">label\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">input\u003C/span> \u003Cspan class=\"hljs-attr\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"text"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"username"\u003C/span> \u003Cspan class=\"hljs-attr\">name\u003C/span>=\u003Cspan class=\"hljs-string\">"username"\u003C/span> \u003Cspan class=\"hljs-attr\">required\u003C/span> \n             \u003Cspan class=\"hljs-attr\">pattern\u003C/span>=\u003Cspan class=\"hljs-string\">"^[a-zA-Z0-9_]+$"\u003C/span> \n             \u003Cspan class=\"hljs-attr\">title\u003C/span>=\u003Cspan class=\"hljs-string\">"Username must contain only letters, numbers, and underscores"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"validation-message"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"username-error"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n    \n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"form-group"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">label\u003C/span> \u003Cspan class=\"hljs-attr\">for\u003C/span>=\u003Cspan class=\"hljs-string\">"email"\u003C/span>>\u003C/span>Email Address:\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">label\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">input\u003C/span> \u003Cspan class=\"hljs-attr\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"email"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"email"\u003C/span> \u003Cspan class=\"hljs-attr\">name\u003C/span>=\u003Cspan class=\"hljs-string\">"email"\u003C/span> \u003Cspan class=\"hljs-attr\">required\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"validation-message"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"email-error"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n    \n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"form-group"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">label\u003C/span> \u003Cspan class=\"hljs-attr\">for\u003C/span>=\u003Cspan class=\"hljs-string\">"experience"\u003C/span>>\u003C/span>Experience Level:\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">label\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">select\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"experience"\u003C/span> \u003Cspan class=\"hljs-attr\">name\u003C/span>=\u003Cspan class=\"hljs-string\">"experience"\u003C/span> \u003Cspan class=\"hljs-attr\">required\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">option\u003C/span> \u003Cspan class=\"hljs-attr\">value\u003C/span>=\u003Cspan class=\"hljs-string\">""\u003C/span>>\u003C/span>Select your level\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">option\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">option\u003C/span> \u003Cspan class=\"hljs-attr\">value\u003C/span>=\u003Cspan class=\"hljs-string\">"beginner"\u003C/span>>\u003C/span>Beginner\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">option\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">option\u003C/span> \u003Cspan class=\"hljs-attr\">value\u003C/span>=\u003Cspan class=\"hljs-string\">"intermediate"\u003C/span>>\u003C/span>Intermediate\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">option\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">option\u003C/span> \u003Cspan class=\"hljs-attr\">value\u003C/span>=\u003Cspan class=\"hljs-string\">"advanced"\u003C/span>>\u003C/span>Advanced\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">option\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">option\u003C/span> \u003Cspan class=\"hljs-attr\">value\u003C/span>=\u003Cspan class=\"hljs-string\">"expert"\u003C/span>>\u003C/span>Expert\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">option\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">select\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"validation-message"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"experience-error"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n    \n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"form-group"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">fieldset\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">legend\u003C/span>>\u003C/span>Preferred Topics:\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">legend\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">label\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">input\u003C/span> \u003Cspan class=\"hljs-attr\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"checkbox"\u003C/span> \u003Cspan class=\"hljs-attr\">name\u003C/span>=\u003Cspan class=\"hljs-string\">"topics"\u003C/span> \u003Cspan class=\"hljs-attr\">value\u003C/span>=\u003Cspan class=\"hljs-string\">"javascript"\u003C/span>>\u003C/span> JavaScript\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">label\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">label\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">input\u003C/span> \u003Cspan class=\"hljs-attr\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"checkbox"\u003C/span> \u003Cspan class=\"hljs-attr\">name\u003C/span>=\u003Cspan class=\"hljs-string\">"topics"\u003C/span> \u003Cspan class=\"hljs-attr\">value\u003C/span>=\u003Cspan class=\"hljs-string\">"python"\u003C/span>>\u003C/span> Python\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">label\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">label\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">input\u003C/span> \u003Cspan class=\"hljs-attr\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"checkbox"\u003C/span> \u003Cspan class=\"hljs-attr\">name\u003C/span>=\u003Cspan class=\"hljs-string\">"topics"\u003C/span> \u003Cspan class=\"hljs-attr\">value\u003C/span>=\u003Cspan class=\"hljs-string\">"web-development"\u003C/span>>\u003C/span> Web Development\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">label\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">label\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">input\u003C/span> \u003Cspan class=\"hljs-attr\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"checkbox"\u003C/span> \u003Cspan class=\"hljs-attr\">name\u003C/span>=\u003Cspan class=\"hljs-string\">"topics"\u003C/span> \u003Cspan class=\"hljs-attr\">value\u003C/span>=\u003Cspan class=\"hljs-string\">"data-science"\u003C/span>>\u003C/span> Data Science\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">label\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">fieldset\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n    \n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"form-group"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">label\u003C/span> \u003Cspan class=\"hljs-attr\">for\u003C/span>=\u003Cspan class=\"hljs-string\">"comments"\u003C/span>>\u003C/span>Additional Comments:\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">label\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">textarea\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"comments"\u003C/span> \u003Cspan class=\"hljs-attr\">name\u003C/span>=\u003Cspan class=\"hljs-string\">"comments"\u003C/span> \u003Cspan class=\"hljs-attr\">rows\u003C/span>=\u003Cspan class=\"hljs-string\">"4"\u003C/span> \n                \u003Cspan class=\"hljs-attr\">placeholder\u003C/span>=\u003Cspan class=\"hljs-string\">"Tell us about your interests and goals..."\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">textarea\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n    \n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"form-actions"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">button\u003C/span> \u003Cspan class=\"hljs-attr\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"submit"\u003C/span>>\u003C/span>Save Preferences\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">button\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">button\u003C/span> \u003Cspan class=\"hljs-attr\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"reset"\u003C/span>>\u003C/span>Clear Form\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">button\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">fieldset\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">form\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003Cspan class=\"language-css\">\n\u003Cspan class=\"hljs-selector-class\">.markdown-form\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">600px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#ddd\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f9f9f9\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.form-group\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">15px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.form-group\u003C/span> \u003Cspan class=\"hljs-selector-tag\">label\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n  \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">5px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: bold;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.form-group\u003C/span> \u003Cspan class=\"hljs-selector-tag\">input\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.form-group\u003C/span> select,\n\u003Cspan class=\"hljs-selector-class\">.form-group\u003C/span> \u003Cspan class=\"hljs-selector-tag\">textarea\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#ccc\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">box-sizing\u003C/span>: border-box;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.form-group\u003C/span> \u003Cspan class=\"hljs-selector-tag\">input\u003C/span>\u003Cspan class=\"hljs-selector-attr\">[type=\u003Cspan class=\"hljs-string\">"checkbox"\u003C/span>]\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: auto;\n  \u003Cspan class=\"hljs-attribute\">margin-right\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.validation-message\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#d32f2f\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.875em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin-top\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.validation-message\u003C/span>\u003Cspan class=\"hljs-selector-class\">.show\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.form-actions\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin-top\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.form-actions\u003C/span> \u003Cspan class=\"hljs-selector-tag\">button\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">10px\u003C/span> \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">10px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border\u003C/span>: none;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: pointer;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.form-actions\u003C/span> \u003Cspan class=\"hljs-selector-tag\">button\u003C/span>\u003Cspan class=\"hljs-selector-attr\">[type=\u003Cspan class=\"hljs-string\">"submit"\u003C/span>]\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#1976d2\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.form-actions\u003C/span> \u003Cspan class=\"hljs-selector-tag\">button\u003C/span>\u003Cspan class=\"hljs-selector-attr\">[type=\u003Cspan class=\"hljs-string\">"reset"\u003C/span>]\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#757575\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n}\n\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"comprehensive-form-validation-system\">Comprehensive Form Validation System\u003C/h3>\n\u003Cp>Building robust client-side validation for Markdown-integrated forms:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// markdown-form-validator.js - Advanced form validation system\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownFormValidator\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">formElement, options = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span> = formElement;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">validateOnInput\u003C/span>: options.\u003Cspan class=\"hljs-property\">validateOnInput\u003C/span> !== \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">validateOnBlur\u003C/span>: options.\u003Cspan class=\"hljs-property\">validateOnBlur\u003C/span> !== \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">showInlineErrors\u003C/span>: options.\u003Cspan class=\"hljs-property\">showInlineErrors\u003C/span> !== \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">customValidators\u003C/span>: options.\u003Cspan class=\"hljs-property\">customValidators\u003C/span> || {},\n            \u003Cspan class=\"hljs-attr\">onSubmit\u003C/span>: options.\u003Cspan class=\"hljs-property\">onSubmit\u003C/span> || \u003Cspan class=\"hljs-literal\">null\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">onValidationChange\u003C/span>: options.\u003Cspan class=\"hljs-property\">onValidationChange\u003C/span> || \u003Cspan class=\"hljs-literal\">null\u003C/span>,\n            ...options\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validators\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validationResults\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupDefaultValidators\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">bindEvents\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupDefaultValidators\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Text length validation\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addValidator\u003C/span>(\u003Cspan class=\"hljs-string\">'minLength'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">value, constraint\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!value || value.\u003Cspan class=\"hljs-property\">length\u003C/span> < constraint) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`Must be at least \u003Cspan class=\"hljs-subst\">${constraint}\u003C/span> characters long`\u003C/span>;\n            }\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        });\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addValidator\u003C/span>(\u003Cspan class=\"hljs-string\">'maxLength'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">value, constraint\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (value && value.\u003Cspan class=\"hljs-property\">length\u003C/span> > constraint) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`Must be no more than \u003Cspan class=\"hljs-subst\">${constraint}\u003C/span> characters long`\u003C/span>;\n            }\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Pattern validation\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addValidator\u003C/span>(\u003Cspan class=\"hljs-string\">'pattern'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">value, constraint\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!value) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> regex = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">RegExp\u003C/span>(constraint);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!regex.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(value)) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'Please enter a valid format'\u003C/span>;\n            }\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Email validation\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addValidator\u003C/span>(\u003Cspan class=\"hljs-string\">'email'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">value\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!value) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> emailRegex = \u003Cspan class=\"hljs-regexp\">/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!emailRegex.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(value)) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'Please enter a valid email address'\u003C/span>;\n            }\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// URL validation\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addValidator\u003C/span>(\u003Cspan class=\"hljs-string\">'url'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">value\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!value) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title function_\">URL\u003C/span>(value);\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n            } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'Please enter a valid URL'\u003C/span>;\n            }\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Number validation\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addValidator\u003C/span>(\u003Cspan class=\"hljs-string\">'min'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">value, constraint\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> num = \u003Cspan class=\"hljs-built_in\">parseFloat\u003C/span>(value);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-built_in\">isNaN\u003C/span>(num) || num < constraint) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`Must be at least \u003Cspan class=\"hljs-subst\">${constraint}\u003C/span>`\u003C/span>;\n            }\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        });\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addValidator\u003C/span>(\u003Cspan class=\"hljs-string\">'max'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">value, constraint\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> num = \u003Cspan class=\"hljs-built_in\">parseFloat\u003C/span>(value);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-built_in\">isNaN\u003C/span>(num) || num > constraint) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`Must be no more than \u003Cspan class=\"hljs-subst\">${constraint}\u003C/span>`\u003C/span>;\n            }\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Custom validation for common patterns\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addValidator\u003C/span>(\u003Cspan class=\"hljs-string\">'username'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">value\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!value) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-regexp\">/^[a-zA-Z0-9_]+$/\u003C/span>.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(value)) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'Username can only contain letters, numbers, and underscores'\u003C/span>;\n            }\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (value.\u003Cspan class=\"hljs-property\">length\u003C/span> < \u003Cspan class=\"hljs-number\">3\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'Username must be at least 3 characters long'\u003C/span>;\n            }\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (value.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">20\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'Username must be no more than 20 characters long'\u003C/span>;\n            }\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Password strength validation\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addValidator\u003C/span>(\u003Cspan class=\"hljs-string\">'passwordStrength'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">value\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!value) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> checks = {\n                \u003Cspan class=\"hljs-attr\">length\u003C/span>: value.\u003Cspan class=\"hljs-property\">length\u003C/span> >= \u003Cspan class=\"hljs-number\">8\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">uppercase\u003C/span>: \u003Cspan class=\"hljs-regexp\">/[A-Z]/\u003C/span>.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(value),\n                \u003Cspan class=\"hljs-attr\">lowercase\u003C/span>: \u003Cspan class=\"hljs-regexp\">/[a-z]/\u003C/span>.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(value),\n                \u003Cspan class=\"hljs-attr\">number\u003C/span>: \u003Cspan class=\"hljs-regexp\">/\\d/\u003C/span>.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(value),\n                \u003Cspan class=\"hljs-attr\">special\u003C/span>: \u003Cspan class=\"hljs-regexp\">/[!@#$%^&*()_+\\-=\\[\\]{};':"\\\\|,.<>\\/?]/\u003C/span>.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(value)\n            };\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> passedChecks = \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">values\u003C/span>(checks).\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-title class_\">Boolean\u003C/span>).\u003Cspan class=\"hljs-property\">length\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (passedChecks < \u003Cspan class=\"hljs-number\">3\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'Password must contain at least 3 of: uppercase, lowercase, number, special character'\u003C/span>;\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addValidator\u003C/span>(\u003Cspan class=\"hljs-params\">name, validatorFunction\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validators\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(name, validatorFunction);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">bindEvents\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Form submission\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'submit'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">handleSubmit\u003C/span>.\u003Cspan class=\"hljs-title function_\">bind\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>));\n        \n        \u003Cspan class=\"hljs-comment\">// Input validation\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> inputs = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'input, select, textarea'\u003C/span>);\n        inputs.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">input\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">validateOnInput\u003C/span>) {\n                input.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'input'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">handleInputValidation\u003C/span>.\u003Cspan class=\"hljs-title function_\">bind\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>));\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">validateOnBlur\u003C/span>) {\n                input.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'blur'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">handleBlurValidation\u003C/span>.\u003Cspan class=\"hljs-title function_\">bind\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>));\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">handleSubmit\u003C/span>(\u003Cspan class=\"hljs-params\">event\u003C/span>) {\n        event.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> isValid = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">validateForm\u003C/span>();\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (isValid) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> formData = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getFormData\u003C/span>();\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">onSubmit\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-title function_\">onSubmit\u003C/span>(formData, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span>);\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">defaultSubmitHandler\u003C/span>(formData);\n            }\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">showValidationSummary\u003C/span>();\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">handleInputValidation\u003C/span>(\u003Cspan class=\"hljs-params\">event\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">validateField\u003C/span>(event.\u003Cspan class=\"hljs-property\">target\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">handleBlurValidation\u003C/span>(\u003Cspan class=\"hljs-params\">event\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">validateField\u003C/span>(event.\u003Cspan class=\"hljs-property\">target\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">validateField\u003C/span>(\u003Cspan class=\"hljs-params\">field\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> fieldName = field.\u003Cspan class=\"hljs-property\">name\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> value = field.\u003Cspan class=\"hljs-property\">value\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> errors = [];\n        \n        \u003Cspan class=\"hljs-comment\">// Required field validation\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (field.\u003Cspan class=\"hljs-title function_\">hasAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'required'\u003C/span>) && !value.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>()) {\n            errors.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'This field is required'\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// HTML5 constraint validation\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!field.\u003Cspan class=\"hljs-property\">validity\u003C/span>.\u003Cspan class=\"hljs-property\">valid\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (field.\u003Cspan class=\"hljs-property\">validity\u003C/span>.\u003Cspan class=\"hljs-property\">typeMismatch\u003C/span>) {\n                errors.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'Please enter a valid format'\u003C/span>);\n            }\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (field.\u003Cspan class=\"hljs-property\">validity\u003C/span>.\u003Cspan class=\"hljs-property\">patternMismatch\u003C/span>) {\n                errors.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(field.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'title'\u003C/span>) || \u003Cspan class=\"hljs-string\">'Please match the requested format'\u003C/span>);\n            }\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Custom validation attributes\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> customValidations = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getCustomValidations\u003C/span>(field);\n        customValidations.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">{ validator, constraint }\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validators\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(validator)) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> error = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validators\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(validator)(value, constraint);\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (error) {\n                    errors.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(error);\n                }\n            }\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Apply custom validators from options\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">customValidators\u003C/span>[fieldName]) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> customError = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">customValidators\u003C/span>[fieldName](value, field);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (customError) {\n                errors.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(customError);\n            }\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Store validation results\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validationResults\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(fieldName, {\n            \u003Cspan class=\"hljs-attr\">isValid\u003C/span>: errors.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">errors\u003C/span>: errors,\n            \u003Cspan class=\"hljs-attr\">field\u003C/span>: field\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Display inline errors\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">showInlineErrors\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">displayFieldErrors\u003C/span>(field, errors);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Update field styling\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateFieldStyling\u003C/span>(field, errors.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Notify validation change\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">onValidationChange\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-title function_\">onValidationChange\u003C/span>(fieldName, {\n                \u003Cspan class=\"hljs-attr\">isValid\u003C/span>: errors.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">errors\u003C/span>: errors\n            });\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> errors.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getCustomValidations\u003C/span>(\u003Cspan class=\"hljs-params\">field\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> validations = [];\n        \n        \u003Cspan class=\"hljs-comment\">// Data attributes for validation\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> dataset = field.\u003Cspan class=\"hljs-property\">dataset\u003C/span>;\n        \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">keys\u003C/span>(dataset).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">key\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (key.\u003Cspan class=\"hljs-title function_\">startsWith\u003C/span>(\u003Cspan class=\"hljs-string\">'validate'\u003C/span>)) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> validator = key.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-string\">'validate'\u003C/span>, \u003Cspan class=\"hljs-string\">''\u003C/span>).\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> constraint = dataset[key];\n                validations.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({ validator, constraint });\n            }\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Special handling for common validation patterns\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (field.\u003Cspan class=\"hljs-property\">type\u003C/span> === \u003Cspan class=\"hljs-string\">'email'\u003C/span>) {\n            validations.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({ \u003Cspan class=\"hljs-attr\">validator\u003C/span>: \u003Cspan class=\"hljs-string\">'email'\u003C/span>, \u003Cspan class=\"hljs-attr\">constraint\u003C/span>: \u003Cspan class=\"hljs-literal\">null\u003C/span> });\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (field.\u003Cspan class=\"hljs-property\">type\u003C/span> === \u003Cspan class=\"hljs-string\">'url'\u003C/span>) {\n            validations.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({ \u003Cspan class=\"hljs-attr\">validator\u003C/span>: \u003Cspan class=\"hljs-string\">'url'\u003C/span>, \u003Cspan class=\"hljs-attr\">constraint\u003C/span>: \u003Cspan class=\"hljs-literal\">null\u003C/span> });\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (field.\u003Cspan class=\"hljs-title function_\">hasAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'minlength'\u003C/span>)) {\n            validations.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({ \n                \u003Cspan class=\"hljs-attr\">validator\u003C/span>: \u003Cspan class=\"hljs-string\">'minLength'\u003C/span>, \n                \u003Cspan class=\"hljs-attr\">constraint\u003C/span>: \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(field.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'minlength'\u003C/span>)) \n            });\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (field.\u003Cspan class=\"hljs-title function_\">hasAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'maxlength'\u003C/span>)) {\n            validations.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({ \n                \u003Cspan class=\"hljs-attr\">validator\u003C/span>: \u003Cspan class=\"hljs-string\">'maxLength'\u003C/span>, \n                \u003Cspan class=\"hljs-attr\">constraint\u003C/span>: \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(field.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'maxlength'\u003C/span>)) \n            });\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (field.\u003Cspan class=\"hljs-title function_\">hasAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'min'\u003C/span>)) {\n            validations.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({ \n                \u003Cspan class=\"hljs-attr\">validator\u003C/span>: \u003Cspan class=\"hljs-string\">'min'\u003C/span>, \n                \u003Cspan class=\"hljs-attr\">constraint\u003C/span>: \u003Cspan class=\"hljs-built_in\">parseFloat\u003C/span>(field.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'min'\u003C/span>)) \n            });\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (field.\u003Cspan class=\"hljs-title function_\">hasAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'max'\u003C/span>)) {\n            validations.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({ \n                \u003Cspan class=\"hljs-attr\">validator\u003C/span>: \u003Cspan class=\"hljs-string\">'max'\u003C/span>, \n                \u003Cspan class=\"hljs-attr\">constraint\u003C/span>: \u003Cspan class=\"hljs-built_in\">parseFloat\u003C/span>(field.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'max'\u003C/span>)) \n            });\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> validations;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">displayFieldErrors\u003C/span>(\u003Cspan class=\"hljs-params\">field, errors\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> errorContainer = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getErrorContainer\u003C/span>(field);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (errors.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            errorContainer.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = errors[\u003Cspan class=\"hljs-number\">0\u003C/span>]; \u003Cspan class=\"hljs-comment\">// Show first error\u003C/span>\n            errorContainer.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'show'\u003C/span>);\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            errorContainer.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            errorContainer.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'show'\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getErrorContainer\u003C/span>(\u003Cspan class=\"hljs-params\">field\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> fieldName = field.\u003Cspan class=\"hljs-property\">name\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> errorContainer = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">`#\u003Cspan class=\"hljs-subst\">${fieldName}\u003C/span>-error`\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!errorContainer) {\n            errorContainer = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n            errorContainer.\u003Cspan class=\"hljs-property\">id\u003C/span> = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${fieldName}\u003C/span>-error`\u003C/span>;\n            errorContainer.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'validation-message'\u003C/span>;\n            field.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(errorContainer);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> errorContainer;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateFieldStyling\u003C/span>(\u003Cspan class=\"hljs-params\">field, isValid\u003C/span>) {\n        field.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">toggle\u003C/span>(\u003Cspan class=\"hljs-string\">'field-error'\u003C/span>, !isValid);\n        field.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">toggle\u003C/span>(\u003Cspan class=\"hljs-string\">'field-valid'\u003C/span>, isValid && field.\u003Cspan class=\"hljs-property\">value\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>() !== \u003Cspan class=\"hljs-string\">''\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">validateForm\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> inputs = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'input, select, textarea'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> isFormValid = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n        \n        inputs.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">input\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> isFieldValid = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">validateField\u003C/span>(input);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!isFieldValid) {\n                isFormValid = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n            }\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> isFormValid;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">showValidationSummary\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> errors = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validationResults\u003C/span>.\u003Cspan class=\"hljs-title function_\">values\u003C/span>())\n            .\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">result\u003C/span> =>\u003C/span> !result.\u003Cspan class=\"hljs-property\">isValid\u003C/span>)\n            .\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">result\u003C/span> =>\u003C/span> ({\n                \u003Cspan class=\"hljs-attr\">field\u003C/span>: result.\u003Cspan class=\"hljs-property\">field\u003C/span>.\u003Cspan class=\"hljs-property\">name\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">label\u003C/span>: result.\u003Cspan class=\"hljs-property\">field\u003C/span>.\u003Cspan class=\"hljs-property\">labels\u003C/span>?.[\u003Cspan class=\"hljs-number\">0\u003C/span>]?.\u003Cspan class=\"hljs-property\">textContent\u003C/span> || result.\u003Cspan class=\"hljs-property\">field\u003C/span>.\u003Cspan class=\"hljs-property\">name\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">errors\u003C/span>: result.\u003Cspan class=\"hljs-property\">errors\u003C/span>\n            }));\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (errors.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> summary = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createValidationSummary\u003C/span>(errors);\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">displayValidationSummary\u003C/span>(summary);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createValidationSummary\u003C/span>(\u003Cspan class=\"hljs-params\">errors\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> summary = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        summary.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'validation-summary'\u003C/span>;\n        summary.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            <h3>Please correct the following errors:</h3>\n            <ul>\n                \u003Cspan class=\"hljs-subst\">${errors.map(error => \n                    \u003Cspan class=\"hljs-string\">`<li><strong>\u003Cspan class=\"hljs-subst\">${error.label}\u003C/span>:</strong> \u003Cspan class=\"hljs-subst\">${error.errors.join(\u003Cspan class=\"hljs-string\">', '\u003C/span>)}\u003C/span></li>`\u003C/span>\n                ).join(\u003Cspan class=\"hljs-string\">''\u003C/span>)}\u003C/span>\n            </ul>\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> summary;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">displayValidationSummary\u003C/span>(\u003Cspan class=\"hljs-params\">summary\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Remove existing summary\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> existingSummary = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.validation-summary'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (existingSummary) {\n            existingSummary.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Insert new summary at the top of the form\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(summary, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span>.\u003Cspan class=\"hljs-property\">firstChild\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Scroll to summary\u003C/span>\n        summary.\u003Cspan class=\"hljs-title function_\">scrollIntoView\u003C/span>({ \u003Cspan class=\"hljs-attr\">behavior\u003C/span>: \u003Cspan class=\"hljs-string\">'smooth'\u003C/span>, \u003Cspan class=\"hljs-attr\">block\u003C/span>: \u003Cspan class=\"hljs-string\">'start'\u003C/span> });\n        \n        \u003Cspan class=\"hljs-comment\">// Auto-remove summary after delay\u003C/span>\n        \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (summary.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>) {\n                summary.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>();\n            }\n        }, \u003Cspan class=\"hljs-number\">10000\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getFormData\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> formData = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">FormData\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> data = {};\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> [key, value] \u003Cspan class=\"hljs-keyword\">of\u003C/span> formData.\u003Cspan class=\"hljs-title function_\">entries\u003C/span>()) {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (data[key]) {\n                \u003Cspan class=\"hljs-comment\">// Handle multiple values (checkboxes, etc.)\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">isArray\u003C/span>(data[key])) {\n                    data[key].\u003Cspan class=\"hljs-title function_\">push\u003C/span>(value);\n                } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                    data[key] = [data[key], value];\n                }\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                data[key] = value;\n            }\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> data;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">defaultSubmitHandler\u003C/span>(\u003Cspan class=\"hljs-params\">formData\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Form submitted with data:'\u003C/span>, formData);\n        \n        \u003Cspan class=\"hljs-comment\">// Show success message\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> successMessage = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        successMessage.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'form-success'\u003C/span>;\n        successMessage.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            <h3>Form submitted successfully!</h3>\n            <p>Thank you for your submission. Your data has been processed.</p>\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span>.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(successMessage, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span>.\u003Cspan class=\"hljs-property\">nextSibling\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Reset form\u003C/span>\n        \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span>.\u003Cspan class=\"hljs-title function_\">reset\u003C/span>();\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">clearValidation\u003C/span>();\n            successMessage.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>();\n        }, \u003Cspan class=\"hljs-number\">3000\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">clearValidation\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Clear validation results\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validationResults\u003C/span>.\u003Cspan class=\"hljs-title function_\">clear\u003C/span>();\n        \n        \u003Cspan class=\"hljs-comment\">// Remove error messages\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> errorMessages = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.validation-message'\u003C/span>);\n        errorMessages.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">msg\u003C/span> =>\u003C/span> {\n            msg.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            msg.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'show'\u003C/span>);\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Remove field styling\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> inputs = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'input, select, textarea'\u003C/span>);\n        inputs.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">input\u003C/span> =>\u003C/span> {\n            input.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'field-error'\u003C/span>, \u003Cspan class=\"hljs-string\">'field-valid'\u003C/span>);\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Remove validation summary\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> summary = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.validation-summary'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (summary) {\n            summary.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>();\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setCustomValidator\u003C/span>(\u003Cspan class=\"hljs-params\">fieldName, validator\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">customValidators\u003C/span>[fieldName] = validator;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addFieldValidation\u003C/span>(\u003Cspan class=\"hljs-params\">fieldName, validatorName, constraint\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> field = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">`[name="\u003Cspan class=\"hljs-subst\">${fieldName}\u003C/span>"]`\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (field) {\n            field.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">`data-validate-\u003Cspan class=\"hljs-subst\">${validatorName}\u003C/span>`\u003C/span>, constraint);\n        }\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Enhanced form creation utility\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownFormBuilder\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">formConfig\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">fields\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">validation\u003C/span>: {},\n            \u003Cspan class=\"hljs-attr\">styling\u003C/span>: \u003Cspan class=\"hljs-string\">'default'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">submitHandler\u003C/span>: \u003Cspan class=\"hljs-literal\">null\u003C/span>\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addField\u003C/span>(\u003Cspan class=\"hljs-params\">config\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">formConfig\u003C/span>.\u003Cspan class=\"hljs-property\">fields\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n            \u003Cspan class=\"hljs-attr\">type\u003C/span>: config.\u003Cspan class=\"hljs-property\">type\u003C/span> || \u003Cspan class=\"hljs-string\">'text'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">name\u003C/span>: config.\u003Cspan class=\"hljs-property\">name\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">label\u003C/span>: config.\u003Cspan class=\"hljs-property\">label\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">required\u003C/span>: config.\u003Cspan class=\"hljs-property\">required\u003C/span> || \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">placeholder\u003C/span>: config.\u003Cspan class=\"hljs-property\">placeholder\u003C/span> || \u003Cspan class=\"hljs-string\">''\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">options\u003C/span>: config.\u003Cspan class=\"hljs-property\">options\u003C/span> || [],\n            \u003Cspan class=\"hljs-attr\">validation\u003C/span>: config.\u003Cspan class=\"hljs-property\">validation\u003C/span> || {},\n            \u003Cspan class=\"hljs-attr\">attributes\u003C/span>: config.\u003Cspan class=\"hljs-property\">attributes\u003C/span> || {}\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setValidation\u003C/span>(\u003Cspan class=\"hljs-params\">fieldName, validators\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">formConfig\u003C/span>.\u003Cspan class=\"hljs-property\">validation\u003C/span>[fieldName] = validators;\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setSubmitHandler\u003C/span>(\u003Cspan class=\"hljs-params\">handler\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">formConfig\u003C/span>.\u003Cspan class=\"hljs-property\">submitHandler\u003C/span> = handler;\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateFormHTML\u003C/span>(\u003Cspan class=\"hljs-params\">formId = \u003Cspan class=\"hljs-string\">'dynamic-form'\u003C/span>\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> formHTML = \u003Cspan class=\"hljs-string\">`\n            <form id="\u003Cspan class=\"hljs-subst\">${formId}\u003C/span>" class="markdown-form" method="post" novalidate>\n                \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.formConfig.fields.map(field => \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.generateFieldHTML(field)).join(\u003Cspan class=\"hljs-string\">''\u003C/span>)}\u003C/span>\n                \n                <div class="form-actions">\n                    <button type="submit">Submit</button>\n                    <button type="reset">Reset</button>\n                </div>\n            </form>\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> formHTML;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateFieldHTML\u003C/span>(\u003Cspan class=\"hljs-params\">field\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (field.\u003Cspan class=\"hljs-property\">type\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'text'\u003C/span>:\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'email'\u003C/span>:\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'password'\u003C/span>:\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'url'\u003C/span>:\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'number'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateInputField\u003C/span>(field);\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'select'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateSelectField\u003C/span>(field);\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'textarea'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateTextareaField\u003C/span>(field);\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'checkbox'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateCheckboxField\u003C/span>(field);\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'radio'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateRadioField\u003C/span>(field);\n            \u003Cspan class=\"hljs-attr\">default\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateInputField\u003C/span>(field);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateInputField\u003C/span>(\u003Cspan class=\"hljs-params\">field\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> attributes = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">buildAttributeString\u003C/span>(field);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n            <div class="form-group">\n                <label for="\u003Cspan class=\"hljs-subst\">${field.name}\u003C/span>">\u003Cspan class=\"hljs-subst\">${field.label}\u003C/span>\u003Cspan class=\"hljs-subst\">${field.required ? \u003Cspan class=\"hljs-string\">' *'\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span></label>\n                <input type="\u003Cspan class=\"hljs-subst\">${field.type}\u003C/span>" \n                       id="\u003Cspan class=\"hljs-subst\">${field.name}\u003C/span>" \n                       name="\u003Cspan class=\"hljs-subst\">${field.name}\u003C/span>" \n                       \u003Cspan class=\"hljs-subst\">${attributes}\u003C/span>>\n                <div class="validation-message" id="\u003Cspan class=\"hljs-subst\">${field.name}\u003C/span>-error"></div>\n            </div>\n        `\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateSelectField\u003C/span>(\u003Cspan class=\"hljs-params\">field\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> attributes = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">buildAttributeString\u003C/span>(field);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n            <div class="form-group">\n                <label for="\u003Cspan class=\"hljs-subst\">${field.name}\u003C/span>">\u003Cspan class=\"hljs-subst\">${field.label}\u003C/span>\u003Cspan class=\"hljs-subst\">${field.required ? \u003Cspan class=\"hljs-string\">' *'\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span></label>\n                <select id="\u003Cspan class=\"hljs-subst\">${field.name}\u003C/span>" name="\u003Cspan class=\"hljs-subst\">${field.name}\u003C/span>" \u003Cspan class=\"hljs-subst\">${attributes}\u003C/span>>\n                    <option value="">Select an option</option>\n                    \u003Cspan class=\"hljs-subst\">${field.options.map(option => \n                        \u003Cspan class=\"hljs-string\">`<option value="\u003Cspan class=\"hljs-subst\">${option.value}\u003C/span>">\u003Cspan class=\"hljs-subst\">${option.label}\u003C/span></option>`\u003C/span>\n                    ).join(\u003Cspan class=\"hljs-string\">''\u003C/span>)}\u003C/span>\n                </select>\n                <div class="validation-message" id="\u003Cspan class=\"hljs-subst\">${field.name}\u003C/span>-error"></div>\n            </div>\n        `\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateTextareaField\u003C/span>(\u003Cspan class=\"hljs-params\">field\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> attributes = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">buildAttributeString\u003C/span>(field);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n            <div class="form-group">\n                <label for="\u003Cspan class=\"hljs-subst\">${field.name}\u003C/span>">\u003Cspan class=\"hljs-subst\">${field.label}\u003C/span>\u003Cspan class=\"hljs-subst\">${field.required ? \u003Cspan class=\"hljs-string\">' *'\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span></label>\n                <textarea id="\u003Cspan class=\"hljs-subst\">${field.name}\u003C/span>" \n                          name="\u003Cspan class=\"hljs-subst\">${field.name}\u003C/span>" \n                          rows="\u003Cspan class=\"hljs-subst\">${field.rows || \u003Cspan class=\"hljs-number\">4\u003C/span>}\u003C/span>" \n                          \u003Cspan class=\"hljs-subst\">${attributes}\u003C/span>></textarea>\n                <div class="validation-message" id="\u003Cspan class=\"hljs-subst\">${field.name}\u003C/span>-error"></div>\n            </div>\n        `\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateCheckboxField\u003C/span>(\u003Cspan class=\"hljs-params\">field\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (field.\u003Cspan class=\"hljs-property\">options\u003C/span> && field.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n                <div class="form-group">\n                    <fieldset>\n                        <legend>\u003Cspan class=\"hljs-subst\">${field.label}\u003C/span>\u003Cspan class=\"hljs-subst\">${field.required ? \u003Cspan class=\"hljs-string\">' *'\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span></legend>\n                        \u003Cspan class=\"hljs-subst\">${field.options.map(option => \u003Cspan class=\"hljs-string\">`\n                            <label class="checkbox-label">\n                                <input type="checkbox" name="\u003Cspan class=\"hljs-subst\">${field.name}\u003C/span>" value="\u003Cspan class=\"hljs-subst\">${option.value}\u003C/span>">\n                                \u003Cspan class=\"hljs-subst\">${option.label}\u003C/span>\n                            </label>\n                        `\u003C/span>).join(\u003Cspan class=\"hljs-string\">''\u003C/span>)}\u003C/span>\n                    </fieldset>\n                </div>\n            `\u003C/span>;\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n                <div class="form-group">\n                    <label class="checkbox-label">\n                        <input type="checkbox" id="\u003Cspan class=\"hljs-subst\">${field.name}\u003C/span>" name="\u003Cspan class=\"hljs-subst\">${field.name}\u003C/span>" value="1">\n                        \u003Cspan class=\"hljs-subst\">${field.label}\u003C/span>\n                    </label>\n                </div>\n            `\u003C/span>;\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateRadioField\u003C/span>(\u003Cspan class=\"hljs-params\">field\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n            <div class="form-group">\n                <fieldset>\n                    <legend>\u003Cspan class=\"hljs-subst\">${field.label}\u003C/span>\u003Cspan class=\"hljs-subst\">${field.required ? \u003Cspan class=\"hljs-string\">' *'\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span></legend>\n                    \u003Cspan class=\"hljs-subst\">${field.options.map(option => \u003Cspan class=\"hljs-string\">`\n                        <label class="radio-label">\n                            <input type="radio" name="\u003Cspan class=\"hljs-subst\">${field.name}\u003C/span>" value="\u003Cspan class=\"hljs-subst\">${option.value}\u003C/span>">\n                            \u003Cspan class=\"hljs-subst\">${option.label}\u003C/span>\n                        </label>\n                    `\u003C/span>).join(\u003Cspan class=\"hljs-string\">''\u003C/span>)}\u003C/span>\n                </fieldset>\n            </div>\n        `\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">buildAttributeString\u003C/span>(\u003Cspan class=\"hljs-params\">field\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> attributes = [];\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (field.\u003Cspan class=\"hljs-property\">required\u003C/span>) {\n            attributes.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'required'\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (field.\u003Cspan class=\"hljs-property\">placeholder\u003C/span>) {\n            attributes.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`placeholder="\u003Cspan class=\"hljs-subst\">${field.placeholder}\u003C/span>"`\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Add validation attributes\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (field.\u003Cspan class=\"hljs-property\">validation\u003C/span>) {\n            \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">entries\u003C/span>(field.\u003Cspan class=\"hljs-property\">validation\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">[validator, constraint]\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (validator === \u003Cspan class=\"hljs-string\">'minLength'\u003C/span>) {\n                    attributes.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`minlength="\u003Cspan class=\"hljs-subst\">${constraint}\u003C/span>"`\u003C/span>);\n                } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (validator === \u003Cspan class=\"hljs-string\">'maxLength'\u003C/span>) {\n                    attributes.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`maxlength="\u003Cspan class=\"hljs-subst\">${constraint}\u003C/span>"`\u003C/span>);\n                } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (validator === \u003Cspan class=\"hljs-string\">'pattern'\u003C/span>) {\n                    attributes.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`pattern="\u003Cspan class=\"hljs-subst\">${constraint}\u003C/span>"`\u003C/span>);\n                } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (validator === \u003Cspan class=\"hljs-string\">'min'\u003C/span>) {\n                    attributes.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`min="\u003Cspan class=\"hljs-subst\">${constraint}\u003C/span>"`\u003C/span>);\n                } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (validator === \u003Cspan class=\"hljs-string\">'max'\u003C/span>) {\n                    attributes.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`max="\u003Cspan class=\"hljs-subst\">${constraint}\u003C/span>"`\u003C/span>);\n                } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                    attributes.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`data-validate-\u003Cspan class=\"hljs-subst\">${validator}\u003C/span>="\u003Cspan class=\"hljs-subst\">${constraint}\u003C/span>"`\u003C/span>);\n                }\n            });\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Add custom attributes\u003C/span>\n        \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">entries\u003C/span>(field.\u003Cspan class=\"hljs-property\">attributes\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">[attr, value]\u003C/span>) =>\u003C/span> {\n            attributes.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${attr}\u003C/span>="\u003Cspan class=\"hljs-subst\">${value}\u003C/span>"`\u003C/span>);\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> attributes.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">' '\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">initializeForm\u003C/span>(\u003Cspan class=\"hljs-params\">containerId\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> container = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(containerId);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!container) {\n            \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">error\u003C/span>(\u003Cspan class=\"hljs-string\">`Container with ID '\u003Cspan class=\"hljs-subst\">${containerId}\u003C/span>' not found`\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Generate and insert form HTML\u003C/span>\n        container.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateFormHTML\u003C/span>();\n        \n        \u003Cspan class=\"hljs-comment\">// Initialize validator\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> form = container.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'form'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> validator = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownFormValidator\u003C/span>(form, {\n            \u003Cspan class=\"hljs-attr\">validateOnInput\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">validateOnBlur\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">showInlineErrors\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">customValidators\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">formConfig\u003C/span>.\u003Cspan class=\"hljs-property\">validation\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">onSubmit\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">formConfig\u003C/span>.\u003Cspan class=\"hljs-property\">submitHandler\u003C/span>\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> validator;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Usage example\u003C/span>\n\u003Cspan class=\"hljs-keyword\">function\u003C/span> \u003Cspan class=\"hljs-title function_\">createInteractiveForm\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> formBuilder = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownFormBuilder\u003C/span>();\n    \n    formBuilder\n        .\u003Cspan class=\"hljs-title function_\">addField\u003C/span>({\n            \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'text'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">name\u003C/span>: \u003Cspan class=\"hljs-string\">'fullName'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">label\u003C/span>: \u003Cspan class=\"hljs-string\">'Full Name'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">required\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">placeholder\u003C/span>: \u003Cspan class=\"hljs-string\">'Enter your full name'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">validation\u003C/span>: {\n                \u003Cspan class=\"hljs-attr\">minLength\u003C/span>: \u003Cspan class=\"hljs-number\">2\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">maxLength\u003C/span>: \u003Cspan class=\"hljs-number\">50\u003C/span>\n            }\n        })\n        .\u003Cspan class=\"hljs-title function_\">addField\u003C/span>({\n            \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'email'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">name\u003C/span>: \u003Cspan class=\"hljs-string\">'email'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">label\u003C/span>: \u003Cspan class=\"hljs-string\">'Email Address'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">required\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">placeholder\u003C/span>: \u003Cspan class=\"hljs-string\">'your.email@example.com'\u003C/span>\n        })\n        .\u003Cspan class=\"hljs-title function_\">addField\u003C/span>({\n            \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'select'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">name\u003C/span>: \u003Cspan class=\"hljs-string\">'country'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">label\u003C/span>: \u003Cspan class=\"hljs-string\">'Country'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">required\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">options\u003C/span>: [\n                { \u003Cspan class=\"hljs-attr\">value\u003C/span>: \u003Cspan class=\"hljs-string\">'us'\u003C/span>, \u003Cspan class=\"hljs-attr\">label\u003C/span>: \u003Cspan class=\"hljs-string\">'United States'\u003C/span> },\n                { \u003Cspan class=\"hljs-attr\">value\u003C/span>: \u003Cspan class=\"hljs-string\">'ca'\u003C/span>, \u003Cspan class=\"hljs-attr\">label\u003C/span>: \u003Cspan class=\"hljs-string\">'Canada'\u003C/span> },\n                { \u003Cspan class=\"hljs-attr\">value\u003C/span>: \u003Cspan class=\"hljs-string\">'uk'\u003C/span>, \u003Cspan class=\"hljs-attr\">label\u003C/span>: \u003Cspan class=\"hljs-string\">'United Kingdom'\u003C/span> },\n                { \u003Cspan class=\"hljs-attr\">value\u003C/span>: \u003Cspan class=\"hljs-string\">'au'\u003C/span>, \u003Cspan class=\"hljs-attr\">label\u003C/span>: \u003Cspan class=\"hljs-string\">'Australia'\u003C/span> },\n                { \u003Cspan class=\"hljs-attr\">value\u003C/span>: \u003Cspan class=\"hljs-string\">'other'\u003C/span>, \u003Cspan class=\"hljs-attr\">label\u003C/span>: \u003Cspan class=\"hljs-string\">'Other'\u003C/span> }\n            ]\n        })\n        .\u003Cspan class=\"hljs-title function_\">addField\u003C/span>({\n            \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'checkbox'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">name\u003C/span>: \u003Cspan class=\"hljs-string\">'interests'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">label\u003C/span>: \u003Cspan class=\"hljs-string\">'Areas of Interest'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">options\u003C/span>: [\n                { \u003Cspan class=\"hljs-attr\">value\u003C/span>: \u003Cspan class=\"hljs-string\">'web-dev'\u003C/span>, \u003Cspan class=\"hljs-attr\">label\u003C/span>: \u003Cspan class=\"hljs-string\">'Web Development'\u003C/span> },\n                { \u003Cspan class=\"hljs-attr\">value\u003C/span>: \u003Cspan class=\"hljs-string\">'mobile-dev'\u003C/span>, \u003Cspan class=\"hljs-attr\">label\u003C/span>: \u003Cspan class=\"hljs-string\">'Mobile Development'\u003C/span> },\n                { \u003Cspan class=\"hljs-attr\">value\u003C/span>: \u003Cspan class=\"hljs-string\">'data-science'\u003C/span>, \u003Cspan class=\"hljs-attr\">label\u003C/span>: \u003Cspan class=\"hljs-string\">'Data Science'\u003C/span> },\n                { \u003Cspan class=\"hljs-attr\">value\u003C/span>: \u003Cspan class=\"hljs-string\">'devops'\u003C/span>, \u003Cspan class=\"hljs-attr\">label\u003C/span>: \u003Cspan class=\"hljs-string\">'DevOps'\u003C/span> }\n            ]\n        })\n        .\u003Cspan class=\"hljs-title function_\">addField\u003C/span>({\n            \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'textarea'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">name\u003C/span>: \u003Cspan class=\"hljs-string\">'message'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">label\u003C/span>: \u003Cspan class=\"hljs-string\">'Tell us about yourself'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">placeholder\u003C/span>: \u003Cspan class=\"hljs-string\">'Share your background and goals...'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">rows\u003C/span>: \u003Cspan class=\"hljs-number\">5\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">validation\u003C/span>: {\n                \u003Cspan class=\"hljs-attr\">maxLength\u003C/span>: \u003Cspan class=\"hljs-number\">1000\u003C/span>\n            }\n        })\n        .\u003Cspan class=\"hljs-title function_\">setSubmitHandler\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">formData, form\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Custom submit handler:'\u003C/span>, formData);\n            \n            \u003Cspan class=\"hljs-comment\">// Simulate API call\u003C/span>\n            \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                \u003Cspan class=\"hljs-title function_\">alert\u003C/span>(\u003Cspan class=\"hljs-string\">'Form submitted successfully! Check console for data.'\u003C/span>);\n            }, \u003Cspan class=\"hljs-number\">1000\u003C/span>);\n        });\n    \n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> formBuilder;\n}\n\n\u003Cspan class=\"hljs-variable language_\">module\u003C/span>.\u003Cspan class=\"hljs-property\">exports\u003C/span> = { \u003Cspan class=\"hljs-title class_\">MarkdownFormValidator\u003C/span>, \u003Cspan class=\"hljs-title class_\">MarkdownFormBuilder\u003C/span> };\n\u003C/code>\u003C/pre>\u003Ch2 id=\"advanced-form-components-and-patterns\">Advanced Form Components and Patterns\u003C/h2>\n\u003Ch3 id=\"dynamic-form-generation\">Dynamic Form Generation\u003C/h3>\n\u003Cp>Creating forms that adapt based on user selections and content context:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// dynamic-form-generator.js - Context-aware form generation\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">DynamicFormGenerator\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">options = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">apiEndpoint\u003C/span>: options.\u003Cspan class=\"hljs-property\">apiEndpoint\u003C/span> || \u003Cspan class=\"hljs-string\">'/api/forms'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableConditionalFields\u003C/span>: options.\u003Cspan class=\"hljs-property\">enableConditionalFields\u003C/span> !== \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableProgressTracking\u003C/span>: options.\u003Cspan class=\"hljs-property\">enableProgressTracking\u003C/span> || \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">autoSave\u003C/span>: options.\u003Cspan class=\"hljs-property\">autoSave\u003C/span> || \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">autoSaveInterval\u003C/span>: options.\u003Cspan class=\"hljs-property\">autoSaveInterval\u003C/span> || \u003Cspan class=\"hljs-number\">30000\u003C/span>,\n            ...options\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">formSchema\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentValues\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">conditionalRules\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">progressTracker\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">autoSaveTimer\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">loadFormSchema\u003C/span>(\u003Cspan class=\"hljs-params\">schemaUrl\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> response = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-title function_\">fetch\u003C/span>(schemaUrl);\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">formSchema\u003C/span> = \u003Cspan class=\"hljs-keyword\">await\u003C/span> response.\u003Cspan class=\"hljs-title function_\">json\u003C/span>();\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">formSchema\u003C/span>.\u003Cspan class=\"hljs-property\">conditionalRules\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupConditionalRules\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">formSchema\u003C/span>.\u003Cspan class=\"hljs-property\">conditionalRules\u003C/span>);\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">formSchema\u003C/span>;\n        } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n            \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">error\u003C/span>(\u003Cspan class=\"hljs-string\">'Failed to load form schema:'\u003C/span>, error);\n            \u003Cspan class=\"hljs-keyword\">throw\u003C/span> error;\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupConditionalRules\u003C/span>(\u003Cspan class=\"hljs-params\">rules\u003C/span>) {\n        rules.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">rule\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">conditionalRules\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(rule.\u003Cspan class=\"hljs-property\">triggerField\u003C/span>, {\n                \u003Cspan class=\"hljs-attr\">conditions\u003C/span>: rule.\u003Cspan class=\"hljs-property\">conditions\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">actions\u003C/span>: rule.\u003Cspan class=\"hljs-property\">actions\u003C/span>\n            });\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateForm\u003C/span>(\u003Cspan class=\"hljs-params\">containerId, schema = \u003Cspan class=\"hljs-literal\">null\u003C/span>\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> formSchema = schema || \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">formSchema\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!formSchema) {\n            \u003Cspan class=\"hljs-keyword\">throw\u003C/span> \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Error\u003C/span>(\u003Cspan class=\"hljs-string\">'No form schema available'\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> container = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(containerId);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!container) {\n            \u003Cspan class=\"hljs-keyword\">throw\u003C/span> \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Error\u003C/span>(\u003Cspan class=\"hljs-string\">`Container '\u003Cspan class=\"hljs-subst\">${containerId}\u003C/span>' not found`\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> formHTML = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">buildFormHTML\u003C/span>(formSchema);\n        container.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = formHTML;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> form = container.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'form'\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">bindFormEvents\u003C/span>(form);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">enableProgressTracking\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">initProgressTracker\u003C/span>(form);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">autoSave\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">initAutoSave\u003C/span>(form);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> form;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">buildFormHTML\u003C/span>(\u003Cspan class=\"hljs-params\">schema\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n            <form id="\u003Cspan class=\"hljs-subst\">${schema.id}\u003C/span>" class="dynamic-form" method="post" novalidate>\n                \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.enableProgressTracking ? \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.buildProgressBar() : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>\n                \n                <div class="form-content">\n                    \u003Cspan class=\"hljs-subst\">${schema.sections ? \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.buildSections(schema.sections) : \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.buildFields(schema.fields)}\u003C/span>\n                </div>\n                \n                <div class="form-actions">\n                    \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.buildFormActions(schema.actions || [])}\u003C/span>\n                </div>\n            </form>\n        `\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">buildProgressBar\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n            <div class="form-progress">\n                <div class="progress-bar">\n                    <div class="progress-fill" style="width: 0%"></div>\n                </div>\n                <div class="progress-text">0% Complete</div>\n            </div>\n        `\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">buildSections\u003C/span>(\u003Cspan class=\"hljs-params\">sections\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> sections.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">section\u003C/span> =>\u003C/span> \u003Cspan class=\"hljs-string\">`\n            <fieldset class="form-section" data-section="\u003Cspan class=\"hljs-subst\">${section.id}\u003C/span>">\n                <legend>\u003Cspan class=\"hljs-subst\">${section.title}\u003C/span></legend>\n                \u003Cspan class=\"hljs-subst\">${section.description ? \u003Cspan class=\"hljs-string\">`<p class="section-description">\u003Cspan class=\"hljs-subst\">${section.description}\u003C/span></p>`\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>\n                \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.buildFields(section.fields)}\u003C/span>\n            </fieldset>\n        `\u003C/span>).\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">''\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">buildFields\u003C/span>(\u003Cspan class=\"hljs-params\">fields\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> fields.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">field\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> fieldHTML = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">buildField\u003C/span>(field);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> conditionalAttrs = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getConditionalAttributes\u003C/span>(field);\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n                <div class="form-group" data-field="\u003Cspan class=\"hljs-subst\">${field.name}\u003C/span>" \u003Cspan class=\"hljs-subst\">${conditionalAttrs}\u003C/span>>\n                    \u003Cspan class=\"hljs-subst\">${fieldHTML}\u003C/span>\n                </div>\n            `\u003C/span>;\n        }).\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">''\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">buildField\u003C/span>(\u003Cspan class=\"hljs-params\">field\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (field.\u003Cspan class=\"hljs-property\">type\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'text'\u003C/span>:\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'email'\u003C/span>:\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'password'\u003C/span>:\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'number'\u003C/span>:\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'url'\u003C/span>:\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'tel'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">buildInputField\u003C/span>(field);\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'textarea'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">buildTextareaField\u003C/span>(field);\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'select'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">buildSelectField\u003C/span>(field);\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'radio'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">buildRadioField\u003C/span>(field);\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'checkbox'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">buildCheckboxField\u003C/span>(field);\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'file'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">buildFileField\u003C/span>(field);\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'date'\u003C/span>:\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'datetime-local'\u003C/span>:\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'time'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">buildDateTimeField\u003C/span>(field);\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'range'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">buildRangeField\u003C/span>(field);\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'color'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">buildColorField\u003C/span>(field);\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'custom'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">buildCustomField\u003C/span>(field);\n            \u003Cspan class=\"hljs-attr\">default\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">buildInputField\u003C/span>(field);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">buildInputField\u003C/span>(\u003Cspan class=\"hljs-params\">field\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> attributes = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">buildAttributes\u003C/span>(field);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n            <label for="\u003Cspan class=\"hljs-subst\">${field.name}\u003C/span>">\u003Cspan class=\"hljs-subst\">${field.label}\u003C/span>\u003Cspan class=\"hljs-subst\">${field.required ? \u003Cspan class=\"hljs-string\">' *'\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span></label>\n            \u003Cspan class=\"hljs-subst\">${field.description ? \u003Cspan class=\"hljs-string\">`<p class="field-description">\u003Cspan class=\"hljs-subst\">${field.description}\u003C/span></p>`\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>\n            <input type="\u003Cspan class=\"hljs-subst\">${field.type}\u003C/span>" \n                   id="\u003Cspan class=\"hljs-subst\">${field.name}\u003C/span>" \n                   name="\u003Cspan class=\"hljs-subst\">${field.name}\u003C/span>" \n                   \u003Cspan class=\"hljs-subst\">${attributes}\u003C/span>>\n            <div class="validation-message" id="\u003Cspan class=\"hljs-subst\">${field.name}\u003C/span>-error"></div>\n        `\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">buildSelectField\u003C/span>(\u003Cspan class=\"hljs-params\">field\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> attributes = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">buildAttributes\u003C/span>(field);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> options = field.\u003Cspan class=\"hljs-property\">options\u003C/span> || [];\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n            <label for="\u003Cspan class=\"hljs-subst\">${field.name}\u003C/span>">\u003Cspan class=\"hljs-subst\">${field.label}\u003C/span>\u003Cspan class=\"hljs-subst\">${field.required ? \u003Cspan class=\"hljs-string\">' *'\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span></label>\n            \u003Cspan class=\"hljs-subst\">${field.description ? \u003Cspan class=\"hljs-string\">`<p class="field-description">\u003Cspan class=\"hljs-subst\">${field.description}\u003C/span></p>`\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>\n            <select id="\u003Cspan class=\"hljs-subst\">${field.name}\u003C/span>" name="\u003Cspan class=\"hljs-subst\">${field.name}\u003C/span>" \u003Cspan class=\"hljs-subst\">${attributes}\u003C/span>>\n                \u003Cspan class=\"hljs-subst\">${field.allowEmpty !== \u003Cspan class=\"hljs-literal\">false\u003C/span> ? \u003Cspan class=\"hljs-string\">'<option value="">Select an option</option>'\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>\n                \u003Cspan class=\"hljs-subst\">${options.map(option => \u003Cspan class=\"hljs-string\">`\n                    <option value="\u003Cspan class=\"hljs-subst\">${option.value}\u003C/span>" \u003Cspan class=\"hljs-subst\">${option.selected ? \u003Cspan class=\"hljs-string\">'selected'\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>>\n                        \u003Cspan class=\"hljs-subst\">${option.label}\u003C/span>\n                    </option>\n                `\u003C/span>).join(\u003Cspan class=\"hljs-string\">''\u003C/span>)}\u003C/span>\n            </select>\n            <div class="validation-message" id="\u003Cspan class=\"hljs-subst\">${field.name}\u003C/span>-error"></div>\n        `\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">buildCheckboxField\u003C/span>(\u003Cspan class=\"hljs-params\">field\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (field.\u003Cspan class=\"hljs-property\">options\u003C/span> && field.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n                <fieldset>\n                    <legend>\u003Cspan class=\"hljs-subst\">${field.label}\u003C/span>\u003Cspan class=\"hljs-subst\">${field.required ? \u003Cspan class=\"hljs-string\">' *'\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span></legend>\n                    \u003Cspan class=\"hljs-subst\">${field.description ? \u003Cspan class=\"hljs-string\">`<p class="field-description">\u003Cspan class=\"hljs-subst\">${field.description}\u003C/span></p>`\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>\n                    \u003Cspan class=\"hljs-subst\">${field.options.map(option => \u003Cspan class=\"hljs-string\">`\n                        <label class="checkbox-option">\n                            <input type="checkbox" \n                                   name="\u003Cspan class=\"hljs-subst\">${field.name}\u003C/span>" \n                                   value="\u003Cspan class=\"hljs-subst\">${option.value}\u003C/span>"\n                                   \u003Cspan class=\"hljs-subst\">${option.checked ? \u003Cspan class=\"hljs-string\">'checked'\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>\n                                   \u003Cspan class=\"hljs-subst\">${field.required ? \u003Cspan class=\"hljs-string\">'required'\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>>\n                            <span class="checkbox-label">\u003Cspan class=\"hljs-subst\">${option.label}\u003C/span></span>\n                        </label>\n                    `\u003C/span>).join(\u003Cspan class=\"hljs-string\">''\u003C/span>)}\u003C/span>\n                </fieldset>\n                <div class="validation-message" id="\u003Cspan class=\"hljs-subst\">${field.name}\u003C/span>-error"></div>\n            `\u003C/span>;\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n                <label class="checkbox-single">\n                    <input type="checkbox" \n                           id="\u003Cspan class=\"hljs-subst\">${field.name}\u003C/span>" \n                           name="\u003Cspan class=\"hljs-subst\">${field.name}\u003C/span>" \n                           value="1"\n                           \u003Cspan class=\"hljs-subst\">${field.checked ? \u003Cspan class=\"hljs-string\">'checked'\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>\n                           \u003Cspan class=\"hljs-subst\">${field.required ? \u003Cspan class=\"hljs-string\">'required'\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>>\n                    <span class="checkbox-label">\u003Cspan class=\"hljs-subst\">${field.label}\u003C/span>\u003Cspan class=\"hljs-subst\">${field.required ? \u003Cspan class=\"hljs-string\">' *'\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span></span>\n                </label>\n                \u003Cspan class=\"hljs-subst\">${field.description ? \u003Cspan class=\"hljs-string\">`<p class="field-description">\u003Cspan class=\"hljs-subst\">${field.description}\u003C/span></p>`\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>\n                <div class="validation-message" id="\u003Cspan class=\"hljs-subst\">${field.name}\u003C/span>-error"></div>\n            `\u003C/span>;\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">buildFileField\u003C/span>(\u003Cspan class=\"hljs-params\">field\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> attributes = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">buildAttributes\u003C/span>(field);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n            <label for="\u003Cspan class=\"hljs-subst\">${field.name}\u003C/span>">\u003Cspan class=\"hljs-subst\">${field.label}\u003C/span>\u003Cspan class=\"hljs-subst\">${field.required ? \u003Cspan class=\"hljs-string\">' *'\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span></label>\n            \u003Cspan class=\"hljs-subst\">${field.description ? \u003Cspan class=\"hljs-string\">`<p class="field-description">\u003Cspan class=\"hljs-subst\">${field.description}\u003C/span></p>`\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>\n            <div class="file-input-container">\n                <input type="file" \n                       id="\u003Cspan class=\"hljs-subst\">${field.name}\u003C/span>" \n                       name="\u003Cspan class=\"hljs-subst\">${field.name}\u003C/span>" \n                       \u003Cspan class=\"hljs-subst\">${attributes}\u003C/span>>\n                <div class="file-input-display">\n                    <span class="file-input-button">Choose File</span>\n                    <span class="file-input-text">No file selected</span>\n                </div>\n            </div>\n            \u003Cspan class=\"hljs-subst\">${field.maxSize ? \u003Cspan class=\"hljs-string\">`<p class="file-size-limit">Maximum file size: \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.formatFileSize(field.maxSize)}\u003C/span></p>`\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>\n            <div class="validation-message" id="\u003Cspan class=\"hljs-subst\">${field.name}\u003C/span>-error"></div>\n        `\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">buildRangeField\u003C/span>(\u003Cspan class=\"hljs-params\">field\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> attributes = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">buildAttributes\u003C/span>(field);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n            <label for="\u003Cspan class=\"hljs-subst\">${field.name}\u003C/span>">\u003Cspan class=\"hljs-subst\">${field.label}\u003C/span>\u003Cspan class=\"hljs-subst\">${field.required ? \u003Cspan class=\"hljs-string\">' *'\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span></label>\n            \u003Cspan class=\"hljs-subst\">${field.description ? \u003Cspan class=\"hljs-string\">`<p class="field-description">\u003Cspan class=\"hljs-subst\">${field.description}\u003C/span></p>`\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>\n            <div class="range-input-container">\n                <input type="range" \n                       id="\u003Cspan class=\"hljs-subst\">${field.name}\u003C/span>" \n                       name="\u003Cspan class=\"hljs-subst\">${field.name}\u003C/span>" \n                       \u003Cspan class=\"hljs-subst\">${attributes}\u003C/span>>\n                <div class="range-value-display">\n                    <span class="range-min">\u003Cspan class=\"hljs-subst\">${field.min || \u003Cspan class=\"hljs-number\">0\u003C/span>}\u003C/span></span>\n                    <span class="range-current">\u003Cspan class=\"hljs-subst\">${field.value || field.min || \u003Cspan class=\"hljs-number\">0\u003C/span>}\u003C/span></span>\n                    <span class="range-max">\u003Cspan class=\"hljs-subst\">${field.max || \u003Cspan class=\"hljs-number\">100\u003C/span>}\u003C/span></span>\n                </div>\n            </div>\n            <div class="validation-message" id="\u003Cspan class=\"hljs-subst\">${field.name}\u003C/span>-error"></div>\n        `\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">buildAttributes\u003C/span>(\u003Cspan class=\"hljs-params\">field\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> attributes = [];\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (field.\u003Cspan class=\"hljs-property\">required\u003C/span>) attributes.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'required'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (field.\u003Cspan class=\"hljs-property\">placeholder\u003C/span>) attributes.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`placeholder="\u003Cspan class=\"hljs-subst\">${field.placeholder}\u003C/span>"`\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (field.\u003Cspan class=\"hljs-property\">min\u003C/span> !== \u003Cspan class=\"hljs-literal\">undefined\u003C/span>) attributes.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`min="\u003Cspan class=\"hljs-subst\">${field.min}\u003C/span>"`\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (field.\u003Cspan class=\"hljs-property\">max\u003C/span> !== \u003Cspan class=\"hljs-literal\">undefined\u003C/span>) attributes.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`max="\u003Cspan class=\"hljs-subst\">${field.max}\u003C/span>"`\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (field.\u003Cspan class=\"hljs-property\">step\u003C/span> !== \u003Cspan class=\"hljs-literal\">undefined\u003C/span>) attributes.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`step="\u003Cspan class=\"hljs-subst\">${field.step}\u003C/span>"`\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (field.\u003Cspan class=\"hljs-property\">minlength\u003C/span> !== \u003Cspan class=\"hljs-literal\">undefined\u003C/span>) attributes.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`minlength="\u003Cspan class=\"hljs-subst\">${field.minlength}\u003C/span>"`\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (field.\u003Cspan class=\"hljs-property\">maxlength\u003C/span> !== \u003Cspan class=\"hljs-literal\">undefined\u003C/span>) attributes.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`maxlength="\u003Cspan class=\"hljs-subst\">${field.maxlength}\u003C/span>"`\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (field.\u003Cspan class=\"hljs-property\">pattern\u003C/span>) attributes.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`pattern="\u003Cspan class=\"hljs-subst\">${field.pattern}\u003C/span>"`\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (field.\u003Cspan class=\"hljs-property\">accept\u003C/span>) attributes.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`accept="\u003Cspan class=\"hljs-subst\">${field.accept}\u003C/span>"`\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (field.\u003Cspan class=\"hljs-property\">multiple\u003C/span>) attributes.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'multiple'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (field.\u003Cspan class=\"hljs-property\">readonly\u003C/span>) attributes.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'readonly'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (field.\u003Cspan class=\"hljs-property\">disabled\u003C/span>) attributes.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'disabled'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Add data attributes for validation\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (field.\u003Cspan class=\"hljs-property\">validation\u003C/span>) {\n            \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">entries\u003C/span>(field.\u003Cspan class=\"hljs-property\">validation\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">[validator, constraint]\u003C/span>) =>\u003C/span> {\n                attributes.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`data-validate-\u003Cspan class=\"hljs-subst\">${validator}\u003C/span>="\u003Cspan class=\"hljs-subst\">${constraint}\u003C/span>"`\u003C/span>);\n            });\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Add custom attributes\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (field.\u003Cspan class=\"hljs-property\">attributes\u003C/span>) {\n            \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">entries\u003C/span>(field.\u003Cspan class=\"hljs-property\">attributes\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">[attr, value]\u003C/span>) =>\u003C/span> {\n                attributes.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${attr}\u003C/span>="\u003Cspan class=\"hljs-subst\">${value}\u003C/span>"`\u003C/span>);\n            });\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> attributes.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">' '\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getConditionalAttributes\u003C/span>(\u003Cspan class=\"hljs-params\">field\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!field.\u003Cspan class=\"hljs-property\">conditional\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> conditions = field.\u003Cspan class=\"hljs-property\">conditional\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> attrs = [];\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (conditions.\u003Cspan class=\"hljs-property\">dependsOn\u003C/span>) {\n            attrs.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`data-depends-on="\u003Cspan class=\"hljs-subst\">${conditions.dependsOn}\u003C/span>"`\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (conditions.\u003Cspan class=\"hljs-property\">showWhen\u003C/span>) {\n            attrs.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`data-show-when="\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-built_in\">JSON\u003C/span>.stringify(conditions.showWhen).replace(/\u003Cspan class=\"hljs-string\">"/g, '"')}"\u003C/span>\u003Cspan class=\"hljs-string\">`);\n        }\n        \n        if (conditions.hideWhen) {\n            attrs.push(`\u003C/span>data-hide-when=\u003Cspan class=\"hljs-string\">"${JSON.stringify(conditions.hideWhen).replace(/"\u003C/span>/g, \u003Cspan class=\"hljs-string\">'"'\u003C/span>)}\u003C/span>"`\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Initially hide conditional fields if needed\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (conditions.\u003Cspan class=\"hljs-property\">initiallyHidden\u003C/span> !== \u003Cspan class=\"hljs-literal\">false\u003C/span>) {\n            attrs.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'style="display: none;"'\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> attrs.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">' '\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">bindFormEvents\u003C/span>(\u003Cspan class=\"hljs-params\">form\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Bind validation events\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> validator = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownFormValidator\u003C/span>(form, {\n            \u003Cspan class=\"hljs-attr\">validateOnInput\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">validateOnBlur\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">showInlineErrors\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">onValidationChange\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">handleValidationChange\u003C/span>.\u003Cspan class=\"hljs-title function_\">bind\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>),\n            \u003Cspan class=\"hljs-attr\">onSubmit\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">handleFormSubmit\u003C/span>.\u003Cspan class=\"hljs-title function_\">bind\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>)\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Bind conditional field events\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">enableConditionalFields\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">bindConditionalEvents\u003C/span>(form);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Bind file input events\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> fileInputs = form.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'input[type="file"]'\u003C/span>);\n        fileInputs.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">input\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">bindFileInputEvents\u003C/span>(input);\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Bind range input events\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rangeInputs = form.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'input[type="range"]'\u003C/span>);\n        rangeInputs.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">input\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">bindRangeInputEvents\u003C/span>(input);\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">bindConditionalEvents\u003C/span>(\u003Cspan class=\"hljs-params\">form\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> conditionalFields = form.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'[data-depends-on]'\u003C/span>);\n        \n        conditionalFields.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">field\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> dependsOn = field.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-depends-on'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> triggerField = form.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">`[name="\u003Cspan class=\"hljs-subst\">${dependsOn}\u003C/span>"]`\u003C/span>);\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (triggerField) {\n                [\u003Cspan class=\"hljs-string\">'change'\u003C/span>, \u003Cspan class=\"hljs-string\">'input'\u003C/span>].\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">eventType\u003C/span> =>\u003C/span> {\n                    triggerField.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(eventType, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.evaluateConditionalField(field, triggerField);\n                    });\n                });\n                \n                \u003Cspan class=\"hljs-comment\">// Initial evaluation\u003C/span>\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.evaluateConditionalField(field, triggerField);\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">evaluateConditionalField\u003C/span>(\u003Cspan class=\"hljs-params\">field, triggerField\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> showWhenData = field.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-show-when'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> hideWhenData = field.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-hide-when'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> shouldShow = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (showWhenData) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> showConditions = \u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">parse\u003C/span>(showWhenData.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/"/g\u003C/span>, \u003Cspan class=\"hljs-string\">'"'\u003C/span>));\n            shouldShow = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.evaluateConditions(triggerField, showConditions);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (hideWhenData) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> hideConditions = \u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">parse\u003C/span>(hideWhenData.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/"/g\u003C/span>, \u003Cspan class=\"hljs-string\">'"'\u003C/span>));\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> shouldHide = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.evaluateConditions(triggerField, hideConditions);\n            shouldShow = shouldShow && !shouldHide;\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Show/hide field with animation\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (shouldShow) {\n            field.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            field.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'field-show'\u003C/span>);\n            field.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'field-hide'\u003C/span>);\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            field.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n            field.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'field-hide'\u003C/span>);\n            field.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'field-show'\u003C/span>);\n            \n            \u003Cspan class=\"hljs-comment\">// Clear field value when hidden\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> inputs = field.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'input, select, textarea'\u003C/span>);\n            inputs.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">input\u003C/span> =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (input.\u003Cspan class=\"hljs-property\">type\u003C/span> === \u003Cspan class=\"hljs-string\">'checkbox'\u003C/span> || input.\u003Cspan class=\"hljs-property\">type\u003C/span> === \u003Cspan class=\"hljs-string\">'radio'\u003C/span>) {\n                    input.\u003Cspan class=\"hljs-property\">checked\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n                } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                    input.\u003Cspan class=\"hljs-property\">value\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n                }\n            });\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">evaluateConditions\u003C/span>(\u003Cspan class=\"hljs-params\">triggerField, conditions\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> value = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getFieldValue\u003C/span>(triggerField);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (conditions.\u003Cspan class=\"hljs-property\">equals\u003C/span> !== \u003Cspan class=\"hljs-literal\">undefined\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> value === conditions.\u003Cspan class=\"hljs-property\">equals\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (conditions.\u003Cspan class=\"hljs-property\">notEquals\u003C/span> !== \u003Cspan class=\"hljs-literal\">undefined\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> value !== conditions.\u003Cspan class=\"hljs-property\">notEquals\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (conditions.\u003Cspan class=\"hljs-property\">in\u003C/span> !== \u003Cspan class=\"hljs-literal\">undefined\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> conditions.\u003Cspan class=\"hljs-property\">in\u003C/span>.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(value);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (conditions.\u003Cspan class=\"hljs-property\">notIn\u003C/span> !== \u003Cspan class=\"hljs-literal\">undefined\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> !conditions.\u003Cspan class=\"hljs-property\">notIn\u003C/span>.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(value);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (conditions.\u003Cspan class=\"hljs-property\">greaterThan\u003C/span> !== \u003Cspan class=\"hljs-literal\">undefined\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-built_in\">parseFloat\u003C/span>(value) > conditions.\u003Cspan class=\"hljs-property\">greaterThan\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (conditions.\u003Cspan class=\"hljs-property\">lessThan\u003C/span> !== \u003Cspan class=\"hljs-literal\">undefined\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-built_in\">parseFloat\u003C/span>(value) < conditions.\u003Cspan class=\"hljs-property\">lessThan\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (conditions.\u003Cspan class=\"hljs-property\">contains\u003C/span> !== \u003Cspan class=\"hljs-literal\">undefined\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> value.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(conditions.\u003Cspan class=\"hljs-property\">contains\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (conditions.\u003Cspan class=\"hljs-property\">isEmpty\u003C/span> !== \u003Cspan class=\"hljs-literal\">undefined\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> conditions.\u003Cspan class=\"hljs-property\">isEmpty\u003C/span> ? !value : !!value;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getFieldValue\u003C/span>(\u003Cspan class=\"hljs-params\">field\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (field.\u003Cspan class=\"hljs-property\">type\u003C/span> === \u003Cspan class=\"hljs-string\">'checkbox'\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (field.\u003Cspan class=\"hljs-property\">name\u003C/span>.\u003Cspan class=\"hljs-title function_\">endsWith\u003C/span>(\u003Cspan class=\"hljs-string\">'[]'\u003C/span>) || field.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">`input[name="\u003Cspan class=\"hljs-subst\">${field.name}\u003C/span>"]`\u003C/span>).\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">1\u003C/span>) {\n                \u003Cspan class=\"hljs-comment\">// Multiple checkboxes\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> checkedBoxes = field.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">`input[name="\u003Cspan class=\"hljs-subst\">${field.name}\u003C/span>"]:checked`\u003C/span>);\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(checkedBoxes).\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cb\u003C/span> =>\u003C/span> cb.\u003Cspan class=\"hljs-property\">value\u003C/span>);\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                \u003Cspan class=\"hljs-comment\">// Single checkbox\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> field.\u003Cspan class=\"hljs-property\">checked\u003C/span> ? field.\u003Cspan class=\"hljs-property\">value\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            }\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (field.\u003Cspan class=\"hljs-property\">type\u003C/span> === \u003Cspan class=\"hljs-string\">'radio'\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> checkedRadio = field.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">`input[name="\u003Cspan class=\"hljs-subst\">${field.name}\u003C/span>"]:checked`\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> checkedRadio ? checkedRadio.\u003Cspan class=\"hljs-property\">value\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> field.\u003Cspan class=\"hljs-property\">value\u003C/span>;\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">bindFileInputEvents\u003C/span>(\u003Cspan class=\"hljs-params\">fileInput\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> container = fileInput.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'.file-input-container'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> displayText = container.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.file-input-text'\u003C/span>);\n        \n        fileInput.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'change'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> files = fileInput.\u003Cspan class=\"hljs-property\">files\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (files.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (files.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">1\u003C/span>) {\n                    displayText.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = files[\u003Cspan class=\"hljs-number\">0\u003C/span>].\u003Cspan class=\"hljs-property\">name\u003C/span>;\n                } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                    displayText.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${files.length}\u003C/span> files selected`\u003C/span>;\n                }\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                displayText.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">'No file selected'\u003C/span>;\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">bindRangeInputEvents\u003C/span>(\u003Cspan class=\"hljs-params\">rangeInput\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> container = rangeInput.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'.range-input-container'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentValueSpan = container.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.range-current'\u003C/span>);\n        \n        rangeInput.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'input'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            currentValueSpan.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = rangeInput.\u003Cspan class=\"hljs-property\">value\u003C/span>;\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">initProgressTracker\u003C/span>(\u003Cspan class=\"hljs-params\">form\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">progressTracker\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">FormProgressTracker\u003C/span>(form);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">progressTracker\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateProgress\u003C/span>();\n        \n        \u003Cspan class=\"hljs-comment\">// Update progress on field changes\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> inputs = form.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'input, select, textarea'\u003C/span>);\n        inputs.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">input\u003C/span> =>\u003C/span> {\n            [\u003Cspan class=\"hljs-string\">'input'\u003C/span>, \u003Cspan class=\"hljs-string\">'change'\u003C/span>].\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">eventType\u003C/span> =>\u003C/span> {\n                input.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(eventType, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">progressTracker\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateProgress\u003C/span>();\n                });\n            });\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">initAutoSave\u003C/span>(\u003Cspan class=\"hljs-params\">form\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">saveFormData\u003C/span> = (\u003Cspan class=\"hljs-params\">\u003C/span>) => {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> formData = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">FormData\u003C/span>(form);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> data = \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">fromEntries\u003C/span>(formData.\u003Cspan class=\"hljs-title function_\">entries\u003C/span>());\n            \n            \u003Cspan class=\"hljs-variable language_\">localStorage\u003C/span>.\u003Cspan class=\"hljs-title function_\">setItem\u003C/span>(\u003Cspan class=\"hljs-string\">`autosave_\u003Cspan class=\"hljs-subst\">${form.id}\u003C/span>`\u003C/span>, \u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">stringify\u003C/span>({\n                \u003Cspan class=\"hljs-attr\">data\u003C/span>: data,\n                \u003Cspan class=\"hljs-attr\">timestamp\u003C/span>: \u003Cspan class=\"hljs-title class_\">Date\u003C/span>.\u003Cspan class=\"hljs-title function_\">now\u003C/span>()\n            }));\n            \n            \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Form auto-saved'\u003C/span>);\n        };\n        \n        \u003Cspan class=\"hljs-comment\">// Save on input changes (debounced)\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> saveTimeout;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> inputs = form.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'input, select, textarea'\u003C/span>);\n        inputs.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">input\u003C/span> =>\u003C/span> {\n            input.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'input'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                \u003Cspan class=\"hljs-built_in\">clearTimeout\u003C/span>(saveTimeout);\n                saveTimeout = \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(saveFormData, \u003Cspan class=\"hljs-number\">1000\u003C/span>);\n            });\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Periodic auto-save\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">autoSaveTimer\u003C/span> = \u003Cspan class=\"hljs-built_in\">setInterval\u003C/span>(saveFormData, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">autoSaveInterval\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Load saved data on initialization\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">loadAutoSavedData\u003C/span>(form);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">loadAutoSavedData\u003C/span>(\u003Cspan class=\"hljs-params\">form\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> savedData = \u003Cspan class=\"hljs-variable language_\">localStorage\u003C/span>.\u003Cspan class=\"hljs-title function_\">getItem\u003C/span>(\u003Cspan class=\"hljs-string\">`autosave_\u003Cspan class=\"hljs-subst\">${form.id}\u003C/span>`\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (savedData) {\n            \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> { data, timestamp } = \u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">parse\u003C/span>(savedData);\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> ageInMinutes = (\u003Cspan class=\"hljs-title class_\">Date\u003C/span>.\u003Cspan class=\"hljs-title function_\">now\u003C/span>() - timestamp) / (\u003Cspan class=\"hljs-number\">1000\u003C/span> * \u003Cspan class=\"hljs-number\">60\u003C/span>);\n                \n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (ageInMinutes < \u003Cspan class=\"hljs-number\">60\u003C/span>) { \u003Cspan class=\"hljs-comment\">// Only load if less than 1 hour old\u003C/span>\n                    \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">entries\u003C/span>(data).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">[name, value]\u003C/span>) =>\u003C/span> {\n                        \u003Cspan class=\"hljs-keyword\">const\u003C/span> field = form.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">`[name="\u003Cspan class=\"hljs-subst\">${name}\u003C/span>"]`\u003C/span>);\n                        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (field) {\n                            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (field.\u003Cspan class=\"hljs-property\">type\u003C/span> === \u003Cspan class=\"hljs-string\">'checkbox'\u003C/span> || field.\u003Cspan class=\"hljs-property\">type\u003C/span> === \u003Cspan class=\"hljs-string\">'radio'\u003C/span>) {\n                                field.\u003Cspan class=\"hljs-property\">checked\u003C/span> = field.\u003Cspan class=\"hljs-property\">value\u003C/span> === value;\n                            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                                field.\u003Cspan class=\"hljs-property\">value\u003C/span> = value;\n                            }\n                        }\n                    });\n                    \n                    \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Auto-saved data loaded'\u003C/span>);\n                }\n            } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n                \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">error\u003C/span>(\u003Cspan class=\"hljs-string\">'Failed to load auto-saved data:'\u003C/span>, error);\n            }\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">formatFileSize\u003C/span>(\u003Cspan class=\"hljs-params\">bytes\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (bytes === \u003Cspan class=\"hljs-number\">0\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'0 Bytes'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> k = \u003Cspan class=\"hljs-number\">1024\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> sizes = [\u003Cspan class=\"hljs-string\">'Bytes'\u003C/span>, \u003Cspan class=\"hljs-string\">'KB'\u003C/span>, \u003Cspan class=\"hljs-string\">'MB'\u003C/span>, \u003Cspan class=\"hljs-string\">'GB'\u003C/span>];\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> i = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">floor\u003C/span>(\u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(bytes) / \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(k));\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-built_in\">parseFloat\u003C/span>((bytes / \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">pow\u003C/span>(k, i)).\u003Cspan class=\"hljs-title function_\">toFixed\u003C/span>(\u003Cspan class=\"hljs-number\">2\u003C/span>)) + \u003Cspan class=\"hljs-string\">' '\u003C/span> + sizes[i];\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">handleValidationChange\u003C/span>(\u003Cspan class=\"hljs-params\">fieldName, result\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">progressTracker\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">progressTracker\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateProgress\u003C/span>();\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">handleFormSubmit\u003C/span>(\u003Cspan class=\"hljs-params\">formData, form\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Clear auto-save data on successful submit\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">localStorage\u003C/span>.\u003Cspan class=\"hljs-title function_\">removeItem\u003C/span>(\u003Cspan class=\"hljs-string\">`autosave_\u003Cspan class=\"hljs-subst\">${form.id}\u003C/span>`\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">autoSaveTimer\u003C/span>) {\n            \u003Cspan class=\"hljs-built_in\">clearInterval\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">autoSaveTimer\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Dynamic form submitted:'\u003C/span>, formData);\n    }\n}\n\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">FormProgressTracker\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">form\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span> = form;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">progressBar\u003C/span> = form.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.progress-fill'\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">progressText\u003C/span> = form.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.progress-text'\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">totalFields\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getTotalFields\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getTotalFields\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> fields = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'input, select, textarea'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(fields).\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">field\u003C/span> =>\u003C/span> \n            field.\u003Cspan class=\"hljs-property\">type\u003C/span> !== \u003Cspan class=\"hljs-string\">'hidden'\u003C/span> && \n            field.\u003Cspan class=\"hljs-property\">type\u003C/span> !== \u003Cspan class=\"hljs-string\">'submit'\u003C/span> && \n            field.\u003Cspan class=\"hljs-property\">type\u003C/span> !== \u003Cspan class=\"hljs-string\">'reset'\u003C/span> &&\n            !field.\u003Cspan class=\"hljs-property\">disabled\u003C/span>\n        ).\u003Cspan class=\"hljs-property\">length\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getCompletedFields\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> fields = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'input, select, textarea'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> completed = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \n        fields.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">field\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (field.\u003Cspan class=\"hljs-property\">type\u003C/span> === \u003Cspan class=\"hljs-string\">'hidden'\u003C/span> || field.\u003Cspan class=\"hljs-property\">type\u003C/span> === \u003Cspan class=\"hljs-string\">'submit'\u003C/span> || field.\u003Cspan class=\"hljs-property\">type\u003C/span> === \u003Cspan class=\"hljs-string\">'reset'\u003C/span> || field.\u003Cspan class=\"hljs-property\">disabled\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">isFieldCompleted\u003C/span>(field)) {\n                completed++;\n            }\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> completed;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">isFieldCompleted\u003C/span>(\u003Cspan class=\"hljs-params\">field\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (field.\u003Cspan class=\"hljs-property\">type\u003C/span> === \u003Cspan class=\"hljs-string\">'checkbox'\u003C/span>) {\n            \u003Cspan class=\"hljs-comment\">// For checkbox groups, check if at least one is selected\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> checkboxGroup = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">`input[name="\u003Cspan class=\"hljs-subst\">${field.name}\u003C/span>"]`\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (checkboxGroup.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">1\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(checkboxGroup).\u003Cspan class=\"hljs-title function_\">some\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cb\u003C/span> =>\u003C/span> cb.\u003Cspan class=\"hljs-property\">checked\u003C/span>);\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> field.\u003Cspan class=\"hljs-property\">checked\u003C/span>;\n            }\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (field.\u003Cspan class=\"hljs-property\">type\u003C/span> === \u003Cspan class=\"hljs-string\">'radio'\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> radioGroup = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">`input[name="\u003Cspan class=\"hljs-subst\">${field.name}\u003C/span>"]`\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(radioGroup).\u003Cspan class=\"hljs-title function_\">some\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">rb\u003C/span> =>\u003C/span> rb.\u003Cspan class=\"hljs-property\">checked\u003C/span>);\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> field.\u003Cspan class=\"hljs-property\">value\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>() !== \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateProgress\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> completed = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getCompletedFields\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> percentage = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">totalFields\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span> ? (completed / \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">totalFields\u003C/span>) * \u003Cspan class=\"hljs-number\">100\u003C/span> : \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">progressBar\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">progressBar\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">width\u003C/span> = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${percentage}\u003C/span>%`\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">progressText\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">progressText\u003C/span>.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-built_in\">Math\u003C/span>.round(percentage)}\u003C/span>% Complete (\u003Cspan class=\"hljs-subst\">${completed}\u003C/span>/\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.totalFields}\u003C/span>)`\u003C/span>;\n        }\n    }\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"integration-with-content-management-systems\">Integration with Content Management Systems\u003C/h2>\n\u003Cp>Markdown form creation integrates seamlessly with modern documentation and content management workflows. When combined with \u003Ca href=\"/blog/markdown-automation-workflows-complete-guide\">automated workflow systems and CI/CD pipelines\u003C/a>, form systems become part of the content processing pipeline, enabling automated form generation, validation rule updates, and dynamic content creation based on user inputs.\u003C/p>\n\u003Cp>For sophisticated content architectures, form creation works effectively with \u003Ca href=\"/blog/markdown-progressive-web-app-documentation-complete-guide\">Progressive Web App functionality and offline capabilities\u003C/a> to ensure that forms remain functional in offline scenarios, with proper data synchronization and conflict resolution when connectivity is restored.\u003C/p>\n\u003Cp>When building comprehensive documentation platforms, form integration complements \u003Ca href=\"/blog/markdown-link-management-cross-referencing-complete-guide\">link management and cross-referencing systems\u003C/a> by enabling forms that generate dynamic cross-references, update documentation based on user selections, and create personalized navigation experiences within Markdown-based content systems.\u003C/p>\n\u003Ch2 id=\"advanced-accessibility-and-usability\">Advanced Accessibility and Usability\u003C/h2>\n\u003Ch3 id=\"wcag-compliant-form-implementation\">WCAG-Compliant Form Implementation\u003C/h3>\n\u003Cp>Building forms that meet accessibility standards while maintaining Markdown simplicity:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Accessible form example with full ARIA support -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">form\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"accessible-markdown-form"\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"form"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-labelledby\u003C/span>=\u003Cspan class=\"hljs-string\">"form-title"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h2\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"form-title"\u003C/span>>\u003C/span>User Registration Form\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h2\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"form-description"\u003C/span>>\u003C/span>Complete all required fields to create your account. Fields marked with an asterisk (*) are required.\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n  \n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"form-section"\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"group"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-labelledby\u003C/span>=\u003Cspan class=\"hljs-string\">"personal-info"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h3\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"personal-info"\u003C/span>>\u003C/span>Personal Information\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h3\u003C/span>>\u003C/span>\n    \n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"form-group"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">label\u003C/span> \u003Cspan class=\"hljs-attr\">for\u003C/span>=\u003Cspan class=\"hljs-string\">"first-name"\u003C/span>>\u003C/span>\n        First Name\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"required-indicator"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"required"\u003C/span>>\u003C/span>*\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">label\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">input\u003C/span> \u003Cspan class=\"hljs-attr\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"text"\u003C/span> \n             \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"first-name"\u003C/span> \n             \u003Cspan class=\"hljs-attr\">name\u003C/span>=\u003Cspan class=\"hljs-string\">"firstName"\u003C/span> \n             \u003Cspan class=\"hljs-attr\">required\u003C/span> \n             \u003Cspan class=\"hljs-attr\">aria-required\u003C/span>=\u003Cspan class=\"hljs-string\">"true"\u003C/span>\n             \u003Cspan class=\"hljs-attr\">aria-describedby\u003C/span>=\u003Cspan class=\"hljs-string\">"first-name-help first-name-error"\u003C/span>\n             \u003Cspan class=\"hljs-attr\">autocomplete\u003C/span>=\u003Cspan class=\"hljs-string\">"given-name"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"first-name-help"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"field-help"\u003C/span>>\u003C/span>\n        Enter your legal first name as it appears on official documents.\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"first-name-error"\u003C/span> \n           \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"validation-message"\u003C/span> \n           \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"alert"\u003C/span> \n           \u003Cspan class=\"hljs-attr\">aria-live\u003C/span>=\u003Cspan class=\"hljs-string\">"polite"\u003C/span>\n           \u003Cspan class=\"hljs-attr\">aria-atomic\u003C/span>=\u003Cspan class=\"hljs-string\">"true"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n    \n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"form-group"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">label\u003C/span> \u003Cspan class=\"hljs-attr\">for\u003C/span>=\u003Cspan class=\"hljs-string\">"last-name"\u003C/span>>\u003C/span>\n        Last Name\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"required-indicator"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"required"\u003C/span>>\u003C/span>*\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">label\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">input\u003C/span> \u003Cspan class=\"hljs-attr\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"text"\u003C/span> \n             \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"last-name"\u003C/span> \n             \u003Cspan class=\"hljs-attr\">name\u003C/span>=\u003Cspan class=\"hljs-string\">"lastName"\u003C/span> \n             \u003Cspan class=\"hljs-attr\">required\u003C/span> \n             \u003Cspan class=\"hljs-attr\">aria-required\u003C/span>=\u003Cspan class=\"hljs-string\">"true"\u003C/span>\n             \u003Cspan class=\"hljs-attr\">aria-describedby\u003C/span>=\u003Cspan class=\"hljs-string\">"last-name-error"\u003C/span>\n             \u003Cspan class=\"hljs-attr\">autocomplete\u003C/span>=\u003Cspan class=\"hljs-string\">"family-name"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"last-name-error"\u003C/span> \n           \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"validation-message"\u003C/span> \n           \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"alert"\u003C/span> \n           \u003Cspan class=\"hljs-attr\">aria-live\u003C/span>=\u003Cspan class=\"hljs-string\">"polite"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n    \n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">fieldset\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"form-group"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">legend\u003C/span>>\u003C/span>\n        Preferred Contact Method\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"required-indicator"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"required"\u003C/span>>\u003C/span>*\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">legend\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"radio-group"\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"radiogroup"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-required\u003C/span>=\u003Cspan class=\"hljs-string\">"true"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">label\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"radio-option"\u003C/span>>\u003C/span>\n          \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">input\u003C/span> \u003Cspan class=\"hljs-attr\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"radio"\u003C/span> \u003Cspan class=\"hljs-attr\">name\u003C/span>=\u003Cspan class=\"hljs-string\">"contactMethod"\u003C/span> \u003Cspan class=\"hljs-attr\">value\u003C/span>=\u003Cspan class=\"hljs-string\">"email"\u003C/span> \u003Cspan class=\"hljs-attr\">required\u003C/span>>\u003C/span>\n          \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"radio-label"\u003C/span>>\u003C/span>Email\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">label\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">label\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"radio-option"\u003C/span>>\u003C/span>\n          \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">input\u003C/span> \u003Cspan class=\"hljs-attr\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"radio"\u003C/span> \u003Cspan class=\"hljs-attr\">name\u003C/span>=\u003Cspan class=\"hljs-string\">"contactMethod"\u003C/span> \u003Cspan class=\"hljs-attr\">value\u003C/span>=\u003Cspan class=\"hljs-string\">"phone"\u003C/span> \u003Cspan class=\"hljs-attr\">required\u003C/span>>\u003C/span>\n          \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"radio-label"\u003C/span>>\u003C/span>Phone\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">label\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">label\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"radio-option"\u003C/span>>\u003C/span>\n          \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">input\u003C/span> \u003Cspan class=\"hljs-attr\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"radio"\u003C/span> \u003Cspan class=\"hljs-attr\">name\u003C/span>=\u003Cspan class=\"hljs-string\">"contactMethod"\u003C/span> \u003Cspan class=\"hljs-attr\">value\u003C/span>=\u003Cspan class=\"hljs-string\">"mail"\u003C/span> \u003Cspan class=\"hljs-attr\">required\u003C/span>>\u003C/span>\n          \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"radio-label"\u003C/span>>\u003C/span>Postal Mail\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">label\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"contact-method-error"\u003C/span> \n           \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"validation-message"\u003C/span> \n           \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"alert"\u003C/span> \n           \u003Cspan class=\"hljs-attr\">aria-live\u003C/span>=\u003Cspan class=\"hljs-string\">"polite"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">fieldset\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n  \n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"form-section"\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"group"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-labelledby\u003C/span>=\u003Cspan class=\"hljs-string\">"account-info"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h3\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"account-info"\u003C/span>>\u003C/span>Account Information\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h3\u003C/span>>\u003C/span>\n    \n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"form-group"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">label\u003C/span> \u003Cspan class=\"hljs-attr\">for\u003C/span>=\u003Cspan class=\"hljs-string\">"username"\u003C/span>>\u003C/span>\n        Username\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"required-indicator"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"required"\u003C/span>>\u003C/span>*\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">label\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">input\u003C/span> \u003Cspan class=\"hljs-attr\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"text"\u003C/span> \n             \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"username"\u003C/span> \n             \u003Cspan class=\"hljs-attr\">name\u003C/span>=\u003Cspan class=\"hljs-string\">"username"\u003C/span> \n             \u003Cspan class=\"hljs-attr\">required\u003C/span> \n             \u003Cspan class=\"hljs-attr\">aria-required\u003C/span>=\u003Cspan class=\"hljs-string\">"true"\u003C/span>\n             \u003Cspan class=\"hljs-attr\">aria-describedby\u003C/span>=\u003Cspan class=\"hljs-string\">"username-help username-error"\u003C/span>\n             \u003Cspan class=\"hljs-attr\">autocomplete\u003C/span>=\u003Cspan class=\"hljs-string\">"username"\u003C/span>\n             \u003Cspan class=\"hljs-attr\">minlength\u003C/span>=\u003Cspan class=\"hljs-string\">"3"\u003C/span>\n             \u003Cspan class=\"hljs-attr\">maxlength\u003C/span>=\u003Cspan class=\"hljs-string\">"20"\u003C/span>\n             \u003Cspan class=\"hljs-attr\">pattern\u003C/span>=\u003Cspan class=\"hljs-string\">"^[a-zA-Z0-9_]+$"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"username-help"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"field-help"\u003C/span>>\u003C/span>\n        Username must be 3-20 characters long and contain only letters, numbers, and underscores.\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"username-error"\u003C/span> \n           \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"validation-message"\u003C/span> \n           \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"alert"\u003C/span> \n           \u003Cspan class=\"hljs-attr\">aria-live\u003C/span>=\u003Cspan class=\"hljs-string\">"polite"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n    \n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"form-group"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">label\u003C/span> \u003Cspan class=\"hljs-attr\">for\u003C/span>=\u003Cspan class=\"hljs-string\">"password"\u003C/span>>\u003C/span>\n        Password\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"required-indicator"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"required"\u003C/span>>\u003C/span>*\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">label\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"password-input-container"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">input\u003C/span> \u003Cspan class=\"hljs-attr\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"password"\u003C/span> \n               \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"password"\u003C/span> \n               \u003Cspan class=\"hljs-attr\">name\u003C/span>=\u003Cspan class=\"hljs-string\">"password"\u003C/span> \n               \u003Cspan class=\"hljs-attr\">required\u003C/span> \n               \u003Cspan class=\"hljs-attr\">aria-required\u003C/span>=\u003Cspan class=\"hljs-string\">"true"\u003C/span>\n               \u003Cspan class=\"hljs-attr\">aria-describedby\u003C/span>=\u003Cspan class=\"hljs-string\">"password-strength password-help password-error"\u003C/span>\n               \u003Cspan class=\"hljs-attr\">autocomplete\u003C/span>=\u003Cspan class=\"hljs-string\">"new-password"\u003C/span>\n               \u003Cspan class=\"hljs-attr\">minlength\u003C/span>=\u003Cspan class=\"hljs-string\">"8"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">button\u003C/span> \u003Cspan class=\"hljs-attr\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"button"\u003C/span> \n                \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"password-toggle"\u003C/span> \n                \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Show password"\u003C/span>\n                \u003Cspan class=\"hljs-attr\">aria-pressed\u003C/span>=\u003Cspan class=\"hljs-string\">"false"\u003C/span>\n                \u003Cspan class=\"hljs-attr\">tabindex\u003C/span>=\u003Cspan class=\"hljs-string\">"0"\u003C/span>>\u003C/span>\n          \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">aria-hidden\u003C/span>=\u003Cspan class=\"hljs-string\">"true"\u003C/span>>\u003C/span>👁️\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">button\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n      \n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"password-strength"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"password-strength"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-live\u003C/span>=\u003Cspan class=\"hljs-string\">"polite"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"strength-meter"\u003C/span>>\u003C/span>\n          \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"strength-fill"\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"width: 0%"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"strength-text"\u003C/span>>\u003C/span>Password strength: Not entered\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n      \n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"password-help"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"field-help"\u003C/span>>\u003C/span>\n        Password must be at least 8 characters long and include a mix of letters, numbers, and symbols.\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n      \n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"password-error"\u003C/span> \n           \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"validation-message"\u003C/span> \n           \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"alert"\u003C/span> \n           \u003Cspan class=\"hljs-attr\">aria-live\u003C/span>=\u003Cspan class=\"hljs-string\">"polite"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n  \n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"form-actions"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">button\u003C/span> \u003Cspan class=\"hljs-attr\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"submit"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"primary-button"\u003C/span>>\u003C/span>\n      Create Account\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">button\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">button\u003C/span> \u003Cspan class=\"hljs-attr\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"reset"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"secondary-button"\u003C/span>>\u003C/span>\n      Clear Form\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">button\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n  \n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"form-status"\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"status"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-live\u003C/span>=\u003Cspan class=\"hljs-string\">"polite"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-atomic\u003C/span>=\u003Cspan class=\"hljs-string\">"true"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">form\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003Cspan class=\"language-css\">\n\u003Cspan class=\"hljs-comment\">/* Accessibility-focused styles */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.accessible-markdown-form\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">600px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> auto;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: system-ui, -apple-system, sans-serif;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.required-indicator\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#d32f2f\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin-left\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.form-group\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">24px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.form-group\u003C/span> \u003Cspan class=\"hljs-selector-tag\">label\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#333\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.form-group\u003C/span> \u003Cspan class=\"hljs-selector-tag\">input\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.form-group\u003C/span> select,\n\u003Cspan class=\"hljs-selector-class\">.form-group\u003C/span> \u003Cspan class=\"hljs-selector-tag\">textarea\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span> \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#ccc\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.5\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: border-color \u003Cspan class=\"hljs-number\">0.2s\u003C/span> ease;\n  \u003Cspan class=\"hljs-attribute\">box-sizing\u003C/span>: border-box;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.form-group\u003C/span> \u003Cspan class=\"hljs-selector-tag\">input\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.form-group\u003C/span> select\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.form-group\u003C/span> \u003Cspan class=\"hljs-selector-tag\">textarea\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#1976d2\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">outline-offset\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-color\u003C/span>: \u003Cspan class=\"hljs-number\">#1976d2\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.field-help\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">14px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#666\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin-top\u003C/span>: \u003Cspan class=\"hljs-number\">6px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.4\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.validation-message\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#d32f2f\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">14px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin-top\u003C/span>: \u003Cspan class=\"hljs-number\">6px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">500\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.validation-message\u003C/span>\u003Cspan class=\"hljs-selector-class\">.show\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.radio-group\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin-top\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.radio-option\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n  \u003Cspan class=\"hljs-attribute\">align-items\u003C/span>: center;\n  \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: pointer;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.radio-option\u003C/span> \u003Cspan class=\"hljs-selector-tag\">input\u003C/span>\u003Cspan class=\"hljs-selector-attr\">[type=\u003Cspan class=\"hljs-string\">"radio"\u003C/span>]\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin-right\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: pointer;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.password-input-container\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.password-toggle\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n  \u003Cspan class=\"hljs-attribute\">right\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">50%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">translateY\u003C/span>(-\u003Cspan class=\"hljs-number\">50%\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: none;\n  \u003Cspan class=\"hljs-attribute\">border\u003C/span>: none;\n  \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: pointer;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.password-toggle\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#1976d2\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">outline-offset\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.password-strength\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin-top\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.strength-meter\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">6px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#e0e0e0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.strength-fill\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f44336\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: width \u003Cspan class=\"hljs-number\">0.3s\u003C/span> ease, background-color \u003Cspan class=\"hljs-number\">0.3s\u003C/span> ease;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.strength-fill\u003C/span>\u003Cspan class=\"hljs-selector-class\">.weak\u003C/span> { \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f44336\u003C/span>; }\n\u003Cspan class=\"hljs-selector-class\">.strength-fill\u003C/span>\u003Cspan class=\"hljs-selector-class\">.fair\u003C/span> { \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#ff9800\u003C/span>; }\n\u003Cspan class=\"hljs-selector-class\">.strength-fill\u003C/span>\u003Cspan class=\"hljs-selector-class\">.good\u003C/span> { \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#2196f3\u003C/span>; }\n\u003Cspan class=\"hljs-selector-class\">.strength-fill\u003C/span>\u003Cspan class=\"hljs-selector-class\">.strong\u003C/span> { \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#4caf50\u003C/span>; }\n\n\u003Cspan class=\"hljs-selector-class\">.strength-text\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">14px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin-top\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.form-actions\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin-top\u003C/span>: \u003Cspan class=\"hljs-number\">32px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n  \u003Cspan class=\"hljs-attribute\">gap\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">justify-content\u003C/span>: flex-end;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.primary-button\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.secondary-button\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span> \u003Cspan class=\"hljs-number\">24px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: pointer;\n  \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: all \u003Cspan class=\"hljs-number\">0.2s\u003C/span> ease;\n  \u003Cspan class=\"hljs-attribute\">min-height\u003C/span>: \u003Cspan class=\"hljs-number\">44px\u003C/span>; \u003Cspan class=\"hljs-comment\">/* Touch target size */\u003C/span>\n}\n\n\u003Cspan class=\"hljs-selector-class\">.primary-button\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#1976d2\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n  \u003Cspan class=\"hljs-attribute\">border-color\u003C/span>: \u003Cspan class=\"hljs-number\">#1976d2\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.primary-button\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#1565c0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-color\u003C/span>: \u003Cspan class=\"hljs-number\">#1565c0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.primary-button\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#1976d2\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">outline-offset\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.secondary-button\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: white;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#666\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-color\u003C/span>: \u003Cspan class=\"hljs-number\">#ccc\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.secondary-button\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f5f5f5\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-color\u003C/span>: \u003Cspan class=\"hljs-number\">#999\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.secondary-button\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#666\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">outline-offset\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* High contrast mode support */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-contrast\u003C/span>: high) {\n  \u003Cspan class=\"hljs-selector-class\">.form-group\u003C/span> \u003Cspan class=\"hljs-selector-tag\">input\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.form-group\u003C/span> select,\n  \u003Cspan class=\"hljs-selector-class\">.form-group\u003C/span> \u003Cspan class=\"hljs-selector-tag\">textarea\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">border-width\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.validation-message\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">700\u003C/span>;\n  }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Reduced motion support */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-reduced-motion\u003C/span>: reduce) {\n  * {\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: none \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n  }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Dark mode support */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-color-scheme\u003C/span>: dark) {\n  \u003Cspan class=\"hljs-selector-class\">.accessible-markdown-form\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#1a1a1a\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#e0e0e0\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.form-group\u003C/span> \u003Cspan class=\"hljs-selector-tag\">input\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.form-group\u003C/span> select,\n  \u003Cspan class=\"hljs-selector-class\">.form-group\u003C/span> \u003Cspan class=\"hljs-selector-tag\">textarea\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#2a2a2a\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-color\u003C/span>: \u003Cspan class=\"hljs-number\">#555\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#e0e0e0\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.form-group\u003C/span> \u003Cspan class=\"hljs-selector-tag\">label\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#e0e0e0\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.field-help\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#b0b0b0\u003C/span>;\n  }\n}\n\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"troubleshooting-common-form-issues\">Troubleshooting Common Form Issues\u003C/h2>\n\u003Ch3 id=\"form-validation-problems\">Form Validation Problems\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Forms not validating correctly or showing inconsistent behavior\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// form-troubleshooting.js - Debug and fix common form issues\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">FormTroubleshooter\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">form\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span> = form;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">issues\u003C/span> = [];\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">recommendations\u003C/span> = [];\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">diagnoseForm\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">issues\u003C/span> = [];\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">recommendations\u003C/span> = [];\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">checkFormStructure\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">checkAccessibility\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">checkValidation\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">checkUsability\u003C/span>();\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">issues\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">issues\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">recommendations\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">recommendations\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">severity\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">calculateSeverity\u003C/span>()\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">checkFormStructure\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Check for proper form element\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span>.\u003Cspan class=\"hljs-property\">tagName\u003C/span> === \u003Cspan class=\"hljs-string\">'FORM'\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addIssue\u003C/span>(\u003Cspan class=\"hljs-string\">'critical'\u003C/span>, \u003Cspan class=\"hljs-string\">'Form container is not a <form> element'\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Check for required attributes\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span>.\u003Cspan class=\"hljs-title function_\">hasAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'method'\u003C/span>)) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addIssue\u003C/span>(\u003Cspan class=\"hljs-string\">'warning'\u003C/span>, \u003Cspan class=\"hljs-string\">'Form missing method attribute'\u003C/span>);\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addRecommendation\u003C/span>(\u003Cspan class=\"hljs-string\">'Add method="post" to form element'\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Check for labels\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> inputs = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'input, select, textarea'\u003C/span>);\n        inputs.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">input\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (input.\u003Cspan class=\"hljs-property\">type\u003C/span> === \u003Cspan class=\"hljs-string\">'hidden'\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> hasLabel = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">`label[for="\u003Cspan class=\"hljs-subst\">${input.id}\u003C/span>"]`\u003C/span>) || \n                            input.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'label'\u003C/span>);\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!hasLabel) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addIssue\u003C/span>(\u003Cspan class=\"hljs-string\">'error'\u003C/span>, \u003Cspan class=\"hljs-string\">`Input "\u003Cspan class=\"hljs-subst\">${input.name}\u003C/span>" has no associated label`\u003C/span>);\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addRecommendation\u003C/span>(\u003Cspan class=\"hljs-string\">`Add <label for="\u003Cspan class=\"hljs-subst\">${input.id}\u003C/span>"> for input "\u003Cspan class=\"hljs-subst\">${input.name}\u003C/span>"`\u003C/span>);\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">checkAccessibility\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Check for ARIA attributes\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> requiredInputs = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'input[required], select[required], textarea[required]'\u003C/span>);\n        requiredInputs.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">input\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!input.\u003Cspan class=\"hljs-title function_\">hasAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-required'\u003C/span>)) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addIssue\u003C/span>(\u003Cspan class=\"hljs-string\">'warning'\u003C/span>, \u003Cspan class=\"hljs-string\">`Required input "\u003Cspan class=\"hljs-subst\">${input.name}\u003C/span>" missing aria-required attribute`\u003C/span>);\n            }\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Check for error message containers\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> inputs = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'input, select, textarea'\u003C/span>);\n        inputs.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">input\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (input.\u003Cspan class=\"hljs-property\">type\u003C/span> === \u003Cspan class=\"hljs-string\">'hidden'\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> errorContainer = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">`#\u003Cspan class=\"hljs-subst\">${input.name}\u003C/span>-error`\u003C/span>) ||\n                                 \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">`[aria-describedby*="\u003Cspan class=\"hljs-subst\">${input.id}\u003C/span>"]`\u003C/span>);\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!errorContainer) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addIssue\u003C/span>(\u003Cspan class=\"hljs-string\">'warning'\u003C/span>, \u003Cspan class=\"hljs-string\">`Input "\u003Cspan class=\"hljs-subst\">${input.name}\u003C/span>" has no error message container`\u003C/span>);\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">checkValidation\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Check for validation patterns\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> inputs = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'input[pattern]'\u003C/span>);\n        inputs.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">input\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">RegExp\u003C/span>(input.\u003Cspan class=\"hljs-property\">pattern\u003C/span>);\n            } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (e) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addIssue\u003C/span>(\u003Cspan class=\"hljs-string\">'error'\u003C/span>, \u003Cspan class=\"hljs-string\">`Invalid regex pattern for input "\u003Cspan class=\"hljs-subst\">${input.name}\u003C/span>"`\u003C/span>);\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!input.\u003Cspan class=\"hljs-title function_\">hasAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'title'\u003C/span>)) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addIssue\u003C/span>(\u003Cspan class=\"hljs-string\">'warning'\u003C/span>, \u003Cspan class=\"hljs-string\">`Input "\u003Cspan class=\"hljs-subst\">${input.name}\u003C/span>" with pattern has no title attribute`\u003C/span>);\n            }\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Check for conflicting validation\u003C/span>\n        inputs.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">input\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> minLength = input.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'minlength'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> maxLength = input.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'maxlength'\u003C/span>);\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (minLength && maxLength && \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(minLength) > \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(maxLength)) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addIssue\u003C/span>(\u003Cspan class=\"hljs-string\">'error'\u003C/span>, \u003Cspan class=\"hljs-string\">`Input "\u003Cspan class=\"hljs-subst\">${input.name}\u003C/span>" has minlength > maxlength`\u003C/span>);\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">checkUsability\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Check for submit buttons\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> submitButtons = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'button[type="submit"], input[type="submit"]'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (submitButtons.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addIssue\u003C/span>(\u003Cspan class=\"hljs-string\">'critical'\u003C/span>, \u003Cspan class=\"hljs-string\">'Form has no submit button'\u003C/span>);\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addRecommendation\u003C/span>(\u003Cspan class=\"hljs-string\">'Add a submit button to allow form submission'\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Check for autocomplete attributes\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> personalDataInputs = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">form\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'input[name*="name"], input[name*="email"], input[name*="phone"]'\u003C/span>);\n        personalDataInputs.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">input\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!input.\u003Cspan class=\"hljs-title function_\">hasAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'autocomplete'\u003C/span>)) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addIssue\u003C/span>(\u003Cspan class=\"hljs-string\">'info'\u003C/span>, \u003Cspan class=\"hljs-string\">`Input "\u003Cspan class=\"hljs-subst\">${input.name}\u003C/span>" could benefit from autocomplete attribute`\u003C/span>);\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addIssue\u003C/span>(\u003Cspan class=\"hljs-params\">severity, message\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">issues\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({ severity, message });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addRecommendation\u003C/span>(\u003Cspan class=\"hljs-params\">message\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">recommendations\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(message);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">calculateSeverity\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">issues\u003C/span>.\u003Cspan class=\"hljs-title function_\">some\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">issue\u003C/span> =>\u003C/span> issue.\u003Cspan class=\"hljs-property\">severity\u003C/span> === \u003Cspan class=\"hljs-string\">'critical'\u003C/span>)) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'critical'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">issues\u003C/span>.\u003Cspan class=\"hljs-title function_\">some\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">issue\u003C/span> =>\u003C/span> issue.\u003Cspan class=\"hljs-property\">severity\u003C/span> === \u003Cspan class=\"hljs-string\">'error'\u003C/span>)) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'error'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">issues\u003C/span>.\u003Cspan class=\"hljs-title function_\">some\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">issue\u003C/span> =>\u003C/span> issue.\u003Cspan class=\"hljs-property\">severity\u003C/span> === \u003Cspan class=\"hljs-string\">'warning'\u003C/span>)) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'warning'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'info'\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateReport\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> report = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">diagnoseForm\u003C/span>();\n        \n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Form Diagnosis Report'\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'====================='\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">`Overall Severity: \u003Cspan class=\"hljs-subst\">${report.severity}\u003C/span>`\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">`Total Issues: \u003Cspan class=\"hljs-subst\">${report.issues.length}\u003C/span>`\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>();\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (report.\u003Cspan class=\"hljs-property\">issues\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Issues Found:'\u003C/span>);\n            report.\u003Cspan class=\"hljs-property\">issues\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">issue, index\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${index + \u003Cspan class=\"hljs-number\">1\u003C/span>}\u003C/span>. [\u003Cspan class=\"hljs-subst\">${issue.severity.toUpperCase()}\u003C/span>] \u003Cspan class=\"hljs-subst\">${issue.message}\u003C/span>`\u003C/span>);\n            });\n            \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (report.\u003Cspan class=\"hljs-property\">recommendations\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Recommendations:'\u003C/span>);\n            report.\u003Cspan class=\"hljs-property\">recommendations\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">rec, index\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${index + \u003Cspan class=\"hljs-number\">1\u003C/span>}\u003C/span>. \u003Cspan class=\"hljs-subst\">${rec}\u003C/span>`\u003C/span>);\n            });\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> report;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Usage example\u003C/span>\n\u003Cspan class=\"hljs-keyword\">function\u003C/span> \u003Cspan class=\"hljs-title function_\">troubleshootForm\u003C/span>(\u003Cspan class=\"hljs-params\">formSelector\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> form = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(formSelector);\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!form) {\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">error\u003C/span>(\u003Cspan class=\"hljs-string\">`Form not found: \u003Cspan class=\"hljs-subst\">${formSelector}\u003C/span>`\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> troubleshooter = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">FormTroubleshooter\u003C/span>(form);\n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> troubleshooter.\u003Cspan class=\"hljs-title function_\">generateReport\u003C/span>();\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\n\u003Cp>Advanced Markdown form creation and input validation represents a powerful approach to building interactive documentation and content systems that combine the simplicity of Markdown with sophisticated user input capabilities. By implementing comprehensive form systems, validation frameworks, and accessibility features, content creators can build engaging documentation experiences that collect valuable user data while maintaining the maintainability and accessibility advantages of Markdown-based content platforms.\u003C/p>\n\u003Cp>The key to successful form implementation lies in balancing functionality with usability, ensuring that forms remain accessible to all users while providing robust validation and dynamic behavior capabilities. Whether you're building feedback systems, configuration interfaces, or interactive tutorials, the techniques covered in this guide provide the foundation for creating effective, maintainable form systems that serve both content creators and end users effectively.\u003C/p>\n\u003Cp>Remember to test forms thoroughly across different devices and assistive technologies, implement proper validation both client-side and server-side, and maintain clear documentation about form requirements and expected behaviors. With careful attention to accessibility, validation, and user experience, your Markdown-integrated forms can deliver powerful interactive capabilities while preserving the simplicity and flexibility that makes Markdown such an effective content creation format.\u003C/p>\n",[15,19,22,25,28,31,34],{"id":16,"text":17,"level":18},"why-implement-markdown-form-creation-and-input-validation","Why Implement Markdown Form Creation and Input Validation?",2,{"id":20,"text":21,"level":18},"foundation-form-creation-concepts","Foundation Form Creation Concepts",{"id":23,"text":24,"level":18},"advanced-form-components-and-patterns","Advanced Form Components and Patterns",{"id":26,"text":27,"level":18},"integration-with-content-management-systems","Integration with Content Management Systems",{"id":29,"text":30,"level":18},"advanced-accessibility-and-usability","Advanced Accessibility and Usability",{"id":32,"text":33,"level":18},"troubleshooting-common-form-issues","Troubleshooting Common Form Issues",{"id":35,"text":36,"level":18},"conclusion","Conclusion",[],[39,47,55],{"slug":40,"title":41,"description":42,"excerpt":43,"date":44,"category":9,"author":10,"keywords":45,"readingMinutes":46},"markdown-form-validation-input-handling-complete-guide","Markdown Form Validation and Input Handling: Complete Guide for Interactive Documentation with Dynamic Validation Systems","Master advanced Markdown form validation and input handling techniques for creating interactive documentation with comprehensive validation systems, real-time feedback, and user-friendly error handling that ensures data quality and user experience.","Advanced Markdown form validation and input handling systems enable interactive documentation with robust data validation, real-time user feedback, and comprehensive error handling mechanisms. By…","2025-10-23","markdown form validation, input validation markdown, form handling markdown, interactive forms markdown, markdown input validation, form validation systems, dynamic form validation, markdown user input",34,{"slug":48,"title":49,"description":50,"excerpt":51,"date":52,"category":9,"author":10,"keywords":53,"readingMinutes":54},"markdown-custom-html-components-complete-guide","Markdown Custom HTML Components and Extensions: Complete Guide for Dynamic Content Creation and Interactive Documentation","Master Markdown custom HTML components, shortcodes, and extensions for interactive documentation, dynamic content generation, and enhanced reader experiences. Learn component development, templating, and integration strategies.","Advanced Markdown custom HTML components and extensions enable the creation of dynamic, interactive documentation that transcends traditional static content limitations through sophisticated…","2025-10-03","markdown custom components, markdown html extensions, markdown shortcodes, interactive markdown, dynamic markdown content, custom markdown elements, markdown templating, markdown component development",33,{"slug":56,"title":57,"description":58,"excerpt":59,"date":60,"category":9,"author":10,"keywords":61,"readingMinutes":62},"markdown-progressive-web-app-documentation-complete-guide","Markdown Progressive Web App Documentation: Complete Guide for Interactive Documentation and Offline-First Content Systems","Master Progressive Web App documentation using Markdown for offline-first content delivery, interactive documentation systems, and service worker-powered content management. Learn PWA integration, caching strategies, and offline content optimization.","Progressive Web App documentation using Markdown creates powerful offline-first content delivery systems that provide native app-like experiences while maintaining the simplicity and flexibility…","2025-09-26","markdown pwa documentation, progressive web app markdown, offline markdown docs, service worker markdown, pwa documentation guide, interactive markdown docs, offline-first documentation, markdown app development",22,1792184942997]