Pada uts ini saya membuat form registration dimana biasanya terdapat 3 file yaitu css, html dan javascript akan tetapi css dan html saya jadikan satu jadi hanya ada 2 file .html dan .js sbb :
File .html :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ujian Tengah Semester</title>
<style type="text/css">
<!--
#utama {
height: 500px;
}
#header {
height: 70px;
}
#kiri {
float: left;
width: 780px;
}
#kanan {
float: left;
padding: 5px;
width: 370px;
}
#footer {
clear: both;
height: 50px;
}
-->
</style>
<script language="JavaScript"type="text/javascript" src="uts.js"></script>
</head>
<body>
<body background="gbr2.jpg">
<div id="utama">
<div id="header">
<center>
<h1><font color="white">REGISTRATION</h1></font>
<hr>
<div id="kiri">
<img src= gbr1.png>
<br>
<font color="blue">
<h3>Silahkan anda melakukan registration secepatnya karena masih gratis.
<br>
Terima Kasih</h3>
</div>
<div id="kanan">
<form name="calc" action="#">
<table>
<tr><td><font color="white">First Name</font></td><td><input type="text" size="25" name="inputan1"></td></tr>
<tr><td><font color="white">Last Name</font></td><td><input type="text" size="25" name="inputan2"></td></tr>
<tr><td><font color="white">User Name</font></td><td><input type="text" size="25" name="inputan3"></td></tr>
<tr><td><font color="white">Email</font></td><td><input type="email" size="25" name="inputan4"></td></tr>
<tr><td><font color="white">Password</font></td><td><input type="password" size="25" name="inputan4"></td></tr>
<tr><td><font color="white">Retype Password</font></td><td><input type="password" size="25" name="inputan5"></td></tr>
<tr><td><font color="white">Saya Seorang</font></td><td>
<select name="kelamin">
<option value="wanita" selected>Wanita
<option value="pria">Pria
</select></td></tr>
</table>
<br>
<input type="button" value="OK" onClick = "tampil(this.form)">
<input type="button" name="batal" value="Reset" onclick="reset()">
</form>
</div>
</div>
</div>
<div id="footer">
<hr>
<h3><center>copyright by septian</h3>
</div>
</body>
</html>
Untuk file .js :
function tampil(form){
if (form.elements[0].value == "" || form.elements[1].value == "" || form.elements[2].value == "" || form.elements[3].value == "" ||form.elements[4].value == ""||form.elements[5].value == ""||form.elements[6].value == "" )
{
alert("Maaf data yang anda masukkan belum lengkap. Silahkan ulangi lagi");
} else {
alert("Selamat Anda Berhasil Mendaftar")
alert("Nama Anda : " +form.elements[0].value +form.elements[1].value +" , Username Anda : " +form.elements[2].value +" dan Email anda : " +form.elements[3].value);
}
return(true);
}
Penjelasan :
Pada file .html digunakan untuk mendesain layout dan isi dari html atau halaman web sendiri sedangkan pada file .js digunakan untuk menampilkan pesan dengan cara memanggil fungsi pada js dari html.
Printscreen :
Jika diisi :
Ketika di klik OK maka akan keluar pesan sbb :
Dan apabila , tidak di isi apa-apa maka akan keluar pesan sbb :
Tombol reset untuk membatalkan dan mengisi ulang serta mengosongkan form.
