HTML5 を使った、宿泊予約フォーム
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>宿泊予約</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>
body {
margin-left: 80px;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}
h1, p {
margin-left: 40px;
font-weight: 600;
}
th {
text-align: right;
line-height: 1.8;
}
span.red {
color: red;
}
meter {
width: 150px;
height: 20px;
}
</style>
</head>
<body>
<h1>宿泊予約</h1>
<p><span class="red">※</span>全て必須項目です。</p>
<form method="POST" action="#">
<table>
<tr>
<th><span class="red">※</span>ID：</th>
<td>
<input type="text" name="ID" id="id" autofocus required>
</td>
</tr>
<tr>
<th><span class="red">※</span>料理：</th>
<td><input type="text" name="food" id="food" required></td>
</tr>
<tr>
<th><span class="red">※</span>予約日：</th>
<td><input type="date" name="date" id="date" required></td>
</tr>
<tr>
<th><span class="red">※</span>予約時間：</th>
<td><input type="time" name="time" id="time" required></td>
</tr>
<tr>
<th><span class="red">※</span>予約人数：</th>
<td><input type="number" name="people" id="people" min="1" max="20" required>(1-20人)</td>
</tr>
<tr>
<th><span class="red">※</span>部屋の色：</th>
<td><input type="color" name="color" id="color" required</td>
</tr>
<tr>
<th><span class="red">※</span>メール：</th>
<td><input type="email" name="email" id="email" required></td>
</tr>
<tr>
<th>電話番号：</th>
<td><input type="tel" name="tel" name="tel"></td>
</tr>
<tr>
<th>空き室状況：</th>
<td><meter max="10" min="0" value="8"></meter></td>
</tr>
</table>
<input type="submit" value="送信">
</form>
</body>
</html>
