Membuat Form Regestrasi Dengan JavaScript

Kali ini saya akan share mengenai bagaimana cara membuat form dengan javascript. Biasanya apabila kita melakukan pengisian sebuah/suatu regestrasi secara online pasti yang di tampilkan adalah sebuah form yang tentunya  harus kita isi semua dan juga harus benar. Apabila salah satu form tidak kita isi atau lupa kita isi maka akan muncul sebuah peringatan (alert) bahwa form masih ada yang kosong/ masih ada yang belum kita isi. Nah, saya akan coba memberikan sebuah contoh form seperti yang saya ceritakan di atas.

Untuk membuat form seperti itu dalam javascript itu menggunakan event onfocus dan juga onblur.

gambar formnya..

untuk membuat form seperti di atas ini dia kode-kode atau scriptnya.

<h1 align="center">Menggunakan Event OnFocus Dan OnBlur</h1>
<hr width="600" color="black" noshade size="10">
<font face ="arial">
 <h3 align="center"> R E G E S T R A S I </h3>
<hr width="600" color="black" noshade size="2">
<center>
<form name="arief" method="get">
<TABLE><tr><td width="31%">NIM</td>
 <td width="7%">:</td>
<td width="62%">
<input type="text" name="inim" size="9" onFocus="window.status='Silahkan Mengisi Nim Anda';"
onBlur="masukkannim()">
</td></tr>
<tr><td width="31%"> NAMA </td>
 <td width="7%">:</td>
 <td width="62%">
<input type="text" name="inama" size="23" onFocus="window.status='Silahkan Mengisi Nama Anda';"
onBlur="masukkannama()">
</td></tr>
<tr> <td width="31">ALAMAT</td>
<td width="7%">:</td>
<td width="62%">
 <input type="text" name="ialamat" size="34" onFocus="window.status='Silahkan Mengisi Nama Anda';"
 onBlur="masukkanalamat()">
</td></tr></TABLE>
<hr width="600" color="black" noshade size="2">
<p><input type="BUTTON" value="Kirim" onClick="terimakasih()">
 <input type="reset" value="Reset">
</p>
</form>
</center>

kode-kode di atas hanya untuk tampilan formnya saja.

                                     

Nah, Untuk memunculkan peringatan(alert) seperti pada gambar diatas ini dia kode-kode atau script di dalam javascriptnya..

<SCRIPT LANGUAGE="JavaScript">
function masukkannim()
{
if(document.arief.inim.value=="")
{
 alert("anda belum memasukkan nim");
}
}
function masukkannama()
{
if(document.arief.inama.value=="")
{
 alert("anda belum memasukkan nama");
}
}
function masukkanalamat()
{
if(document.arief.ialamat.value=="")
{
 alert("anda belum memasukkan alamat");
}
}
function terimakasih()
{
if ((document.arief.inim.value!="") && (document.arief.inama.value!="") && (document.arief.ialamat.value!=""))
{
 alert("Terima Kasi Telah Mengisi Data");
}
else
  alert ("Mohon Data Dilengkapi");
}
</script>

Selamat Membaca
Semoga Bermanfaat