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