Thursday, March 23, 2017

Simple Form HTML

Source Code HTML :

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" type="text/css" href="style.css">
<title>website KAI</title>


<body class="bodystyles">

<ul>
  <li><a class="active" href="#home">Pemesanan Tiket Kereta Api Online</a></li>
  <li><a href="#news">Daftar Harga Kelas KA</a></li>
  <li><a href="#contact">Daftar Jadwal KA</a></li>
  <li><a href="#about">Daftar Pesanan Tiket</a></li>
</ul>

 <div class="header">
  <img src="kaai.png" alt="LogoKAI" />
  <h1>Selamat Datang    !!!</h1>
 </div>
 <br><br>
<hr>
<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" form="kelasform">
                              <option value="Eksekutif">Eksekutif</option>
                              <option value="Bisnis">Bisnis</option>
                              </select></td></tr>

  <tr>
  <td><button type="button" style="background-color: #008CBA; border-radius: 4px; color: white; width: 80px; height: 40px">Simpan</button></td>
  <td><button type="button" style="background-color: #f44336; border-radius: 4px; color: white;width: 80px; height: 40px;">Batal</button></td><br>
  </tr>


 </table>
</div>

<div class="tablestyles1">
    <table>
        <tr>
            <th>No</th>
            <th>Nama Kereta</th>
            <th>Jadwal Berangkat</th>
            <th>Jadwal Tiba</th>
            <th>Dari</th>
            <th>Ke</th>
            <th>Harga(Kelas)</th>
        </tr>
        <tr>
            <td align="center">1</td>
            <td align="center">Argo Parahyangan</td>
            <td align="center">2014-04-22 - 06:00</td>
            <td align="center">2014-04-22 - 08:45</td>
            <td align="center">Gambir, Jakarta Pusat</td>
            <td align="center">Bandung, Bandung</td>
            <td align="center">Bisnis - 90.000</td>

            <td class="input1"><button type="button" style="background-color: #008CBA; border-radius: 4px; color: white; width: 80px; height: 40px">Edit</button> <button type="button" style="background-color: #f44336; border-radius: 4px; color: white; width: 80px; height: 40px">Hapus</button></td>
        </tr>
        <tr>
            <td align="center">2</td>
            <td align="center">Argo Parahyangan</td>
            <td align="center">2014-04-23 - 13:01</td>
            <td align="center">2014-04-23 - 15:00</td>
            <td align="center">Gambir, Jakarta Pusat</td>
            <td align="center">Surabaya</td>
            <td align="center">Eksekutif  - 100.000</td>

            <td class="input2"><button type="button" style="background-color: #008CBA; border-radius: 4px; color: white; width: 80px; height: 40px">Edit</button> <button type="button" style="background-color: #f44336; border-radius: 4px; color: white; width: 80px; height: 40px">Hapus</button></td>
        </tr>

    </table>
    </div>


</body>

</head>

</html>

Tampilan :

No comments:

Post a Comment