<html>
<head>
<title>予約フォーム</title>
</head>
<body>
<h1>予約フォーム</h1>
<h4><label for="date">今日の日付</label></h4>
<input type="date" id="date" name="今日の日付" value="" /><br>
<br>
<h4><label for="time">予定の時刻</label></h4>
<input type="time" id="time" name="予定の時刻" value="" /><br>
<br>
<h4>借りる時間帯</h4>
<input
type="time"
id="time"
name="予定の時刻"
value="08:30"
min="09:00"
max="19:00">
<input
type="time"
id="time"
name="予定の時刻"
value="08:30"
min="09:00"
max="19:00"/>
<span></span>
<br>
<style>
input:valid + span::after { content: "予約できます"; } input:invalid + span::after {
content: "予約できません"; }
h1 {text-align: center;
position: relative;
padding: 0.5em;
background: #a6d3c8;
color: white;
}
h1::before {
position: absolute;
content: '';
top: 100%;
left: 0;
border: none;
border-bottom: solid 15px transparent;
border-right: solid 20px rgb(149, 158, 155);
}
</style>
</body>
</html>
