जकीरी मोबाइल फॉर्म

जकीरी मोबाइल स्वचालित रूप से एचटीएमएल फॉर्म को अच्छी और टैच-फ्रेंडली आकृति देता है।

जकीरी मोबाइल फॉर्म संरचना

जकीरी मोबाइल सीएसएस का उपयोग करता है, ताकि एचटीएमएल फॉर्म एलीमेंट के शैली सेट कर सके, ताकि उसे अधिक आकर्षक और उपयोगी बनाया जा सके।

जकीरी मोबाइल में, आप नीचे के फॉर्म कंट्रोलर का उपयोग कर सकते हैं:

  • टेक्स्ट बॉक्स
  • सर्च बॉक्स
  • रेडियो बॉक्स
  • चेकबॉक्स
  • चयन मेनू
  • स्क्रॉल बार
  • फ्लैप स्विच

जब आप जकीरी मोबाइल फॉर्म से व्यापार करते हैं, तो आपको नीचे की जानकारी जाननी चाहिए:

  • <form> एलीमेंट को method और action गुण सेट करना होगा
  • प्रत्येक फॉर्म एलीमेंट को एक अद्वितीय "id" गुण को सेट करना होगा। यह id वेबसाइट के पृष्ठ में अद्वितीय होना चाहिए। इसका कारण जकीरी मोबाइल के एकल पृष्ठ नेविगेशन मॉडल की अनेक विभिन्न "पृष्ठ" को साथ में प्रस्तुत करने की अनुमति देता है।
  • हर फॉर्म एलीमेंट को एक टैग (लेबल) होना चाहिए। लेबल के for एट्रिब्यूट को एलीमेंट के id से मेल खाना चाहिए।

उदाहरण

<form method="post" action="demoform.asp">
  <label for="fname">First name:</label>
  <input type="text" name="fname" id="fname">
</form>

स्वयं प्रयास करें

यदि आप लेबल को छुपाना चाहते हैं, तो वर्ग ui-hidden-accessible का उपयोग करें। यह बहुत आम है, जब आप एलीमेंट के placeholder एट्रिब्यूट को लेबल के रूप में उपयोग करना चाहते हैं:

उदाहरण

<form method="post" action="demoform.asp">
  <label for="fname" class="ui-hidden-accessible">नाम：</label>
  <input type="text" name="fname" id="fname" placeholder="नाम...">
</form>

स्वयं प्रयास करें

क्षेत्र कंटेनर

यदि आप लेबल और फॉर्म एलीमेंट को विशाल स्क्रीन पर सही तरीके से दिखाना चाहते हैं, तो data-role="fieldcontain" एट्रिब्यूट वाले <div> या <fieldset> एलीमेंट को लेबल या फॉर्म एलीमेंट को रूपांतरित करें:

उदाहरण

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="fname">First name:</label>
    <input type="text" name="fname" id="fname">
    <label for="lname">Last name:</label>
    <input type="text" name="lname" id="lname">
  </div>
</form>

स्वयं प्रयास करें

सूचना:fieldcontain एट्रिब्यूट पृष्ठभूमि चौड़ाई के आधार पर लेबल और फॉर्म कंट्रोल के स्टाइल निर्धारित करता है। जब पृष्ठभूमि चौड़ाई 480px से अधिक होती है तो यह ऑटोमेटिक रूप से लेबल और फॉर्म कंट्रोल को एक ही पंक्ति में रखता है। जब 480px से कम होती है तो लेबल फॉर्म एलीमेंट के ऊपर रखा जाता है。

सूचना:यदि आप जीके एम ऑटोमेटिक रूप से क्लिक करनेवाले एलीमेंट को स्टाइल सेट करना नहीं चाहते, तो data-role="none" एट्रिब्यूट का उपयोग करें:

उदाहरण

<label for="fname">First name:</label>
<input type="text" name="fname" id="fname"> data-role="none">

स्वयं प्रयास करें

jQuery मोबाइल में फॉर्म सबमिट करने के लिए

सूचना:जेक्वरी मोबाइल फॉर्म को ऑटोमेटिक रूप से AJAX के माध्यम से सबमिट करेगा और सर्वर की प्रतिक्रिया को अनुप्रयोग के DOM में एकीकृत करने की कोशिश करेगा。