Hallo sobat program, bertemu lagi dengan saya Rizal dan pada Tutorial kali ini saya akan membahas tentang Cara Membuat Form Login Animasi dengan JQuery. ditutorial ini kita akan menggunakan 2 fungsi dari jquery yaitu keyup dan fadein mungkin buat kalian yang baru kenal jquery silahkan cari tahu tentang fungsi keyup dan fadein tsb.
Oke untuk kalian yang sudah mengenal terlebih dahulu dari kedua fungsi diatas mari kita lanjutkan, dan ternyata kedua fungsi diatas kalau kita explore lebih jauh lagi ada banyak manfaat dan kegunaannya salah satunya dipembahasan kali ini kita akan membuat Cara Membuat Form Login Animasi dengan JQuery.
Tanpa basa-basi lagi langsung saja kita masuk kepembahasan, dan hasil akhir nanti kita akan membuat sebuah form dimana ada 2 form input email dan password yang nantinya ketika dijalankan hanya menampilkan form input email saja dan ketika sudah di isi form input email tsb maka form input password baru akan muncul jadi Kira kira seperti itu paham ya.
Oke langsung saja, silahkan kalian buat file html nya lalu kemudian ketikan kode HTML dan CSS nya seperti pada contoh dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Form JQuery</title>
</head>
<body>
<div class="container">
<h2 align="center">Form Login dengan JQuery</h2>
<form>
<input type="email" id="email" placeholder="Masukan Email Anda...">
<input type="password" id="password" placeholder="Masukan Password Anda...">
<input type="submit" id="login" name="simpan" value="Login">
</form>
</div>
</body>
</html>
Lalu kemudian kalian tambahkan library dari jquery dan letakan diantara head atau dibawah title pada html :
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
Jika sudah langkah berikutnya silahkan ketik kode JQuerynya seperti pada contoh dibawah ini :
<script type="text/javascript">
$(document).ready(function(){
$("#email").keyup(function(){
$("#password").fadeIn(2000);
});
$("#password").keyup(function(){
$("#login").fadeIn(2000);
});
});
</script>
Jika semua kode diatas sudah sesuai silahkan kalian coba jalankan di browser yang kalian gunakan. Jika sesuai dan benar penulisannya maka hasilnya akan menjadi seperti pada contoh dibawah ini :
Dan jika kalian isi kolom form input email tsb maka akan nampil form input password dan seterusnya.
jadi seperti itulah untuk pembahasan kita kali ini tentang Cara Membuat Form Login Animasi dengan JQuery. semoga dapat sangat bermanfaat buat kalian dan sampai bertemu pada pembahasan selanjutnya.
Terimakasih