Jumat, 31 Maret 2017

PWEB Tugas 2

SIMPLE FORM HTML

  1. <!DOCTYPE html/>
  2. <html lang="em"><head>
  3.     <title>Situs Resmi PT KAI</title>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1">
  6.     <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  7.     <link rel="stylesheet" href="form.css" type="text/css">
  8.     <scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  9.     <scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  10. </head>
  12. <body>
  13.     <nav class="navbar navbar-default">
  14.       <div class="container-fluid">
  15.         <div class="navbar-header">
  16.             <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
  17.                 <span class="icon-bar"></span>
  18.                 <span class="icon-bar"></span>
  19.                 <span class="icon-bar"></span>  
  20.             </button>
  21.           <a class="navbar-brand" href="#" style="color: #0AC7D1">Pemesanan Tiket Kereta Online</a>
  22.         </div>
  23.         <div class="collapse navbar-collapse" id="myNavbar">
  24.             <ul class="nav navbar-nav">
  25.               <li><a href="#" style="color: #0AC7D1">Daftar Harga Kelas KA</a></li>
  26.               <li><a href="#" style="color: #0AC7D1">Daftar Jadwal KA</a></li>
  27.               <li><a href="#" style="color: #0AC7D1">Data Pesanan Tiket</a></li>
  28.             </ul>
  29.             <ul class="nav navbar-nav navbar-right">
  30.               <li><a href="#" style="color: #0AC7D1"><spanclass="glyphicon glyphicon-log-out" style="color: #0AC7D1"></span> Logout</a></li>
  31.             </ul>
  32.         </div>
  33.       </div>
  34.     </nav>
  36.     <div class="container">
  37.         <div class="col-sm-2">
  38.             <img class="img-responsive" src="KAI.jpg" alt="PT KAI">
  39.         </div>
  40.         <div class="col-sm-9">
  41.             <h1 style="color : #2E0AD1"><left>Selamat Datang !!!</center></h1>
  42.         </div>
  43.     </div>
  45.     <hr>
  47.     <div class="container">
  48.       <form class="form-horizontal" role="form" method="post"action="send.php">
  49.         <div class="form-group">
  50.           <label class="control-label col-sm-offset-3 col-sm-2"for="pilihan-kereta">Pilih Kereta:</label>
  51.           <div class="col-sm-3">
  52.             <select class="form-control" id="pilihan-kereta">
  53.             <option> </option>
  54.             <option>Argo Anggrek</option>
  55.             <option>Jayabaya</option>
  56.             <option>Kertajaya</option>
  57.             <option>Bima</option>
  58.             <option>Argo Bromo</option>
  59.             </select>
  60.           </div>
  61.         </div>
  62.         <div class="form-group">
  63.           <label class="control-label col-sm-offset-3 col-sm-2" for="tgl-berangkat">Tanggal Berangkat:</label>
  64.           <div class="col-sm-3">          
  65.             <input type="date" class="form-control" id="tgl-berangkat">
  66.           </div>
  67.         </div>
  68.         <div class="form-group">
  69.           <label class="control-label col-sm-offset-3 col-sm-2" for="jam-berangkat">Jam Berangkat:</label>
  70.           <div class="col-sm-3">          
  71.             <input type="time" class="form-control" id="jam-berangkat">
  72.           </div>
  73.         </div>
  74.         <div class="form-group">
  75.           <label class="control-label col-sm-offset-3 col-sm-2"for="tempat-asal">Dari:</label>
  76.           <div class="col-sm-3">
  77.             <select class="form-control" id="tempat-asal">
  78.             <option> </option>
  79.             <option>Bandung</option>
  80.             <option>Cirebon</option>
  81.             <option>Jakarta</option>
  82.             <option>Kediri</option>
  83.             <option>Semarang</option>
  84.             <option>Surabaya</option>
  85.             <option>Yogyakarta</option>
  86.             </select>
  87.           </div>
  88.         </div>
  89.         <div class="form-group">
  90.           <label class="control-label col-sm-offset-3 col-sm-2"for="tempat-tujuan">Ke:</label>
  91.           <div class="col-sm-3">
  92.             <select class="form-control" id="tempat-tujuan">
  93.             <option> </option>
  94.             <option>Bandung</option>
  95.             <option>Cirebon</option>
  96.             <option>Jakarta</option>
  97.             <option>Kediri</option>
  98.             <option>Semarang</option>
  99.             <option>Surabaya</option>
  100.             <option>Yogyakarta</option>
  101.             </select>
  102.           </div>
  103.         </div>
  104.         <div class="form-group">
  105.           <label class="control-label col-sm-offset-3 col-sm-2"for="kelas">Kelas:</label>
  106.           <div class="col-sm-3">
  107.             <select class="form-control" id="kelas">
  108.             <option> </option>
  109.             <option>Eksekutif</option>
  110.             <option>Bisnis</option>
  111.             <option>Ekonomi</option>
  112.             </select>
  113.           </div>
  114.         </div>
  115.         <div class="form-group">        
  116.           <div class="col-sm-offset-6 col-sm-2">
  117.             <button type="submit" class="btn btn-primary">Pesan Tiket</button>
  118.             <button type="submit" class="btn btn-warning"style="color:black">Batal</button>
  119.           </div>
  120.         </div>
  121.       </form>
  122.     </div>
  123.  </div>
  124.   <div align="center" style="margin-top:10px; padding-top: 30px">  
  125.   <table>  
  126.    <tr>  
  127.     <th width="50">No</th>  
  128.     <th width="170">Nama Kereta</th>  
  129.     <th width="170">Jadwal Berangkat</th>  
  130.     <th width="170">Jadwal Tiba</th>  
  131.     <th width="180">Dari</th>  
  132.     <th width="180">Ke</th>  
  133.     <th width="140">Harga(Kelas)</th>  
  134.     <th></th>  
  135.    </tr>  
  136.    <tr>  
  137.     <td id="td_s">1</td>  
  138.     <td id="td_s">Argo Laru</td>  
  139.     <td id="td_s">2014-04-22 - 06.00</td>  
  140.     <td id="td_s">2014-04-22 - 08.45</td>  
  141.     <td id="td_s">Gambir, Jakarta Pusat</td>  
  142.     <td id="td_s">Bandung, Bandung</td>  
  143.     <td id="td_s">Binis - 90000</td>  
  144.     <td id="td_s"><button type="button" class="btn btn-primary">Edit</button><button style="margin-left:5px" type="button"class="btn btn-danger">Hapus</button></td>  
  145.    </tr>  
  146.    <tr>  
  147.     <td id="td_s">2</td>  
  148.     <td id="td_s">Argo Laru</td>  
  149.     <td id="td_s">2014-04-23 - 13.01</td>  
  150.     <td id="td_s">2014-04-23 - 15.00</td>  
  151.     <td id="td_s">Gambir, Jakarta Pusat</td>  
  152.     <td id="td_s">Surabaya</td>  
  153.     <td id="td_s">Eksekutif - 100000</td>  
  154.     <td id="td_s"><button type="button" class="btn btn-primary">Edit</button><button style="margin-left:5px" type="button"class="btn btn-danger">Hapus</button></td>  
  155.    </tr>  
  156.   </table>  
  157.  </div>  
  159. </body></html>
Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)