Source Code :
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script type="text/javascript">
function myFunction(){
var conf = window.alert("Berhasil Login");
}
</script>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
font-family: calibri;
}
.navbar{
background-color: #9c27b0;
padding: 20px;
color: white;
}
.head{
color: grey;
}
.head_al{
padding-top: 50px;
}
.table{
margin-top: 20px;
}
input{
padding-left: 10px;
border: none;
border-bottom: 2px solid grey;
height: 20px;
width: 250px;
font-size: 15px;
}
td{
padding: 5px;
padding-right: 15px;
}
button{
margin: 40px;
padding: 10px;
background-color: #9c27b0;
border: none;
border-radius: 8px;
color: white;
font-size: 15px;
font-weight: bold;
}
button:hover{
background-color: purple;
}
.footer{
background-color: #9c27b0;
height: 300px;
}
img{
margin-top: 20px;
height: 100px;
border: 2px solid #9c27b0;
border-radius: 100px;
}
</style>
<body>
<div class="navbar">
<h3>TUGAS 3 Pemrograman Web</h3>
</div>
<div align="center" class="head_al">
<h2 class="head">REGISTRASI MAHSISWA</h2>
<img src="http://www.unklab.ac.id/sites/default/files/default_images/default_profile_picture.png">
<table class="table">
<tr>
<td>Nama</td>
<td>
<input type="text" name="" list="nama">
<datalist id="nama">
</datalist>
<script>
var nama = ["Romi Yehezkiel","Dwiyan Satria","Rochman Soleh","Adiwinoto","Rizal S","Yusuf Dimas"];
var options = '';
for(var i=0; i<nama.length; i++){
options += '<option value="'+nama[i]+'">';
}
document.getElementById('nama').innerHTML = options;
console.log(options);
</script>
</td>
</tr>
<tr>
<td>NRP</td>
<td>
<input type="text" name="" list="NRP">
<datalist id="NRP">
</datalist>
<script>
var nrp = ["5114100054","51154100140","5114100075","511710035","5112100001","5111100169"];
var options = '';
for(var i=0; i<nrp.length; i++){
options += '<option value="'+nrp[i]+'">';
}
document.getElementById('NRP').innerHTML = options;
console.log(options);
</script>
</td>
</tr>
<tr>
<td>Mata Kuliah</td>
<td>
<input type="text" name="" list="matkullist">
<datalist id="matkullist">
</datalist>
<script>
var matkul = ["Otomata","Pemrograman Web","Kecerdasan Buatan","Perancangan Analisis Algoritma II","Jaringan Komputer","Manajemen Basis Data", "Probabilitas dan Statistika", "Dasar Pemrograman", "Rekayasa Perangkat Lunak"];
var options = '';
for(var i=0; i<matkul.length; i++){
options += '<option value="'+matkul[i]+'">';
}
document.getElementById('matkullist').innerHTML = options;
console.log(options);
</script>
</td>
</tr>
<tr>
<td>Dosen</td>
<td>
<input type="text" name="" list="dosen">
<datalist id="dosen">
</datalist>
<script>
var dosen = ["Ir. Muchammad Husni, M.Kom.","Prof.Ir. Supeno Djanali, M.Sc.,Ph.D","Baskoro Adi Pratomo, S.Kom, M.Kom","Ir. Siti Rochimah, MT.,Ph.D"," Fajar Baskoro, S.Kom.,MT.","Nurul Fajrin Ariyani, S.Kom.,M.Sc.","Sarwosri, S.Kom.,M.T.","Imam Kuswardayan, S.Kom.,MT.", "Ridho Rahman Hariadi, S.Kom.,M.Sc.", "Victor Hariadi, S.Si.,M.Kom.", "Rully Sulaiman, S.Kom.,M.Kom."];
var options = '';
for(var i=0; i<dosen.length; i++){
options += '<option value="'+dosen[i]+'">';
}
document.getElementById('dosen').innerHTML = options;
console.log(options);
</script>
</td>
</tr>
</table>
</div>
<div align="center">
<button type="button" onclick="myFunction()">DAFTAR</button>
</div>
<div class="footer">
</div>
</body>
</html>
TAMPILAN FORM :
Saat berhasil Login :
