Kostenloser Open Source JQuery Form Builder

Alpaca Forms Free Form Builder

Open Source JQuery Form Builder für interaktive HTML5 -Formulare

Alpaca Forms ist ein Open-Source-JQuery Form Builder für interaktive HTML5-Formulare für Ihre Web- und Mobilanwendungen, die JSON-Schema und Lenkervorlagen verwenden.

Kostenloser Open Source JQuery Form Builder

Alpaca Forms

GitHub

Überblick

Es gibt viele kostenlose HTML5 -Formulargenerator -Tools. Alpaca Formulare ist jedoch ein sehr einfacher und benutzerfreundlicher JQuery Form-Builder, um HTML5-Formulare für Web- und Mobilanwendungen zu generieren. Sie können mit JSON Schema und einfachen Lenkervorlagen hervorragende Benutzeroberflächen über Twitter-Bootstrap, Jquery UI, Jquery Mobile und HTML5 generieren. Alpaka ist ein sehr nützlicher JQuery -Formular -Designer, und alles, was Sie benötigen, wird nicht in der Box bereitgestellt. Es ist mit einer großen Bibliothek von Steuerelementen, Vorlagen, Layouts und Funktionen vorverpackt. Alpaka ist ein JSON-gesteuerter JavaScript-Formschöpfer, der es sehr einfach macht, schöne Formen zu rendern. Es ist sehr erweiterbar und um ein erweiterbares objektorientiertes Muster ausgestattet. Mit dieser integrierten Erweiterbarkeit können Sie neue Steuerelemente, Vorlagen, I18-Bündel und benutzerdefinierte Datendauer für Ihre Projekte erweitern und implementieren. Alpaca Formulare bietet umfassende Dokumentation, dass Formbauer und Entwickler für die Arbeit mit Feldsteuerungen, Layouts, Vorlagen, Rückrufen und anderen Erweiterbarkeitspunkten innerhalb von Alpaka verweisen können.

Merkmale

Im Folgenden finden Sie die wichtigsten Merkmale von Alpaka -Formen

  • JSON-gesteuert
  • Unterstützt Jquery UI, Jquery Mobile und HTML5 für die gerenderte Ausgabe
  • Lenkervorlagen
  • Erweiterbarkeit
  • Eine umfassende Dokumentation
  • Eine große Anzahl unterstützter Kontrollen
  • Unterstützen Sie mehrere Arten von Datenquellen
  • Unterstützung für Rückrufe
  • unterstützt von Cloud CMS
  • Es ist frei und Open Source

Installationsanleitung

Kopieren Sie den folgenden Code in den Block Ihrer Webseite:

    <!-- dependencies (jquery, handlebars and bootstrap) -->
      <script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
      <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
      <link type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
      <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
      <!-- alpaca -->
      <link type="text/css" href="//cdn.jsdelivr.net/npm/alpaca@1.5.27/dist/alpaca/bootstrap/alpaca.min.css" rel="stylesheet"/>
      <script type="text/javascript" src="//cdn.jsdelivr.net/npm/alpaca@1.5.27/dist/alpaca/bootstrap/alpaca.min.js"></script>

Rufen Sie $ .alpaca () mit Ihrem Formularschema und einer beliebigen Konfiguration an:

     
    <div id="form1"></div>
    <script type="text/javascript">
    $("#form1").alpaca({
        "schema": {
            "title": "What do you think of Alpaca?",
            "type": "object",
            "properties": {
                "name": {
                    "type": "string",
                    "title": "Name"
                },
                "ranking": {
                    "type": "string",
                    "title": "Ranking",
                    "enum": ['excellent', 'not too shabby', 'alpaca built my hotrod']
                }
            }
        }
    });
    </script>

Dadurch wird das folgende HTML5 -Formular mithilfe von Twitter -Bootstrap- und Alpaka -Kombination generiert.

 Deutsch