Open In App

How to design form controls for mobiles using jQuery Mobile BootstrapTheme plugin ?

Improve
Improve
Like Article
Like
Save
Share
Report

The purpose of this article is to introduce some form or user input controls for mobile web designers using the jQuery Mobile Bootstrap Theme plugin. These CSS based UI controls are very attractive and interactive and help developers build beautiful apps. 

To design and implement the plugin, please download the required pre-compiled files or libraries from the link and save it in your working folder. The file path names should be taken care of while coding. 

Note: Please include the “head” section in all the following codes as implemented in the first example for relevant library inclusion for the plugin as shown above.

Example 1: The following code demonstrates some UI form controls using specific classes of the above-mentioned plugin. Refer output images for knowing the controls better.

HTML




<!doctype html>
<html>
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
        content="width=device-width,initial-scale=1">
  
    <!--The plugin CSS library -->
    <link rel="stylesheet" href="themes/Bootstrap.css">
    <link rel="stylesheet" 
      
    <link rel="stylesheet" 
        href="themes/jquery.mobile.icons.min.css" />
      
    <script 
    </script>
      
    <!--Pre-compiled library for jQuery Mobile-->
    <script 
    </script>       
</head>
  
<body>
    <div data-role="page" data-theme="a">
        <div data-role="header" data-position="inline">
            <h1>
                jQuery Mobile Bootstrap Theme - user form controls
            </h1>             
        </div>
  
        <div data-role="content" data-theme="a">                
            <form action="#" method="get">
                <!--Text input control -->
                <div data-role="fieldcontain">
                    <label for="name">Text Input:</label>
                    <input type="text" name="name" id="name"
                                value=""  />
                </div>
                <!--Text area control -->
                <div data-role="fieldcontain">
                    <label for="textarea">Textarea:</label>
                    <textarea cols="40" rows="8" 
                                 name="textarea" id="textarea">
                    </textarea>
                </div>
                  
                <!--Search input control -->
                <div data-role="fieldcontain">
                    <label for="search">Search Input:</label>
                    <input type="search" name="password" 
                                 id="search" value=""  />
                </div>
                  
                <!--Switch on/off control -->
                <div data-role="fieldcontain">
                    <label for="slider2">Toggle switch:</label>
                    <select name="slider2" id="slider2" data-role="slider">
                    <option value="off">Off</option>
                    <option value="on">On</option>
                    </select>
                </div>
                  
                <!--Slider -->
                <div data-role="fieldcontain">
                    <label for="slider">Slider:</label>
                    <input type="range" name="slider" id="slider" 
                    value="50" min="0" max="100" data-highlight="true"  />
                </div>
                  
                <!--Check box control -->
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup">
                        <legend>Choose food of your choice:</legend>
                        <input type="checkbox" name="checkbox-1a" 
                                    id="checkbox-1a" class="custom" />
                        <label for="checkbox-1a">Pastas</label>
  
                        <input type="checkbox" name="checkbox-2a" 
                                    id="checkbox-2a" class="custom" />
                        <label for="checkbox-2a">Pizzas</label>
  
                        <input type="checkbox" name="checkbox-3a" 
                                    id="checkbox-3a" class="custom" />
                        <label for="checkbox-3a">Mexican Enchilada</label>
  
                        <input type="checkbox" name="checkbox-4a" 
                                    id="checkbox-4a" class="custom" />
                        <label for="checkbox-4a">Indian Biryani</label>
                    </fieldset>
                </div>
                  
                <!--Submit buttons -->
                <div class="ui-body ui-body-b">
                    <fieldset class="ui-grid-a">
                        <div class="ui-block-a">
                            <button type="submit" data-theme="d">
                                Cancel
                            </button
                        </div>
                        <div class="ui-block-b">
                            <button type="submit" data-theme="a">
                                Submit
                            </button>
                        </div>
                    </fieldset>
                </div>
            </form>
  
        </div>
    </div>
