form(HTML5)

課題 
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フォーム 演習課題2</title>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
  body{
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  }
  span{
    color:#FF0000;
  }
</style>
</head>
<body>
<h2>宿泊施設</h2>
<form action="#" method="post">
<span>※</span>全て必須項目です。
<table>
<tr>
<th><label for="id"><span>※</span>ID:</label></th>
<td><input type="text" name="id" id="id" size="20" autocomplete="on" autofocus required></td>
</tr>
<tr>
<th><label for="cook"><span>※</span>料理：</label></th>
<td><input type="text" name="cook" id="cook" autocomplete="on" list="cooking" required>
<datalist id="cooking">
<option value="和食">
<option value="洋食">
</datalist></td>
</tr>
<tr>
<th><label for="date"><span>※</span>予約日：</label></th>
<td><input type="date" name="date" id="date" required></td>
</tr>
<tr>
<th><label for="time"><span>※</span>予約時間：</label></th>
<td><input type="time" name="time" id="time" required></td>
</tr>
<tr>
<th><label for="people"><span>※</span>予約人数：</label></th>
<td><input type="number" name="people" id="people" min="1" max="20" required>(1-20人)</td>
</tr>
<tr>
<th><label for="color">部屋の色：</label></th>
<td><input type="color" name="color" id="color"></td>
</tr>
<tr>
<th><label for="email"><span>※</span>メール：</label></th>
<td><input type="	email" name="email" id="email" autocomplete="on" required></td>
</tr>
<tr>
<th><label for="tel">電話番号：</label></th>
<td><input type="tel" name="tel" id="tel" autocomplete="on"></td>
</tr>
<tr>
<th>空き室状況：</th>
<td><meter min="0" max="50" value="36" low="25" high="40" optimum="0">36部屋予約されています</meter></td>
</tr>
</table>
<input type="submit" value="送信">
</form>
</body>
</html>

↓