libs/js/jquery-mobile-1.2.0/docs/forms/forms-themes.html

   1 <!DOCTYPE html>
   2 <html>
   3         <head>
   4         <meta charset="utf-8">
   5         <meta name="viewport" content="width=device-width, initial-scale=1">
   6         <title>jQuery Mobile Docs - Theming Forms</title>
   7         <link rel="stylesheet"  href="../../css/themes/default/jquery.mobile.css" />
   8         <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
   9
  10         <script src="../../js/jquery.js"></script>
  11         <script src="../../docs/_assets/js/jqm-docs.js"></script>
  12         <script src="../../js/"></script>
  13
  14 </head>
  15 <body>
  16
  17         <div data-role="page" class="type-interior">
  18
  19                 <div data-role="header" data-theme="f">
  20                 <h1>Theming forms</h1>
  21                 <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
  22                 <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
  23         </div><!-- /header -->
  24
  25         <div data-role="content">
  26         <div class="content-primary">
  27
  28     <h2>Form themes</h2>
  29     <p>jQuery Mobile has a rich <a href="../api/themes.html">theming system</a> that gives you full control of how pages and forms are styled. By default all form elements inside a container will automatically adopt the same theme color swatch as their parent. This allows form elements to blend into their layouts with minimal work. The <code> data-theme</code> attribute can be applied to any individual form element to apply any of the lettered theme color swatches to create contrast and emphasis in your designs.</p>
  30
  31     <p>All the form elements in the examples below use the same HTML code with no theme swatch specified on the individual form elements. The only difference between each example block code is a <code> data-theme</code> swatch color assigned to each parent container. This illustrates the way form elements automatically adopt the theme swatch of their parent.</p>
  32
  33         <form>
  34
  35         <h2>Body swatch "a"</h2>
  36         <div class="ui-body ui-body-a">
  37
  38                 <div data-role="fieldcontain">
  39          <label for="name-a">Text Input:</label>
  40          <input type="text" name="name" id="name-a" value=""  />
  41                 </div>
  42
  43                 <div data-role="fieldcontain">
  44                         <label for="switch-a">Flip switch:</label>
  45                         <select name="switch-a" id="switch-a" data-role="slider">
  46                                 <option value="off">Off</option>
  47                                 <option value="on">On</option>
  48                         </select>
  49                 </div>
  50
  51                 <div data-role="fieldcontain">
  52                         <label for="slider-a">Slider:</label>
  53                         <input type="range" name="slider" id="slider-a" value="0" min="0" max="100"  />
  54                 </div>
  55
  56
  57                 <div data-role="fieldcontain">
  58                 <fieldset data-role="controlgroup" data-type="horizontal">
  59                 <legend>Font styling:</legend>
  60                 <input type="checkbox" name="checkbox-6a" id="checkbox-6a" class="custom" />
  61                         <label for="checkbox-6a">b</label>
  62
  63                         <input type="checkbox" name="checkbox-7a" id="checkbox-7a" class="custom" />
  64                         <label for="checkbox-7a"><em>i</em></label>
  65
  66                         <input type="checkbox" name="checkbox-8a" id="checkbox-8a" class="custom" />
  67                         <label for="checkbox-8a">u</label>
  68             </fieldset>
  69                 </div>
  70
  71                 <div data-role="fieldcontain">
  72                     <fieldset data-role="controlgroup">
  73                         <legend>Choose a pet:</legend>
  74                                 <input type="radio" name="radio-choice-1" id="radio-choice-1a" value="choice-1" />
  75                                 <label for="radio-choice-1a">Cat</label>
  76
  77                                 <input type="radio" name="radio-choice-1" id="radio-choice-2a" value="choice-2"  />
  78                                 <label for="radio-choice-2a">Dog</label>
  79
  80                                 <input type="radio" name="radio-choice-1" id="radio-choice-3a" value="choice-3"  />
  81                                 <label for="radio-choice-3a">Hamster</label>
  82
  83                                 <input type="radio" name="radio-choice-1" id="radio-choice-4a" value="choice-4"  />
  84                                 <label for="radio-choice-4a">Lizard</label>
  85                     </fieldset>
  86                 </div>
  87
  88                 <div data-role="fieldcontain">
  89                         <label for="select-choice-a" class="select">Choose shipping method:</label>
  90                         <select name="select-choice-a" id="select-choice-a">
  91                                 <option value="standard">Standard: 7 day</option>
  92                                 <option value="rush">Rush: 3 days</option>
  93                                 <option value="express">Express: next day</option>
  94                                 <option value="overnight">Overnight</option>
  95                         </select>
  96                 </div>
  97
  98                 </div><!-- /body-a -->
  99
 100                 <h2>Body swatch "b"</h2>
 101                 <div class="ui-body ui-body-b">
 102
 103                         <div data-role="fieldcontain">
 104                  <label for="name-b">Text Input:</label>
 105                  <input type="text" name="name" id="name-b" value=""  />
 106                         </div>
 107
 108                         <div data-role="fieldcontain">
 109                                 <label for="switch-b">Flip switch:</label>
 110                                 <select name="switch-b" id="switch-b" data-role="slider">
 111                                         <option value="off">Off</option>
 112                                         <option value="on">On</option>
 113                                 </select>
 114                         </div>
 115
 116                         <div data-role="fieldcontain">
 117                                 <label for="slider-b">Slider:</label>
 118                                 <input type="range" name="slider" id="slider-b" value="0" min="0" max="100"  />
 119                         </div>
 120
 121
 122                         <div data-role="fieldcontain">
 123                         <fieldset data-role="controlgroup" data-type="horizontal">
 124                         <legend>Font styling:</legend>
 125                         <input type="checkbox" name="checkbox-6b" id="checkbox-6b" class="custom" />
 126                                 <label for="checkbox-6b">b</label>
 127
 128                                 <input type="checkbox" name="checkbox-7b" id="checkbox-7b" class="custom" />
 129                                 <label for="checkbox-7b"><em>i</em></label>
 130
 131                                 <input type="checkbox" name="checkbox-8b" id="checkbox-8b" class="custom" />
 132                                 <label for="checkbox-8b">u</label>
 133                     </fieldset>
 134                         </div>
 135
 136                         <div data-role="fieldcontain">
 137                             <fieldset data-role="controlgroup">
 138                                 <legend>Choose a pet:</legend>
 139                                         <input type="radio" name="radio-choice-1" id="radio-choice-1b" value="choice-1" />
 140                                         <label for="radio-choice-1b">Cat</label>
 141
 142                                         <input type="radio" name="radio-choice-1" id="radio-choice-2b" value="choice-2"  />
 143                                         <label for="radio-choice-2b">Dog</label>
 144
 145                                         <input type="radio" name="radio-choice-1" id="radio-choice-3b" value="choice-3"  />
 146                                         <label for="radio-choice-3b">Hamster</label>
 147
 148                                         <input type="radio" name="radio-choice-1" id="radio-choice-4b" value="choice-4"  />
 149                                         <label for="radio-choice-4b">Lizard</label>
 150                             </fieldset>
 151                         </div>
 152
 153                         <div data-role="fieldcontain">
 154                                 <label for="select-choice-b" class="select">Choose shipping method:</label>
 155                                 <select name="select-choice-b" id="select-choice-b">
 156                                         <option value="standard">Standard: 7 day</option>
 157                                         <option value="rush">Rush: 3 days</option>
 158                                         <option value="express">Express: next day</option>
 159                                         <option value="overnight">Overnight</option>
 160                                 </select>
 161                         </div>
 162
 163
 164                         </div><!-- /body-b -->
 165
 166
 167                         <h2>Body swatch "c"</h2>
 168                         <div class="ui-body ui-body-c">
 169
 170                                 <div data-role="fieldcontain">
 171                          <label for="name-c">Text Input:</label>
 172                          <input type="text" name="name" id="name-c" value=""  />
 173                                 </div>
 174
 175                                 <div data-role="fieldcontain">
 176                                         <label for="switch-c">Flip switch:</label>
 177                                         <select name="switch-c" id="switch-c" data-role="slider">
 178                                                 <option value="off">Off</option>
 179                                                 <option value="on">On</option>
 180                                         </select>
 181                                 </div>
 182
 183                                 <div data-role="fieldcontain">
 184                                         <label for="slider-c">Slider:</label>
 185                                         <input type="range" name="slider" id="slider-c" value="0" min="0" max="100"  />
 186                                 </div>
 187
 188
 189                                 <div data-role="fieldcontain">
 190                                 <fieldset data-role="controlgroup" data-type="horizontal">
 191                                 <legend>Font styling:</legend>
 192                                 <input type="checkbox" name="checkbox-6c" id="checkbox-6c" class="custom" />
 193                                         <label for="checkbox-6c">b</label>
 194
 195                                         <input type="checkbox" name="checkbox-7c" id="checkbox-7c" class="custom" />
 196                                         <label for="checkbox-7c"><em>i</em></label>
 197
 198                                         <input type="checkbox" name="checkbox-8c" id="checkbox-8c" class="custom" />
 199                                         <label for="checkbox-8c">u</label>
 200                             </fieldset>
 201                                 </div>
 202
 203                                 <div data-role="fieldcontain">
 204                                     <fieldset data-role="controlgroup">
 205                                         <legend>Choose a pet:</legend>
 206                                                 <input type="radio" name="radio-choice-1" id="radio-choice-1c" value="choice-1" />
 207                                                 <label for="radio-choice-1c">Cat</label>
 208
 209                                                 <input type="radio" name="radio-choice-1" id="radio-choice-2c" value="choice-2"  />
 210                                                 <label for="radio-choice-2c">Dog</label>
 211
 212                                                 <input type="radio" name="radio-choice-1" id="radio-choice-3c" value="choice-3"  />
 213                                                 <label for="radio-choice-3c">Hamster</label>
 214
 215                                                 <input type="radio" name="radio-choice-1" id="radio-choice-4c" value="choice-4"  />
 216                                                 <label for="radio-choice-4c">Lizard</label>
 217                                     </fieldset>
 218                                 </div>
 219
 220                                 <div data-role="fieldcontain">
 221                                         <label for="select-choice-c" class="select">Choose shipping method:</label>
 222                                         <select name="select-choice-c" id="select-choice-c">
 223                                                 <option value="standard">Standard: 7 day</option>
 224                                                 <option value="rush">Rush: 3 days</option>
 225                                                 <option value="express">Express: next day</option>
 226                                                 <option value="overnight">Overnight</option>
 227                                         </select>
 228                                 </div>
 229
 230
 231                                 </div><!-- /body-c -->
 232
 233
 234
 235                                 <h2>Body swatch "d"</h2>
 236                                 <div class="ui-body ui-body-d">
 237
 238                                         <div data-role="fieldcontain">
 239                                  <label for="name-d">Text Input:</label>
 240                                  <input type="text" name="name" id="name-d" value=""  />
 241                                         </div>
 242
 243                                         <div data-role="fieldcontain">
 244                                                 <label for="switch-d">Flip switch:</label>
 245                                                 <select name="switch-d" id="switch-d" data-role="slider">
 246                                                         <option value="off">Off</option>
 247                                                         <option value="on">On</option>
 248                                                 </select>
 249                                         </div>
 250
 251                                         <div data-role="fieldcontain">
 252                                                 <label for="slider-d">Slider:</label>
 253                                                 <input type="range" name="slider" id="slider-d" value="0" min="0" max="100"  />
 254                                         </div>
 255
 256
 257                                         <div data-role="fieldcontain">
 258                                         <fieldset data-role="controlgroup" data-type="horizontal">
 259                                         <legend>Font styling:</legend>
 260                                         <input type="checkbox" name="checkbox-6d" id="checkbox-6d" class="custom" />
 261                                                 <label for="checkbox-6d">b</label>
 262
 263                                                 <input type="checkbox" name="checkbox-7d" id="checkbox-7d" class="custom" />
 264                                                 <label for="checkbox-7d"><em>i</em></label>
 265
 266                                                 <input type="checkbox" name="checkbox-8d" id="checkbox-8d" class="custom" />
 267                                                 <label for="checkbox-8d">u</label>
 268                                     </fieldset>
 269                                         </div>
 270
 271                                         <div data-role="fieldcontain">
 272                                             <fieldset data-role="controlgroup">
 273                                                 <legend>Choose a pet:</legend>
 274                                                         <input type="radio" name="radio-choice-1" id="radio-choice-1d" value="choice-1" />
 275                                                         <label for="radio-choice-1d">Cat</label>
 276
 277                                                         <input type="radio" name="radio-choice-1" id="radio-choice-2d" value="choice-2"  />
 278                                                         <label for="radio-choice-2d">Dog</label>
 279
 280                                                         <input type="radio" name="radio-choice-1" id="radio-choice-3d" value="choice-3"  />
 281                                                         <label for="radio-choice-3d">Hamster</label>
 282
 283                                                         <input type="radio" name="radio-choice-1" id="radio-choice-4d" value="choice-4"  />
 284                                                         <label for="radio-choice-4d">Lizard</label>
 285                                             </fieldset>
 286                                         </div>
 287
 288                                         <div data-role="fieldcontain">
 289                                                 <label for="select-choice-d" class="select">Choose shipping method:</label>
 290                                                 <select name="select-choice-d" id="select-choice-d">
 291                                                         <option value="standard">Standard: 7 day</option>
 292                                                         <option value="rush">Rush: 3 days</option>
 293                                                         <option value="express">Express: next day</option>
 294                                                         <option value="overnight">Overnight</option>
 295                                                 </select>
 296                                         </div>
 297
 298
 299                                         </div><!-- /body-d -->
 300
 301
 302                                         <h2>Body swatch "e"</h2>
 303                                         <div class="ui-body ui-body-e">
 304
 305                                                 <div data-role="fieldcontain">
 306                                          <label for="name-e">Text Input:</label>
 307                                          <input type="text" name="name" id="name-e" value=""  />
 308                                                 </div>
 309
 310                                                 <div data-role="fieldcontain">
 311                                                         <label for="switch-e">Flip switch:</label>
 312                                                         <select name="switch-e" id="switch-e" data-role="slider">
 313                                                                 <option value="off">Off</option>
 314                                                                 <option value="on">On</option>
 315                                                         </select>
 316                                                 </div>
 317
 318                                                 <div data-role="fieldcontain">
 319                                                         <label for="slider-e">Slider:</label>
 320                                                         <input type="range" name="slider" id="slider-e" value="0" min="0" max="100"  />
 321                                                 </div>
 322
 323
 324                                                 <div data-role="fieldcontain">
 325                                                 <fieldset data-role="controlgroup" data-type="horizontal">
 326                                                 <legend>Font styling:</legend>
 327                                                 <input type="checkbox" name="checkbox-6e" id="checkbox-6e" class="custom" />
 328                                                         <label for="checkbox-6e">b</label>
 329
 330                                                         <input type="checkbox" name="checkbox-7e" id="checkbox-7e" class="custom" />
 331                                                         <label for="checkbox-7e"><em>i</em></label>
 332
 333                                                         <input type="checkbox" name="checkbox-8e" id="checkbox-8e" class="custom" />
 334                                                         <label for="checkbox-8e">u</label>
 335                                             </fieldset>
 336                                                 </div>
 337
 338                                                 <div data-role="fieldcontain">
 339                                                     <fieldset data-role="controlgroup">
 340                                                         <legend>Choose a pet:</legend>
 341                                                                 <input type="radio" name="radio-choice-1" id="radio-choice-1e" value="choice-1" />
 342                                                                 <label for="radio-choice-1e">Cat</label>
 343
 344                                                                 <input type="radio" name="radio-choice-1" id="radio-choice-2e" value="choice-2"  />
 345                                                                 <label for="radio-choice-2e">Dog</label>
 346
 347                                                                 <input type="radio" name="radio-choice-1" id="radio-choice-3e" value="choice-3"  />
 348                                                                 <label for="radio-choice-3e">Hamster</label>
 349
 350                                                                 <input type="radio" name="radio-choice-1" id="radio-choice-4e" value="choice-4"  />
 351                                                                 <label for="radio-choice-4e">Lizard</label>
 352                                                     </fieldset>
 353                                                 </div>
 354
 355                                                 <div data-role="fieldcontain">
 356                                                         <label for="select-choice-e" class="select">Choose shipping method:</label>
 357                                                         <select name="select-choice-e" id="select-choice-e">
 358                                                                 <option value="standard">Standard: 7 day</option>
 359                                                                 <option value="rush">Rush: 3 days</option>
 360                                                                 <option value="express">Express: next day</option>
 361                                                                 <option value="overnight">Overnight</option>
 362                                                         </select>
 363                                                 </div>
 364
 365
 366                                                 </div><!-- /body-e -->
 367
 368                 </form>
 369
 370                 </div><!--/content-primary -->
 371
 372                 <div class="content-secondary">
 373
 374                         <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
 375
 376                                         <h3>More in this section</h3>
 377
 378                                         <ul data-role="listview" data-theme="c" data-dividertheme="d">
 379
 380                                                 <li data-role="list-divider">Form elements</li>
 381                                                 <li><a href="docs-forms.html">Form basics</a></li>
 382                                                 <li><a href="forms-all.html">Form element gallery</a></li>
 383                                                 <li><a href="forms-all-mini.html">Mini form element gallery</a></li>
 384                                 <li><a href="textinputs/">Text inputs</a></li>
 385                                                 <li><a href="search/">Search inputs</a></li>
 386                                                 <li><a href="slider/">Slider</a></li>
 387                                                 <li><a href="switch/">Flip toggle switch</a></li>
 388                                                 <li><a href="radiobuttons/">Radio buttons</a></li>
 389                                                 <li><a href="checkboxes/">Checkboxes</a></li>
 390                                                 <li><a href="selects/">Select menus</a></li>
 391                                                 <li data-theme="a"><a href="forms-themes.html">Theming forms</a></li>
 392                                                 <li><a href="forms-all-native.html">Native form elements</a></li>
 393                                                 <li><a href="forms-sample.html">Submitting forms</a></li>
 394
 395
 396                                         </ul>
 397                         </div>
 398                 </div>
 399
 400         </div><!-- /content -->
 401
 402         <div data-role="footer" class="footer-docs" data-theme="c">
 403                 <p class="jqm-version"></p>
 404                 <p>&copy; 2012 jQuery Foundation and other contributors</p>
 405         </div>
 406
 407         </div><!-- /page -->
 408
 409         </body>
 410         </html>