HTML :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>KERETA API INDONESIA - Pemrograman WEB</title>
<body class="bodystyles">
<div class="header">
<a href="https://kai.id/"target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwIkpXg9A_26WQOZzSZtf7BQt5PN10k2iP7hmm3T6VxB0668UKRdZPSVX3PBSbQU8agaywk_Lgr9STYh9w5YOT1Zbic3TDil0v16lCA5_wLwqkhyIJxB2xvZni0UJ8yHqV6uT7pB540qs/s1600/Logo+Kereta+Api+baru+cdr.png"></a>
<h1>Selamat Datang !!!</h1>
</div>
<div >
<table class="tablestyles" >
<form name ="input" action="html_form_action.asp" method="get">
<tr><td> Nama Kereta:</td><td><input type="text" name="name" align="center" id="name" required></td></tr>
<tr><td> Tanggal Berangkat:</td><td><input type="date" name="departdate" align="center" required></td></tr>
<tr><td> Tanggal Tiba:</td><td><input type="date" name="arrivedate" align="center" required></td></tr>
<tr><td> Jam Berangkat:</td><td><input type="time" name="departtime" align="center" required></td></tr>
<tr><td> Jam Tiba:</td><td><input type="time" name="arrivetime" align="center" required></td></tr>
<tr><td> Dari:</td> <td><input type="text" name="from" align="center" required></td></tr>
<tr><td> Ke:</td><td><input type="text" name="to" align="center" required></td></tr>
<tr><td> Kelas: </td><td><select name="kelas" align="center" required>
<option value="ekonomi">Ekonomi</option>
<option value="eksekutif">Eksekutif</option>
<option value="vip">VIP</option>
</select></td></tr>
<tr>
<td><input type="submit" value="Pesan"> </td>
<td><input type="reset" value="Batal"> </td><br>
</tr>
</table>
</div>
</body>
</head>
</html>
CSS :
.header img {
position: absolute; left:50px; top:50px;
width: 250px;
height: 150px;
}
.header h1 {
position: relative;
font-family: Impact;
top: 50px;
left: 600px;
margin: center;
background-color: #ece8e5;
}
.bodystyles {
background-color: #ece8e5;
}
.tablestyles input[type=text],input[type=date],input[type=time] {
padding: 10px;
width: 100%;
height: 10px;
border-radius: 5px;
}
.tablestyles select[name=kelas]{
padding: 10px;
width: 115%;
height: 20px;
border-radius: 5px;
}
.tablestyles {
margin-top: 80px;
margin-left:auto;
margin-right:auto;
}
.tablestyles input[type=submit]{
background-color: red;
text-align:center;
position: center;
padding: 5px 30px;
}
.tablestyles input[type=reset]{
background-color: blue;
text-align:center;
padding: 5px 30px;
}
.tablestyles1 table,.tablestyles1 tr,.tablestyles1 th,.tablestyles1 td[align="center"]{
margin-top: 30px;
border-collapse: collapse;
padding-left: 5px;
padding-right: 30px;
border:1px solid black;
}
.tablestyles1 input[type=submit]{
background-color: red;
padding: auto;
text-align:center;
}
.tablestyles1 input[type=reset]{
background-color: blue;
padding: auto;
text-align:center;
}
SEKIAN dan TERIMA KASIH
Tidak ada komentar:
Posting Komentar