नि: शुल्क खुला स्रोत jQuery फॉर्म बिल्डर

Alpaca Forms नि: शुल्क फॉर्म बिल्डर

इंटरेक्टिव HTML5 फॉर्म के लिए ओपन सोर्स jQuery फॉर्म बिल्डर

Alpaca फॉर्म JSON स्कीमा और हैंडलबार टेम्प्लेट का उपयोग करके अपने वेब और मोबाइल एप्लिकेशन के लिए इंटरैक्टिव HTML5 फॉर्म के लिए एक ओपन-सोर्स JQuery फॉर्म बिल्डर है।

अवलोकन

बहुत सारे मुफ्त HTML5 फॉर्म जनरेटर टूल उपलब्ध हैं। लेकिन, Alpaca फॉर्म वेब और मोबाइल एप्लिकेशन के लिए HTML5 फॉर्म उत्पन्न करने के लिए एक बहुत ही सरल और आसान-से-उपयोग JQuery फॉर्म बिल्डर है। यह आपको ट्विटर बूटस्ट्रैप, JQuery UI, JQuery मोबाइल, और HTML5 के शीर्ष पर JSON स्कीमा और सिंपल हैंडलबार टेम्प्लेट का उपयोग करके महान दिखने वाले उपयोगकर्ता इंटरफेस उत्पन्न करने देता है। Alpaca एक बहुत ही उपयोगी JQuery फॉर्म डिज़ाइनर है, और आपको जो कुछ भी चाहिए वह बॉक्स से बाहर प्रदान किया गया है। यह नियंत्रण, टेम्प्लेट, लेआउट और सुविधाओं के एक बड़े पुस्तकालय के साथ पूर्व-पैक किया जाता है। अल्पाका एक JSON- चालित जावास्क्रिप्ट फॉर्म निर्माता है जो सुंदर रूपों को प्रस्तुत करना बहुत आसान बनाता है। यह बहुत एक्स्टेंसिबल है और एक एक्सपेंडेबल ऑब्जेक्ट-ओरिएंटेड पैटर्न के आसपास डिज़ाइन किया गया है। यह अंतर्निहित एक्सटेंसिबिलिटी आपको अपनी परियोजनाओं के लिए नए नियंत्रण, टेम्प्लेट, i18 बंडलों और कस्टम डेटा दृढ़ता का विस्तार और कार्यान्वयन करने की अनुमति देती है। ALPACA फॉर्म व्यापक प्रलेखन प्रदान करता है जो बिल्डरों और डेवलपर्स को फील्ड कंट्रोल, लेआउट, टेम्प्लेट, कॉलबैक और ALPACA के भीतर अन्य एक्सटेंसिबिलिटी पॉइंट्स के साथ काम करने के लिए संदर्भित कर सकते हैं।

विशेषताएँ

निम्नलिखित अल्पाका रूपों की प्रमुख विशेषताएं हैं

JSON- चालित
रेंडर आउटपुट के लिए JQuery UI, JQuery मोबाइल और HTML5 का समर्थन करता है
हैंडलबार टेम्प्लेट
एक्सटेंसिबिलिटी
एक व्यापक प्रलेखन
समर्थित नियंत्रणों की एक बड़ी संख्या
कई प्रकार के डेटा स्रोतों का समर्थन करें
कॉलबैक के लिए समर्थन
क्लाउड सीएमएस द्वारा समर्थित
इसका स्वतंत्र और खुला स्रोत

स्थापना निर्देश

निम्न कोड को अपने वेबपेज के ब्लॉक में कॉपी करें:

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

यह ट्विटर बूटस्ट्रैप और अल्पाका संयोजन का उपयोग करके निम्नलिखित HTML5 फॉर्म उत्पन्न करेगा।