Kita semua tentu memiliki akun jejaring sosial, baik itu facebook, twitter ataupun blog blog. untuk membuat jejaring sosial kita harus melakukan registrasi mengenai info pribadi dan lain halnya secara on-line. halaman registrasi tersebut dinamakan proses sign-up .
Mula-mula buatlah tampilan form seperti ini, agar lebih rapi dapat menggunakan tabel.
Penampakan sintaks untuk membuat form seperti diatas:
<html>
<head>
<link rel="shortcut icon" href="ai.ico">
<title> Halaman Pendaftaran </title>
<SCRIPT language="javascript" type="text/javascript" src="ckck.js">
</script>
</head>
<body background="Graphic1new.jpg">
<br />
<form name="signup" onSubmit="return cek()">
<a href="http://www.somethingicanwrite.blogspot.com"> <img src="capture.JPG"></a>
<br>
Dengan melakukan pendaftaran, dapatkan email gratis dan layanan berlangganan lainnya ^^
<hr color="#FF00FF">
<table border="0">
<font face="comic sans MS" size="+3">Info Pribadi</font>
<tr><td>Nama saya</td><td><input name="depan" type="text" title="Nama Depan" placeholder="nama depan" required>
<input name="belakang" type="text" title="nama belakang" placeholder="nama belakang" required> </td></tr>
<tr><td>Jenis Kelamin</td><td><select name="sex" title="kelamin">
<option value="none" selected>--pilih salah satu--</option>
<option value="Laki">Laki - Laki</option>
<option value="perempuan">perempuan</option>
</select> </td></tr>
<tr><td>Tanggal Lahir</td><td><input type="text" name="tanggal" title="tanggal" maxlength="2" size="2" placeholder="xx" required>
<select name="bulan" title="bulan">
<option value="none" selected>--pilih salah satu--</option>
<option value="januari">januari</option>
<option value="feb">Februari</option>
<option value="mar">Maret</option>
<option value="Apr">April</option>
<option value="mei">Mei</option>
<option value="jun">Juni</option>
<option value="jul">Juli</option>
<option value="agus">Agustus</option>
<option value="Sept">September</option>
<option value="okt">Oktober</option>
<option value="nov">November</option>
<option value="dec">Desemeber</option>
</select>
<input type="text" name="tahun" title="tahun" maxlength="4" size="4" placeholder="xxxx" required> </td>
</tr>
</table>
<hr color="#FF00FF">
<table><font face="comic sans MS" size="+3">Contact Person</font>
<tr><td>Email</td><td><input type="text" name="email" title="email" placeholder="ID email"required>@ <select name="domain">
<option value="yahoo">yahoo.com</option>
<option value="yahooid">yahoo.co.id</option>
<option value="gmail">gmail.com</option>
<option value="plaza">plaza.com</option>
<option value="rocket">rocketmail.com</option>
</select></td></tr>
<tr><td>alamat</td><td><input name="alamat" type="text" title="alamat" placeholder="ketik alamat lengkap" style="height:25px; width:250px;" onFocus="this.value=''; this.style.height='50px'; this.style.border='1px solid #6699CC'" onBlur="this.style.height='25px'; this.style.background='';" value="" required></tr>
<tr><td>Website</td><td><input type="text" name="web" title="website" placeholder="blog/website pribadi"required> <label> boleh berisi boleh tidak</label></td></tr>
<tr><td> Telepon </td><td><input type="text" name="hp" title"telepon" placeholder="nomor telepon yang dapat dihubungi" required></td></tr>
</table>
<hr color="#FF00FF">
<table><font face="comic sans MS" size="+3">Account Anda</font>
<tr><td>Username</td><td> <input type="text" name="user" title="username" placeholder="username" required></td></tr>
<tr><td>Password </td><td><input type="password" name="pas" title="password" placeholder="password"required></td></tr>
<tr><td>Re-type Password</td><td> <input type="password" name="re" title="Re-type password" placeholder="re-type password"required> <label>ulangi password</label></td></tr>
</table>
<input type="submit" value="daftar">
</table>
</form>
</body>
</html>
Sedikit penjelasan untusk script diatas:
dan untuk VALIDASINYA aku save dengan nama ckck.js . ekstension *js berarti file tersebut disimpan didalam javascript. file javascript akan dipanggil sesuai dengan fungsinya, adapun struktur penulisan javascript * jangan lupa untuk membuat titik koma (;) disetiap perintah :
function xxx ()
{ Kondisi
}
Validasi untuk tanggal lahir:
Validasi untuk nama
Validasi untuk username, password, dan retype password:
else if(document.signup.user.value.length <4)
{
alert ("usernamenya bisa kok dipanjangin dikit -_- peliis deeh");
document.signup.user.focus();
return false;
}
else if(document.signup.pas.value.length <4)
{
alert ("passwormu sgitu yang ada gampang dibobol lah -_- !!");
document.signup.pas.focus();
return false;
}
else if((document.signup.re.value)!=(document.signup.pas.value))
{
alert ("beli cerebrovit biar ingatan tajam yah ^^");
document.signup.re.focus();
return false;
}
dan untuk konfirmasi submit dalam bentuk msgbox:
Bagi yang mau donlot source code beserta program lengkapnya, dapat klik disini atau disini
dan password rar nya dapat disedot di sini
Sedangkan validasi merupakan suatu proses pengecekan yang biasanya menggunakan bahasa javascript. validasi bertujuan untuk mengetahui apakah input yang dimasukkan sudah sesuai dengan yang diminta atau belum. Misalnya pada kolom telepon, user hanya dapat menginputkan angka saja. apabila user menginputkan huruf maka proses sign up tidak akan dilakukan. berikut ini akan saya berikan contoh sederhana pembuatan form pendaftaran lengkap dengan validasi. semoga dapat membantu ^^
Mula-mula buatlah tampilan form seperti ini, agar lebih rapi dapat menggunakan tabel.
<html>
<head>
<link rel="shortcut icon" href="ai.ico">
<title> Halaman Pendaftaran </title>
<SCRIPT language="javascript" type="text/javascript" src="ckck.js">
</script>
</head>
<body background="Graphic1new.jpg">
<br />
<form name="signup" onSubmit="return cek()">
<a href="http://www.somethingicanwrite.blogspot.com"> <img src="capture.JPG"></a>
<br>
Dengan melakukan pendaftaran, dapatkan email gratis dan layanan berlangganan lainnya ^^
<hr color="#FF00FF">
<table border="0">
<font face="comic sans MS" size="+3">Info Pribadi</font>
<tr><td>Nama saya</td><td><input name="depan" type="text" title="Nama Depan" placeholder="nama depan" required>
<input name="belakang" type="text" title="nama belakang" placeholder="nama belakang" required> </td></tr>
<tr><td>Jenis Kelamin</td><td><select name="sex" title="kelamin">
<option value="none" selected>--pilih salah satu--</option>
<option value="Laki">Laki - Laki</option>
<option value="perempuan">perempuan</option>
</select> </td></tr>
<tr><td>Tanggal Lahir</td><td><input type="text" name="tanggal" title="tanggal" maxlength="2" size="2" placeholder="xx" required>
<select name="bulan" title="bulan">
<option value="none" selected>--pilih salah satu--</option>
<option value="januari">januari</option>
<option value="feb">Februari</option>
<option value="mar">Maret</option>
<option value="Apr">April</option>
<option value="mei">Mei</option>
<option value="jun">Juni</option>
<option value="jul">Juli</option>
<option value="agus">Agustus</option>
<option value="Sept">September</option>
<option value="okt">Oktober</option>
<option value="nov">November</option>
<option value="dec">Desemeber</option>
</select>
<input type="text" name="tahun" title="tahun" maxlength="4" size="4" placeholder="xxxx" required> </td>
</tr>
</table>
<hr color="#FF00FF">
<table><font face="comic sans MS" size="+3">Contact Person</font>
<tr><td>Email</td><td><input type="text" name="email" title="email" placeholder="ID email"required>@ <select name="domain">
<option value="yahoo">yahoo.com</option>
<option value="yahooid">yahoo.co.id</option>
<option value="gmail">gmail.com</option>
<option value="plaza">plaza.com</option>
<option value="rocket">rocketmail.com</option>
</select></td></tr>
<tr><td>alamat</td><td><input name="alamat" type="text" title="alamat" placeholder="ketik alamat lengkap" style="height:25px; width:250px;" onFocus="this.value=''; this.style.height='50px'; this.style.border='1px solid #6699CC'" onBlur="this.style.height='25px'; this.style.background='';" value="" required></tr>
<tr><td>Website</td><td><input type="text" name="web" title="website" placeholder="blog/website pribadi"required> <label> boleh berisi boleh tidak</label></td></tr>
<tr><td> Telepon </td><td><input type="text" name="hp" title"telepon" placeholder="nomor telepon yang dapat dihubungi" required></td></tr>
</table>
<hr color="#FF00FF">
<table><font face="comic sans MS" size="+3">Account Anda</font>
<tr><td>Username</td><td> <input type="text" name="user" title="username" placeholder="username" required></td></tr>
<tr><td>Password </td><td><input type="password" name="pas" title="password" placeholder="password"required></td></tr>
<tr><td>Re-type Password</td><td> <input type="password" name="re" title="Re-type password" placeholder="re-type password"required> <label>ulangi password</label></td></tr>
</table>
<input type="submit" value="daftar">
</table>
</form>
</body>
</html>
Sedikit penjelasan untusk script diatas:
- <script languange> blablabla >> untuk memanggil validasi yang tersimpan dalam bahasa javascript
- onsubmit ="return cek" >> untuk memanggil fungsi cek didalam javascript ketika tombol submit di klik
- title >> script pada input text untuk membuat suatu tulisan shadow didalam input box
- required >> script pada input text yang menyatakan bahwa input text tersebut tidak boleh kosong.
- placeholder >> ketika cursor berada di input box, maka akan muncul tooltip yang menjelaskan input box tersebut (disesuaikan)
- pada alamat :
style="height:25px; width:250px;" onFocus="this.value=''; this.style.height='50px'; this.style.border='1px solid #6699CC'" onBlur="this.style.height='25px'; this.style.background='';" value="" >> ketika cursor berada di inputbox alamat, maka input box akan menjadi besar
dan untuk VALIDASINYA aku save dengan nama ckck.js . ekstension *js berarti file tersebut disimpan didalam javascript. file javascript akan dipanggil sesuai dengan fungsinya, adapun struktur penulisan javascript * jangan lupa untuk membuat titik koma (;) disetiap perintah :
function xxx ()
{ Kondisi
}
Validasi untuk tanggal lahir:
if((isNaN(document.signup.tanggal.value ))|| (document.signup.tanggal.value.length < 2) || (document.signup.tanggal.value > 31) || (document.signup.tanggal.value < 1))
{
alert ("tanggal yang anda masukkan terlalu lama, silakan beli kalender dan priksa kembali tanggal lahir anda");
document.signup.tanggal.focus();
return false;
}
else if((isNaN(document.signup.tahun.value))||(document.signup.tahun.value.length < 4)|| (document.signup.tahun.value > 2012)|| (document.signup.tahun.value < 1900))
{alert ("Maaf, aki-aki dilarang melakukan registrasi dalam website ini !!");
document.signup.tahun.focus();
return false;
}
{
alert ("tanggal yang anda masukkan terlalu lama, silakan beli kalender dan priksa kembali tanggal lahir anda");
document.signup.tanggal.focus();
return false;
}
else if((isNaN(document.signup.tahun.value))||(document.signup.tahun.value.length < 4)|| (document.signup.tahun.value > 2012)|| (document.signup.tahun.value < 1900))
{alert ("Maaf, aki-aki dilarang melakukan registrasi dalam website ini !!");
document.signup.tahun.focus();
return false;
}
Validasi untuk nama
var huruf = /^[a-zA-Z]{2,20}$/;
else if(!huruf.test(signup.depan.value))
{
alert ("nama yang anda masukkan terlalu 4L4Y !!");
document.signup.depan.focus();
return false;
}
else if(!huruf.test(signup.belakang.value))
{
alert ("nama yang anda masukkan terlalu 4L4Y !!");
document.signup.belakang.focus();
return false;
}
else if(!huruf.test(signup.depan.value))
{
alert ("nama yang anda masukkan terlalu 4L4Y !!");
document.signup.depan.focus();
return false;
}
else if(!huruf.test(signup.belakang.value))
{
alert ("nama yang anda masukkan terlalu 4L4Y !!");
document.signup.belakang.focus();
return false;
}
Validasi untuk username, password, dan retype password:
else if(document.signup.user.value.length <4)
{
alert ("usernamenya bisa kok dipanjangin dikit -_- peliis deeh");
document.signup.user.focus();
return false;
}
else if(document.signup.pas.value.length <4)
{
alert ("passwormu sgitu yang ada gampang dibobol lah -_- !!");
document.signup.pas.focus();
return false;
}
else if((document.signup.re.value)!=(document.signup.pas.value))
{
alert ("beli cerebrovit biar ingatan tajam yah ^^");
document.signup.re.focus();
return false;
}
dan untuk konfirmasi submit dalam bentuk msgbox:
if(confirm("anda yakin data yang anda masukkan sudah benar??")==true)
{
alert("data anda telah masuk di database kami >.< !!");
return true;
}
else
{
alert("silakan lengkapi kembali apabila ada yang salah. .");
return false;
}
}
{
alert("data anda telah masuk di database kami >.< !!");
return true;
}
else
{
alert("silakan lengkapi kembali apabila ada yang salah. .");
return false;
}
}
Bagi yang mau donlot source code beserta program lengkapnya, dapat klik disini atau disini
dan password rar nya dapat disedot di sini
3 comments:
Rekomendasi Artikel Terkait --> Membuat Validasi Form HTML5 Dengan JavaScript
gan password rarnya ? udah di delet link downladnya
Blog Alay (!) :v
Post a Comment