無料のオープンソースjQueryフォームビルダー

Alpaca Forms 無料のフォームビルダー

インタラクティブなHTML5フォーム用のオープンソースjQueryフォームビルダー

Alpaca Formsは、JSONスキーマとハンドルバーテンプレートを使用したWebおよびモバイルアプリケーション用のインタラクティブなHTML5フォーム用のオープンソースJQueryフォームビルダーです。

無料のオープンソースjQueryフォームビルダー

Alpaca Forms

GitHub

概要

利用可能な無料のHTML5フォームジェネレーターツールがたくさんあります。しかし、Alpaca Formsは非常にシンプルで使いやすいJQueryフォームビルダーであり、Webおよびモバイルアプリケーション向けのHTML5フォームを生成します。 JSONスキーマとシンプルなハンドルバーテンプレートを使用して、Twitter Bootstrap、JQuery UI、JQuery Mobile、およびHTML5の上に、見栄えの良いユーザーインターフェイスを生成できます。 Alpacaは非常に便利なJQueryフォームデザイナーであり、必要なものはすべて箱から出して提供されます。コントロール、テンプレート、レイアウト、機能の大きなライブラリが事前にパッケージ化されています。 AlpacaはJSON主導のJavaScriptフォームの作成者であり、美しい形を簡単にレンダリングできます。 それは非常に拡張可能であり、拡張可能なオブジェクト指向のパターンを中心に設計されています。この組み込みの拡張性により、プロジェクトの新しいコントロール、テンプレート、I18バンドル、およびカスタムデータの永続性を拡張および実装できます。 Alpaca Formsは、フォームビルダーと開発者がAlpaca内のフィールドコントロール、レイアウト、テンプレート、コールバック、およびその他の拡張性ポイントを扱うために参照できる包括的なドキュメントを提供します。

特徴

以下は、Alpacaフォームの重要な機能です -JSON主導型

  • レンダリングされた出力をjQuery UI、JQuery Mobile、およびHTML5をサポートします
  • ハンドルバーテンプレート
  • 拡張性
  • 包括的なドキュメント
  • 多くのサポートされているコントロール
  • 複数のタイプのデータソースをサポートします
  • コールバックのサポート
  • クラウドCMSによってサポートされています
  • その無料のオープンソース

インストール手順

次のコードをWebページのブロックにコピーします。

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

フォームスキーマと任意の構成で$ .alpaca（）を呼び出します。

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

これにより、Twitter BootstrapとAlpacaの組み合わせを使用して、次のHTML5フォームが生成されます。

 日本