リフェレンス：http://api.jquerymobile.com/data-attribute/
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>D3.js</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-position="fixed">
<a href="#menu" data-icon="gear">左</a>
<h1>ホーム</h1>
<a href="#menu" data-icon="check" class="ui-btn-right">右</a>
</div>
<div data-role="content">
<p>こんにちは！</p>
<p><a href="#home" data-role="button">ホーム</a></p>
<p><a href="#menu" data-role="button" data-theme="b">メニュー</a></p>
<div data-role="content">
<ul data-role="listview" data-filter="true">
<li data-role="list-divider">日本語</li>
<li><a href="#menu">赤いページ<span class="ui-li-count">23</span></a></li>
<li><a href="#menu">青いページ</a></li>
<li><a href="#menu">黄色いページ</a></li>
<li data-role="list-divider">英語</li>
<li><a href="#menu">Red<span class="ui-li-count">23</span></a></li>
<li><a href="#menu">Blue</a></li>
<li><a href="#menu">Yellow</a></li>
</ul>
</div>
<form action="mail.php" method="post">
<div data-role="fieldcontain">
<label for="name">お名前</label>
<input type="text" name="name" id="name" value="">
</div>
<div data-role="fieldcontain">
<label for="keywords">検索</label>
<input type="search" name="keywords" id="keywords" value="">
</div>
<div data-role="fieldcontain">
<label for="amount">数量</label>
<input type="range" name="amount" id="amount" min="0" max="100" value="">
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>色</legend>
<input type="checkbox" name="color_1" id="color_1">
<label for="color_1">赤</label>
<input type="checkbox" name="color_2" id="color_2">
<label for="color_2">青</label>
<input type="checkbox" name="color_3" id="color_3">
<label for="color_3">黄</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>色</legend>
<input type="radio" name="color" value="1" id="1" checked="checked">
<label for="1">赤</label>
<input type="radio" name="color" value="2" id="2">
<label for="2">青</label>
<input type="radio" name="color" value="3" id="3">
<label for="3">黄</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<label for="color">色</label>
<select name="color" id="color" data-native-menu="false" multiple="">
<option value="1">赤</option>
<option value="2" selected>青</option>
<option value="3">黄</option>
</select>
</div>
<input type="submit" value="送信!">
</form>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#menu" class="ui-btn-active">メニュー1</a></li>
<li><a href="#menu">メニュー2</a></li>
<li><a href="#menu">メニュー3</a></li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="menu" data-add-back-btn="true">
<div data-role="header">
<h1>メニュー</h1>
</div>
<div data-role="content">
<p>こんにちは！</p>
<p><a href="#home">ホーム</a></p>
<p><a href="#menu">メニュー</a></p>
</div>
<div data-role="footer" class="ui-bar">
<a href="#menu" data-icon="plus">追加</a>
<a href="#menu" data-icon="delete">削除</a>
<h4>copyright 2016</h4>
</div>
</div>
</body>
</html>
