Berikut hasilnya
Index.html
<!DOCTYPE html>
<html>
<head>
<title>Formulir</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" href="http://ganiwijaya.com/ltv/wp-content/uploads/2018/09/cropped-Logo-Kotak-32x32.png">
</head>
<body>
<center><h2>Formulir</h2></center>
<center><h3>Pembayaran PDAM</h3></center>
<div class="login">
<form action="proses.php" method="get" onSubmit="return validasi()">
<div>
<label>Kode Pelanggan</label>
<input type="char" name="plg" id="plg"/>
</div>
<div>
<label>Nama Lengkap</label>
<input type="text" name="nl" id="nl"/>
</div>
<div>
<label>Daerah</label>
<input type="text" name="dr" id="dr"/>
</div>
<div>
<label>Tipe</label>
<p><select name="Kategori"></p>
<option value="Rumah">Rumah Tangga Tipe 1</option>
<option value="Perusahaan">Rumah Tangga Tipe 2</option>
<option value="Hindu">Industri</option>
<option value="Budha">Instansi Pemerintah</option>
<option value="Lainnya">Umum</option>
</select>
</div>
<div>
<input type="submit" value="Kirim" class="tombol">
<a href="http://ganiwijaya.com" class="sampingtombol">Batal</a>
</div>
</form>
</div>
</body>
<script type="text/javascript">
function validasi()
{
var plg = document.getElementById("plg").value;
var nl = document.getElementById("nl").value;
var dr = document.getElementById("dr").value;
var tp = document.getElementById("tp").value;
var bbn = document.getElementById("bbn").value;
var jp = document.getElementById("jp").value;
var ttl = document.getElementById("ttl").value;
var pj = document.getElementById("pj").value;
var byr = document.getElementById("byr").value;
var hr = document.getElementById("hr").value;
if (plg != "" && nl!="" && dr !="" && tp !=""&& bbn !=""&& jp !=""&& ttl !=""&& pj !=""&& byr !=""&& hr !="") {
return true;
}else{
alert('Anda harus mengisi data dengan lengkap !');
return false;
}
}
</script>
</html>
Proses.php
<!DOCTYPE html>
<html>
<head>
<title>Formulir</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" href="http://ganiwijaya.com/ltv/wp-content/uploads/2018/09/cropped-Logo-Kotak-32x32.png">
</head>
<body>
<center><h2>Invoice 4335</h2></center>
<center><h3>Pembayaran PDAM</h3></center>
<div class="login">
<div>
<label>Kode Pelanggan</label><p/>
<?php
echo $_GET['plg'];
echo "<br />";
?>
<hr size="1px" width="100%" align="center" color="#ededed">
</div>
<div>
<label>Nama Lengkap</label><p/>
<?php
echo $_GET['nl'];
echo "<br />";
?>
<hr size="1px" width="100%" align="center" color="#ededed">
</div>
<div>
<label>Daerah</label><p/>
<?php
echo $_GET['dr'];
echo "<br />";
?>
<hr size="1px" width="100%" align="center" color="#ededed">
</div>
<div>
<label>Tipe</label><p/>
<?php
echo $_Get['Kategori'];
echo "<br />";
?>
</div>
</div>
<div class="login" float="right">
<div>
<label>Biaya Beban</label><p/>
1.960
<hr size="1px" width="100%" align="center" color="#ededed">
</div>
<div>
<label>Jumlah Pemakaian (m3)</label><p/>
40
<hr size="1px" width="100%" align="center" color="#ededed">
</div>
<div>
<label>Pajak</label><p/>
3.000
<hr size="1px" width="100%" align="center" color="#ededed">
</div>
<div>
<label>Administrasi</label><p/>
10.000
<hr size="1px" width="100%" align="center" color="#ededed">
</div>
<div>
<center><h2><label>Total Tagihan</label></h2></center><p/>
<center><h1>Rp. 88.700</h1></center>
</div>
<p/><center><a href="http://ganiwijaya.com/form" class="tombol">Selesai</a></center>
<p/>
</div>
</body>
</html>
Style.css
body {
background: #2b93d8;
font-family: sans-serif;
}
h2 {
color: #fff;
text-decoration: none;
}
h1 {
color: #000;
text-decoration: none;
}
h3 {
color: #fff;
font-size: 12px;
text-decoration: none;
}
h4 {
color: #595959;
font-size: 10px;
}
h5 {
color: #000;
font-size: 18px
}
.login {
padding: 1em;
margin: 2em auto;
width: 25em;
background: #fff;
border-radius: 3px;
}
label {
font-size: 10pt;
color: #555;
}
input[type="text"],
input[type="email"],
input[type="char"],
input[type="select"],
input[type="password"],
input[type="integer"],
textarea {
padding: 8px;
width: 95%;
background: #efefef;
border: 0;
font-size: 10pt;
margin: 6px 0px;
border-radius: 3px;
}
.link {
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
background: #ffaf11;
color: #fff;
font-size: 12px;
text-decoration: none;
border: 0;
padding: 5px 8px;
border-radius: 3px;
}
.link:hover {
background-color: #e59800;
color: #fff;
}
.tombol {
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
background: #007fff;
color: #fff;
font-size: 14px;
border: 0;
padding: 5px 8px;
border-radius: 3px;
text-decoration: none;
}
.tombol:hover {
background-color: #0063c6;
color: #fff;
}
.sampingtombol {
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
color: #595959;
font-size: 14px;
text-decoration: none;
padding: 5px 8px;
border-radius: 3px;
border: 1px solid #fff;
}
.sampingtombol:hover {
border: 1px solid #e0e0e0;
}
.jarak {
padding: 0 2pc;
}
.footer {
width: 90%;
margin: auto;
height:41px;
line-height: 40px;
font-size: 12px;
color: #fff;
border-radius: 4px;
}
Untuk mencobanya bisa akses di sini
Tidak ada komentar:
Posting Komentar