案例：jquery Mobile案例     状态：可编辑再运行    进入竖版
 运行结果　
​x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<link rel="stylesheet" href="/js/jquery.mobile-1.3.2.min.css">
5
<script src="/js/jquery-1.8.3.min.js"></script>
6
<script src="/js/jquery.mobile-1.3.2.min.js"></script>
7
</head>
8
<body>
9
​
10
<div data-role="page" id="pageone">
11
  <div data-role="header">
12
  <h1>主题化表单</h1>
13
  </div>
14
​
15
  <div data-role="content" data-theme="e">
16
  <form method="post" action="/example/demo_form.aspx">
17
  <div data-role="fieldcontain">
18
    <label for="name">全名：</label>
19
    <input type="text" name="fname" id="name" placeholder="您的姓名..." data-theme="a">
20
    <br><br>
21
22
    <label for="search">您需要搜索什么？</label>
23
    <input type="search" name="lname" id="search" placeholder="需要搜索的内容..." data-theme="d">
24
    <br><br>
25
​
26
    <label for="date">今天的日期：</label>
27
    <input type="date" name="email" id="date">
28
    <br><br>
29
30
    <label for="colors">请选择喜爱的颜色：</label>
31
    <select id="colors" name="data4" data-theme="b">
32
      <option value="red">红色</option>
33
      <option value="green">绿色</option>
34
      <option value="blue">蓝色</option>
35
    </select>
36
    <br><br>
37
38
    <label for="switch">切换开关：</label>
39
    <select name="data5" id="switch" data-role="slider" data-theme="a">
40
      <option value="on">On</option>
41
      <option value="off">Off</option>
42
    </select>
43
    <br><br>
44
45
   <div data-role="controlgroup">
46
   <legend>请选择喜爱的电影：</legend>
47
   <label for="mov1">蜘蛛侠</label>
48
   <input type="checkbox" name="data6" id="mov1" data-theme="a">