jQuery Mobile फॉर्म इनपुट एलीमेंट

jQuery Mobile टेक्सट इनपुट

इनपुट फील्ड एक मानक HTML एलीमेंट के द्वारा लिखे गए हैं, jQuery Mobile उनके लिए गतिशील उपकरणों के लिए विशेष रूप से अनुकूल और उपयोगी शैली निर्धारित करता है। आप नए HTML5 <input> तरीकों का भी इस्तेमाल कर सकते हैं:

इंस्टांस

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="fullname">पूर्ण नाम:</label>
    <input type="text" name="fullname" id="fullname">
    <label for="bday">जन्मदिन:</label>
    <input type="date" name="bday" id="bday">
    <label for="email">ईमेल:</label>
    <input type="email" name="email" id="email" placeholder="आपका ईमेल पता..">
  </div>
</form>

स्वयं की जाँच करें

सुझाव:याद दें कि placeholder का इस्तेमाल करके आप इनपुट फील्ड के अपेक्षित मान को संक्षिप्त रूप से वर्णित कर सकते हैं:

<input placeholder="sometext">

टेक्सट बॉक्स

अधिक पाठ इनपुट को लागू करने के लिए <textarea> का इस्तेमाल करें।

नोट:टेक्सट बॉक्स आपके टेक्स्ट पाठ के अनुसार स्वचालित रूप से विस्तारित होता है।

इंस्टांस

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="info">अतिरिक्त सूचना:</label>
    <textarea name="addinfo" id="info"></textarea>
  </div>
</form>

स्वयं की जाँच करें

सर्च बॉक्स

इनपुट तरीका type="search" HTML5 में एक नया तरीका है, जो खोज शब्दों के लिए टेक्स्ट फील्ड को परिभाषित करने के लिए इस्तेमाल किया जाता है:

इंस्टांस

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="search">Search:</label>
    <input type="search" name="search" id="search">
  </div>
</form>

स्वयं की जाँच करें

एकल विकल्प

जब उपयोगकर्ता केवल सीमित संख्या में विकल्पों में से एक को चुनता है, तो एकल विकल्प का इस्तेमाल किया जाता है।

यदि आप एक एकल विकल्प बनाना चाहते हैं, तो type="radio" के इनपुट एलीमेंट और उसके लिए लेबल जोड़ें। एक <fieldset> एलीमेंट में एकल विकल्प पैक करें। आप एक <legend> एलीमेंट भी जोड़ सकते हैं ताकि <fieldset> का शीर्षक निर्धारित कर सकें।

सुझाव:इन बटनों को एकत्रित करने के लिए data-role="controlgroup" गुण का उपयोग करें:

इंस्टांस

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend>अपना लिंग चुनें:</legend>
      <label for="male">पुरुष</label>
      <input type="radio" name="gender" id="male" value="male">
      <label for="female">महिला</label>
      <input type="radio" name="gender" id="female" value="female"> 
  </fieldset>
</form>

स्वयं की जाँच करें

चेकबॉक्स

यदि उपयोगकर्ता एक या अधिक विकल्पों में से एक या अधिक विकल्पों को चुनता है, तो चेकबॉक्स का उपयोग किया जाता है:

इंस्टांस

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend>आप जितने पसंदीदा रंग चुनना चाहेंगे, उतने चुनें:</legend>
      <label for="red">रेड</label>
      <input type="checkbox" name="favcolor" id="red" value="red">
      <label for="green">ग्रीन</label>
      <input type="checkbox" name="favcolor" id="green" value="green">
      <label for="blue">ब्लू</label>
      <input type="checkbox" name="favcolor" id="blue" value="blue"> 
  </fieldset>
</form>

स्वयं की जाँच करें

और अधिक उदाहरण

यदि आप रेडियो बॉक्स या चेकबॉक्स को अनुक्रमित समूह में रखना चाहते हैं, तो data-type="horizontal" गुण का उपयोग करें:

इंस्टांस

<fieldset data-role="controlgroup" data-type="horizontal">

स्वयं की जाँच करें

आप इसके साथ <fieldset> को पैकेज कर सकते हैं:

इंस्टांस

<div data-role="fieldcontain">
  <fieldset data-role="controlgroup">
    <legend>अपना लिंग चुनें:</legend>
  </fieldset>
</div>

स्वयं की जाँच करें

यदि आप किसी बटन को 'पूर्वनिर्धारित' करना चाहते हैं, तो HTML <input> टैग की 'सही' विशेषता का उपयोग करें:

इंस्टांस

<input type="radio"> सही>
<input type="checkbox"> सही>

स्वयं की जाँच करें