Page 94 - JqueryMobile_Manual
P. 94

94

                   </form>
                 </div>
               </div>

               </body>
               </html>

                                            Pre-select radio button/checkbox
                                                  tryjqmob_forms_checked.html
               <!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">
                 <h1>Radio Buttons and Checkboxes</h1>
                 </div>

                 <div data-role="main" class="ui-content">
                   <form method="post" action="/action_page_post.php">
                     <fieldset data-role="controlgroup">
                     <legend>Choose your gender:</legend>
                       <label for="male">Male</label>
                       <input type="radio" name="gender" id="male" value="male" checked>
                       <label for="female">Female</label>
                       <input type="radio" name="gender" id="female" value="female">
                     </fieldset>

                     <fieldset data-role="controlgroup">
                       <legend>Choose as many favorite colors as you'd like:</legend>
                         <label for="red">Red</label>
                         <input type="checkbox" name="favcolor" id="red" value="red" checked>
                         <label for="green">Green</label>
                         <input type="checkbox" name="favcolor" id="green" value="green">
                         <label for="blue">Blue</label>
                         <input type="checkbox" name="favcolor" id="blue" value="blue" checked>
                     </fieldset>
                     <input type="submit" data-inline="true" value="Submit">
                   </form>
                 </div>
               </div>

               </body>
               </html>
   89   90   91   92   93   94   95   96   97   98   99