JQuery Mobile in Hindi Forms Basics

First Page

jQuery Mobile Form के लिये एक बहुत आसान और एक बहुत Strong Versatile Layout System प्रदान करता है जो Form Styles को Input Button और Slider Support आपस में जोड़ता है.

jQuery Mobile मे HTML Forms को Automatic रूप से किया जाता है जिससे Form को बहुत Attractive और अनुकूल उपयोग में लाया जा सके.

Form Structure

User Input को Save करने के लिए और एक Form Layout को Design करने के लिए इसका उपयोग करता है.

Form Element में Proceedings और Method का Attribute होना चाहिए जो HTTP POST और GET के माध्यम से जमा कर सकें.

Text Input
Select Input
Checkbox Input
Radio Input
Slider Input
Search Input

For Example

<!DOCTYPE html>
<html>
   <head>
      <title>Form Structure Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>
   
   <body>
      <div data-role = "page">
         <div data-role = "header">
            <h2>Form Structure Example</h2>
         </div>
      
         <div data-role = "main" class = "ui-content">
            <form method = "post" action="demo.php">
               <label for = "fname">Name</label>
                  <input type = "text" name = "fname" id = "fname" 
                     placeholder = "Full Name">

               <label for = "date">Date</label>
               <input type = "date" name = "date" id = "date">

               <label for = "select">Select City</label>
               <select name = "select" id = "select">
                  <option value = "1">Seoul, South Korea</option>
                  <option value = "2">Ljubljana, Slovenia</option>
                  <option value = "3">Wroclaw, Poland</option>
                  <option value = "4">Nashville, USA</option>
                  <option value = "5">Vancouver, Canada</option>
               </select>

               Flipswitch
               <input type = "checkbox" data-role = "flipswitch"><br/>

               Gender
               <label for = "radio1">
                  <input type = "radio" name = "radio-choice-0" id = "radio1">Male</input>
               </label>
               
               <label for = "radio2">
                  <input type = "radio" name = "radio-choice-0" id = "radio2">Female</input>
               </label>
               
               <label for = "radio3">
                  <input type = "radio" name = "radio-choice-0" id = "radio3">Other</input   >
               </label>

               Education Qualification
               <label for = "checkbox1">
                  <input type = "checkbox" id = "checkbox1">B Tech
               </label>
               
               <label for = "checkbox2">
                  <input type = "checkbox" id = "checkbox2">BCA
               </label>
               
               <label for = "checkbox3">
                  <input type = "checkbox" id = "checkbox3">BBA
               </label>
               
               <label for = "checkbox4">
                  <input type = "checkbox" id = "checkbox4">MBA
               </label>
               
               <label for = "checkbox5">
                  <input type = "checkbox" id = "checkbox5">MCA
               </label>
            </form>
         </div>
      </div>
      
   </body>
</html>

Output

Form Buttons

jQuery Mobile Button Style को Supports करता है आप इनको अपनी आवश्यकताओं के अनुसार Use कर सकता हो. jQuery Mobile में <Input> Element Code Button के लिए उपयोग किया जाता है.

For Example

<!DOCTYPE html>
<html>
   <head>
      <title>Form Buttons Example</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>
   
   <body>
      <div data-role="page">
         <div data-role="header">
            <h2>Form Button Example</h2>
         </div>
      
         <div data-role="main" class="ui-content">
            <form method="post" action="jquery_mobile/demo.php">
               <label for="fname">First Name</label>
               <input type="text" name="fname">
               <label for="lname">Last Name</label>
               <input type="text" name="lname">

               <input type="submit" value="Submit Button" data-inline="true" 
                  data-corner="true">
               <input type="reset" value="Reset Button" data-inline="true" 
                  data-corner="true">
            </form>
         </div>
      </div>
   </body>
</html>

Output

Form Field Container

Form मे ui-field-contain Class का उपयोग Form मे Label और Input को Involution करने के लिए किया जाता है.

For Example

<!DOCTYPE html>
<html>
   <head>
      <title>Form Field Container Example</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>
   
   <body>
      <div data-role="page">
         <div data-role="header">
            <h2>Form Field contain Example</h2>
         </div>
         
         <div data-role="main" class="ui-content">
            <form method="post" action="jquery_mobile/demo.php">
               <div class="ui-field-contain">
                  <label for="fname">First Name</label>
                  <input type="text" name="fname">
                  <label for="lname">Last Name</label>
                  <input type="text" name=name">

                  <label for="select">Select City</label>
                  <select name="select" id="select">
                     <option value="1">Japan</option>
                     <option value="2">Germany</option>
                     <option value="3">United Kingdom</option>
                     <option value="4">India</option>
                     <option value="5">France</option>
                  </select>

                  <input type="submit" value="Submit" data-inline="true">
               </div>
            </form>
         </div>
      </div>
      
   </body>
</html>

Output

First Page