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