</body>
  
</html>


Output: 
 

Example 2:

html




<!doctype html>
<html>
<body>
    <div data-role="page" data-theme="a">
    <div data-role="header" data-position="inline">
       <h1>jQuery Mobile Bootstrap Theme</h1>                
    </div>
    <div data-role="content" data-theme="a">
  
      <form action="#" method="get">                
  
      <div data-role="fieldcontain">
         <fieldset data-role="controlgroup">
        <legend>Choose a sport:</legend>
        <input type="radio" name="radio-choice-1" 
                  id="radio-choice-1" value="choice-1" 
                  checked="checked" />
        <label for="radio-choice-1">Hockey</label>
  
        <input type="radio" name="radio-choice-1" 
                       id="radio-choice-2" value="choice-2"  />
        <label for="radio-choice-2">Badminton</label>
  
        <input type="radio" name="radio-choice-1" 
                      id="radio-choice-3" value="choice-3"  />
        <label for="radio-choice-3">Tennis</label>
  
        <input type="radio" name="radio-choice-1" 
                       id="radio-choice-4" value="choice-4"  />
        <label for="radio-choice-4">Football</label>
           </fieldset>
        </div>
  
        <div data-role="fieldcontain">
        <fieldset data-role="controlgroup" data-type="horizontal">
        <legend>Select Gender:</legend>
        <input type="radio" name="radio-choice-b" 
                       id="radio1" value="on" checked="checked" />
        <label for="radio1">Male</label>
        <input type="radio" name="radio-choice-b" 
                       id="radio2" value="off" />
        <label for="radio2">Female</label>
                              
        </fieldset>
        </div>
  
        <div data-role="fieldcontain">
        <label for="select-choice-a" class="select">
                  Choose country:</label>
        <select name="select-choice-a" id="select-choice-a" 
                        data-native-menu="false">                            
          <option value="india">India</option>
          <option value="australia">Australia</option>
          <option value="china">China</option>
          <option value="japan">Japan</option>
        </select>
        </div>                    
            </form>
         </div>
    </div>
    </body>
</html>


Output: 

Example 3: The following code shows some buttons for mobile UI design.

html




<html>
<body>
    <div data-role="page" data-theme="a">
      <div data-role="header" data-position="inline">
        <h1>jQuery Mobile Bootstrap Theme Buttons</h1>                
       </div>
       <div data-role="content" data-theme="a">                
        <!-- "yourFile.html" is the target file -->        
        <a href="yourfile.html" data-role="button" data-theme="a" 
             data-icon="star">Star button</a>
        <a href="" data-role="button" data-theme="b" 
              data-icon="search">Search</a>
         <a href="" data-role="button" data-theme="c" data-icon="check">
               Check</a>
         <a href="" data-role="button" data-theme="d" data-icon="info">
                Info</a>
         <a href="" data-role="button" data-theme="e" data-icon="arrow-d">
                Download</a>
          <a href="" data-role="button" data-theme="f" data-icon="delete">
                Delete</a>
         </div>
       </div>
    </body>
</html>


Output: 

Example 4: The following code shows some listviews for mobile design.

html




<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
        content="width=device-width,initial-scale=1">
  
    <!--The plugin CSS library -->
    <link rel="stylesheet" href="themes/Bootstrap.css">
    <link rel="stylesheet" 
      
    <link rel="stylesheet" 
        href="themes/jquery.mobile.icons.min.css" />
      
    <script 
    </script>
      
    <!--Pre-compiled library for jQuery Mobile-->
    <script 
    </script>       
</head>
  
