jQuery Mobile - Form Structure

It is used to create a form layout to collect user input. The <form> element should contain action and method attribute that submit via HTTP POST or GET. Following form controls can be used to create the structure. 
Text Input
Select Input
Checkbox Input
Radio Input
Slider Input
Search Input
Following example demonstrates the use of form structure in jQuery Mobile.
<!DOCTYPE html>
<html>
   <head>
      <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</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">Belgaum</option>
                  <option value = "2">Pune</option>
                  <option value = "3">Chennai</option>
                  <option value = "4">Bangalore</option>
                  <option value = "5">Mumbai</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">BE
               </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>
Let's carry out the following steps to see how the above code works −
Save the above html code as form_structure.html file in your server root folder.
Save the above html code as form_structure.html file in your server root folder.
Open this HTML file as http://localhost/form_structure.html and the following output will be displayed.
Open this HTML file as http://localhost/form_structure.html and the following output will be displayed.

    27 Lectures 
     1 hours 

 Mahesh Kumar

    27 Lectures 
     1.5 hours 

 Pratik Singh

    72 Lectures 
     4.5 hours 

 Frahaan Hussain

    60 Lectures 
     9 hours 

 Eduonix Learning Solutions

    17 Lectures 
     2 hours 

 Sandip Bhattacharya

    12 Lectures 
     53 mins

 Laurence Svekis
 Print
 Add Notes
 Bookmark this page