Mahasiswa Kemarin Sore: Maret 2017

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

Mahasiswa Kemarin Sore

Jumat, 31 Maret 2017

Design Web

Jumat, 10 Maret 2017

Simple form HTML ft. CSS