<body>
    <div data-role="page" data-theme="a">
        <div data-role="header" data-position="inline">
            <h1>jQuery Mobile Bootstrap Theme Listviews</h1>                
        </div>
  
        <div data-role="content" data-theme="a">                
            <ul data-role="listview" data-inset="true" 
                 data-divider-theme="a">
                <li data-role="list-divider">Gear list item</li>
                <li data-icon="gear"><a href="">list item 1</a></li>                    
            </ul>
  
            <ul data-role="listview" data-inset="true" 
                  data-divider-theme="b">
                <li data-role="list-divider">Info style list item</li>
                <li data-icon="info"><a href="">list item 1</a></li>
            </ul>
  
            <ul data-role="listview" data-inset="true" 
                  data-divider-theme="c">
                <li data-role="list-divider">checkbox list item</li>
                <li data-icon="check"><a href="">list item 1</a></li>
            </ul>
  
            <ul data-role="listview" data-inset="true" 
                   data-divider-theme="d">
                <li data-role="list-divider">Grid style list item</li>
                <li data-icon="grid"><a href="">list item 1</a></li>
            </ul>
  
            <ul data-role="listview" data-inset="true" 
                   data-divider-theme="e">
                <li data-role="list-divider">Alert list item</li>
                <li data-icon="alert"><a href="">list item 1</a></li>
            </ul>
  
            <ul data-role="listview" data-inset="true" 
                  data-divider-theme="f">
                <li data-role="list-divider">Refresh list item</li>
                <li data-icon="refresh"><a href="">list item 1</a></li>
            </ul>
  
        </div>
    </div>
</body>
    
</html>


Output: 

Example 5: The following example shows various navigation controls for mobile design. The “yourFile.html” is the target file used in the code. The developer can include file name as required.

html




<!doctype html>
<html>
    
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
        content="width=device-width,initial-scale=1">
  
    <!--The plugin CSS library -->
    <link rel="stylesheet" href="themes/Bootstrap.css">
    <link rel="stylesheet" 
      
    <link rel="stylesheet" 
        href="themes/jquery.mobile.icons.min.css" />
      
    <script 
    </script>
      
    <!--Pre-compiled library for jQuery Mobile-->
    <script 
    </script>       
</head>
  
<body>
    <div data-role="page" data-theme="a">
        <div data-role="header" data-position="inline">
            <h1>jQuery Mobile Bootstrap Theme - Navigation</h1>                
        </div>
  
        <div data-role="content" data-theme="a">    
            <div data-role="footer" data-theme="f">
                <div data-role="navbar">
                <ul>
                <li><a href="#" data-icon="check">Yes</a></li>
                <li><a href="#" data-icon="delete">No</a></li>
                <li><a href="#" data-icon="alert">Maybe</a></li>
                </ul>
                </div>
            </div>
            <br/>
  
            <div data-role="footer" data-theme="a">
                <a href="yourFile.html" data-role="button" 
                          data-icon="arrow-l" data-iconpos="right">
                        left</a>
                <a href="yourFile.html" data-role="button" 
                          data-icon="arrow-r" data-iconpos="right">
                       right</a>                    
            </div>
  
            <div data-role="footer" data-theme="b">                 
                <a href="yourFile.html" data-role="button" 
                            data-icon="arrow-u"
                            data-iconpos="right">up</a>
                <a href="yourFile.html" data-role="button"
                           data-icon="arrow-d" 
                           data-iconpos="right">down</a>
            </div>
  
            <div data-role="footer" data-theme="c">
                <a href="yourFile.html" data-role="button" 
                        data-icon="arrow-l"
                        data-iconpos="right">left</a>                   
            </div>
  
            <div data-role="footer" data-theme="d">                 
                <a href="yourFile.html" data-role="button" 
                         data-icon="arrow-r" data-iconpos="right">
                        right</a>                   
            </div>
  
                <div data-role="footer" data-theme="e">
                <a href="yourFile.html" data-role="button" 
                         data-icon="arrow-d" data-iconpos="right">
                         down</a>
            </div>              
        </div>
    </div>
</body>
    
</html>


Output: 



Last Updated : 15 Dec, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads