Screenshot :
HTML code :
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2: <html xmlns="http://www.w3.org/1999/xhtml">
3: <head>
4: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5: <title>Untitled Document</title>
6: <link rel="stylesheet" type="text/css" href="E:\Projects_Coding\Tugas 2 PWeb\skin.css" />
7: </head>
8: <body>
9: <div><img src="logo%20kereta%20api.png" style="width:160px;height:90px"></div><h1>Selamat Datang!!!</h1>
10: <br />
11: <br />
12: <form class="kereta" action="kereta_get.php" method="get">
13: <p><label for="namakereta">Nama Kereta</label><input type="text" name="namakereta" /></p>
14: <p><label for="tglbrkt">Tanggal Berangkat</label><input type="date" name="tglbrkt" /></p>
15: <p><label for="tgltiba">Tanggal Tiba</label><input type="date" name="tgltiba" /></p>
16: <p><label for="jambrkt">Jam Berangkat</label><input type="time" name="jambrkt" /></p>
17: <p><label for="jamtiba">Jam Tiba</label><input type="time" name="jamtiba" /></p>
18: <p><label for="dari">Dari</label><input type="text" name="dari" /></p>
19: <p><label for="tujuan">Ke</label><input type="text" name="tujuan" /></p>
20: <p><label for="kelas">Kelas</label><input list="kelas" name="kelas" /></p>
21: <datalist id="kelas">
22: <option value="Bisnis - 90.000">
23: <option value="Eksekutif - 100.000">
24: </datalist>
25: <br />
26: <input class="submit" type="submit" value="Simpan" />
27: <input class="cancel" type="reset" value="Batal" />
28: <br />
29: </form>
30: </body>
31: </html>
CSS:
1: @charset "utf-8";
2: /* CSS Document */
3: body
4: {
5: background-color: #ece8e5;
6: font-family: sans-serif;
7: }
8: img
9: {
10: position: absolute;
11: top: 0px;
12: left: 0px;
13: padding-top: 50px;
14: padding-bottom: 50px;
15: }
16: h1
17: {
18: color: blue;
19: font-family:sans-serif;
20: font-weight: 100;
21: border-bottom: 1px solid darkgrey;
22: padding: 50px 170px 40px;
23: left: 200px;
24: top: 100px;
25: }
26: .kereta
27: {
28: display: block;
29: margin: auto;
30: width: 70%;
31: }
32: .kereta label
33: {
34: display: inline-block;
35: width: 30%;
36: }
37: .kereta input
38: {
39: padding: 5px;
40: width: 25%;
41: height: 20px;
42: border-radius: 6px;
43: background-color: #ece8e5;
44: }
45: input.submit
46: {
47: margin:auto;
48: height: 40px;
49: width: 10%;
50: background-color: #398fce;
51: color: white;
52: }
53: input.cancel
54: {
55: margin: auto;
56: height: 40px;
57: width: 10%;
58: background-color: #d04f19;
59: color: white;
60: }
