Membuat Form Pendaftaran Mahasiswa dengan HTML menggunakan Bootstrap, CSS, dan JavaScript
Di Sini kita butuh 4 file HTML gan,
1. Index (File Running)
2. Home (Tampilan Depannye)
3. Pendaftaran (untuk bagian isi pendaftarannya)
4. Harga (tabel biaya pendaftarannya)
1. Index
<!DOCTYPE html>
<html>
<head>
<script>
function Login()
{
var username=document.login.username.value;
username=username.toLowerCase();
var password=document.login.password.value;
username=username.toLowerCase(); //tulisan bisa capslock bisa tidak
if (username=="admin" && password=="admin")
{
alert ("Selamat anda berhasil login")
window.location.href="pendaftaran.html";
}
else
{
alert ("Username atau Password salah")
}
}
</script>
</head>
<body style="background-color:#00253d;color:white;">
<form name="login">
<table width="255" cellpadding="4" align="center">
<tr height="300"> </tr>
<tr> <td> username </td>
<td> <input type="text" name="username"> </td> </tr>
<tr> <td> password </td>
<td> <input type="password" name="password"> </td> </tr>
<tr> <td colspan="2" align="right">
<input type="button" value="Login" onClick="Login()"> </td> </tr>
</table>
</form>
</body>
</html>
2. Home
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"> </script>
<script type="text/javascript" src="js/bootstrap.css"> </script>
<title> PMB </title>
</head>
<body>
<div class="col-md-12">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"> PMB UBS </a>
</div>
<ul class="nav navbar-nav">
<li><a href="home.html"> Home </a></li>
<li class="active"><a href="pendaftaran.html"> Pendaftaran </a></li>
<li> <a href="harga.html"> Tabel Harga </a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html"><span class="glyphicon glyphicon-log-in">
</span> Logout </a></li>
</ul>
</div>
</nav>
<h1>Slamat datang di LP3i</h1>
<br>
<form action="pendaftaran.html">
<button class="btn btn-warning" onclick=""> Pendaftaran </button>
</form>
<form action="harga.html">
<button class="btn btn-warning" onclick=""> Daftar Harga</button>
</form>
</body>
</html>
3. Pendaftaran
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"> </script>
<script type="text/javascript" src="js/bootstrap.css"> </script>
<title> PMB </title>
<script>
function hitungumur() {
var myForm = document.konten;
var x = document.getElementById("tahun").value
var y = 2018 - x;
document.getElementById("umur").value = y;
}
function angkasaja(evt)
{
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
</script>
</head>
<body>
<div class="col-md-12">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"> PMB UBS </a>
</div>
<ul class="nav navbar-nav">
<li><a href="home.html"> Home </a></li>
<li class="active"><a href="pendaftaran.html"> Pendaftaran </a></li>
<li> <a href="harga.html"> Tabel Harga </a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html"><span class="glyphicon glyphicon-log-in">
</span> Logout </a></li>
</ul>
</div>
</nav>
<hr>
<div class="col-md-6">
<form name="konten">
<div>
<h1> Form Pendaftaran Mahasiswa </h1>
<table class="table">
<tr>
<td> NAMA </td>
<td colspan="3"> <input type="text" class="form-control" placeholder="Nama Lengkap" name="nama"> </td>
</tr>
<tr>
<td> TEMPAT LAHIR </td>
<td colspan="3"> <input type="text" class="form-control" placeholder="Tempat Lahir" name="tempat"> </td>
</tr>
<tr>
<td> TGL LAHIR </td>
<td> <select id="tanggal" class="form-control"> <option> --Tanggal-- </option>
<script>
var tgl = 1;
while (tgl <= 31) { document.write("<option>" + tgl + "</option>");
tgl=tgl+1;
}
</script>
</select>
</td>
<td>
<select id="bulan" class="form-control"> <option> --Bulan-- </option>
<script>
var bulan=["Januari","Febuari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"];
for(i=0;i<=11;i++) {
document.write("<option>" + bulan[i] + "</option>");
}
</script>
</select>
</td>
<td>
<select id="tahun" onchange="hitungumur()" class="form-control"> <option> --Tahun-- </option>
<script>
var tahun=1945;
while(tahun<=2018) { document.write("<option>" + tahun + "</option>");
tahun=tahun+1;
}
</script>
</select>
</td>
</tr>
<tr>
<td> UMUR </td>
<td colspan="3"> <input type="text" id="umur" class="form-control"> </td>
</tr>
<tr>
<td> KONSENTRASI </td>
<td colspan="3"> <select id="kons" class="form-control"> <option> --Konsentrasi-- </option>
<script>
var kons = ["Teknik Informatika","Komputerisasi akuntansi","Hubungan Masyarakat",
"Bisnis Administrasi","Administrasi Perkantoran"];
for (i=0;i<= 4;i++) {
document.write("<option>" + kons[i] + "</option>");
}
</script>
</select>
</td>
</tr>
<tr>
<td>No Telpon</td>
<td colspan="3"> <input type="text" class="from-control"
placeholder="no telp" name="ntelp" onkeypress="return angkasaja(event)" maxlength="13"> </td>
</tr>
</table>
<br>
<button class="btn btn-danger" onclick=""> clear </button>
</div>
</form>
</div>
</body>
</html>
4. Harga
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"> </script>
<script type="text/javascript" src="js/bootstrap.css"> </script>
<title> PMB </title>
</head>
<body>
<div class="col-md-12">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"> PMB UBS </a>
</div>
<ul class="nav navbar-nav">
<li><a href="home.html"> Home </a></li>
<li class="active"><a href="pendaftaran.html"> Pendaftaran </a></li>
<li> <a href="harga.html"> Tabel Harga </a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html"><span class="glyphicon glyphicon-log-in">
</span> Logout </a></li>
</ul>
</div>
</nav>
<div class="col-md-12">
<h1> Tabel Harga </h1>
<table class="table table-hover">
<th> Konsentrasi </th>
<th> Biaya /Semester (1-4)</th>
<th> Biaya /Semester (5-6)</th>
<th> Total Biaya</th>
<script>
var kons=["Teknik Informatika","Komputerisasi akuntansi","Hubungan Masyarakat",
"Bisnis Administrasi","Administrasi Perkantoran"];
var biaya1=[8500000,7500000,7350000,8000000,8250000];
var biaya2=[7500000,6500000,6350000,7000000,7250000];
for (i=0;i<= 4;) {
var hasil=[(biaya1[i]*4)+(biaya2[i]*2)];
document.write("<tr><td>" + kons[i] + "</td><td>" + biaya1[i]+ " </td><td>"
+ biaya2[i] + "</td><td>" + hasil + "</td></tr>")
i++;
}
</script>
</table>
</html>
kok g ada tombol daptar sih kakak
BalasHapusaku mau gan
BalasHapusTerimakasih kak artikelnya sangat membatu dalam belajar memahami Membuat Form dengan HTML menggunakan JavaScript semoga senantiasa berbagi ilmu-ilmunya nya. Nama pauziah kunjungi website kampus kami di https://www.atmaluhur.ac.id/
BalasHapusTerimakasih min , artikelnya sangat bermanfaat dan membantu sekali , saya jadi paham bagaimana membuat HTML menggunankan javascript , sukses terus min .
BalasHapusPerkenalkan nama saya Nia zulianti
Kunjungi website kampus saya https://www.atmaluhur.ac.id/
Awalnya saya kesulitan membuat HTML menggunakan javascript dan setelah cara membaca bnyk artikel saya ketemu dengan artikel kakak dan membuat saya terbantu.terimaksih kak atas artikel yang memabntunya saya sity sugesti pratiwi jangan lupa kunjungi web kita https://www.atmaluhur.ac.id/
BalasHapusTerimakasih untuk artikelnya kak. Penjelasan pada artikel ini sangat jelas dan sangat membantu, apalagi saya baru belajar bagaimana menggunakan javascript pada html. Dari artikel ini saya menjadi mengerti dan menjadi tau bagaimana cara penggunaannya. terus berkarya kak, buatlah karya karya yang bermanfaat lainnya. Perkenalkan nama saya Sri Rezeki. Kunjungi website kampus kami https://www.atmaluhur.ac.id/
BalasHapusHai,kakak. Terimakasih untuk artikelnya dgn adanya artikel ini membuat saya jadi lebih mengerti untuk menggunakan javascript pada html. Semangat untuk terus berkarya kak. Oh ya perkenalkan nama saya Diva Fathiya, mahasiswi STMIK ATMA LUHUR PANGKALPINANG. Jgn lupa kunjungi website kampus saya juga ya kak https://www.atmaluhur.ac.id/
BalasHapus