Gratis open source jQuery Form Builder

Alpaca Forms Free Form Builder

Open Source JQuery Form Builder för interaktiva HTML5 -formulär

Alpaca-formulär är en öppen källkodsformulär för jQuery-form, för interaktiva HTML5-formulär för dina webb- och mobilapplikationer med JSON-schema och styrmallar.

Gratis open source jQuery Form Builder

Alpaca Forms

GitHub

Översikt

Det finns massor av gratis HTML5 -formgeneratorverktyg tillgängliga. Men Alpaca-formulär är en mycket enkel och lättanvänd jQuery-formulärbyggare för att generera HTML5-formulär för webb- och mobilapplikationer. Det låter dig generera väldigt snygga användargränssnitt ovanpå Twitter Bootstrap, jQuery UI, JQuery Mobile och HTML5 med JSON-schema och enkla styrmallar. Alpaca är en mycket användbar jQuery -formdesigner, och allt du behöver tillhandahålls ur lådan. Det kommer förpackat med ett stort bibliotek med kontroller, mallar, layouter och funktioner. Alpaca är en JSON-driven JavaScript-formskapare som gör det mycket enkelt att göra vackra former. Det är mycket utdragbart och utformat kring ett utbyggbart objektorienterat mönster. Denna inbyggda utdragbarhet gör att du kan utöka och implementera nya kontroller, mallar, I18-buntar och anpassad datapersistens för dina projekt. ALPACA -formulär tillhandahåller omfattande dokumentation som bildar byggare och utvecklare kan referera för att arbeta med fältkontroller, layouter, mallar, återuppringningar och andra extensibilitetspunkter inom Alpaca.

Funktioner

Följande är de viktigaste funktionerna i alpakkaformulär

  • JSON-driven
  • Stöder jQuery UI, JQuery Mobile och HTML5 för återgiven utgång
  • styrmallar
  • Förlängbarhet
  • En omfattande dokumentation
  • Ett stort antal stöd som stöds
  • Stöd flera typer av datakällor
  • Stöd för återuppringningar
  • Stöds av moln CMS
  • Det är gratis och öppen källkod

Installations instruktioner

Kopiera följande kod till din webbsida:

    <!-- 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>

Ring $ .Alpaca () med ditt formulärschema och alla konfigurationer:

     
    <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>

Detta kommer att generera följande HTML5 -form med Twitter Bootstrap och Alpaca -kombination.

 Svenska