Show Hide Form Password Dengan JQuery
Show Hide Form Password Dengan JQuery
Show Hide Form Password Dengan JQuery – Mungkin teman-teman ada yang masih bingung dengan judul tutorial kali ini, yaitu Show Hide Form Password Dengan JQuery. jangan bingung tema-teman. akan saya jelaskan sedikit yang di maksud dengan show hide password.
Show hide password adalah fitur untuk memunculkan karakter yang di ketik pada form password. kan biasanya pada form password password, karakter yang tampil berupa bintang atau titik-titik yang tebal. jadi di sini kita akan mencoba membuat show hide karakter nya. di mana pada saat di klik pada show password maka karakter yang di ketik pada form password akan di tampilkan.
Show Hide Form Password Dengan JQuery
Bingung ? lihat contohnya pada gambar di bawah ini.
show hide form password dengan jquery
tampil dan sembunyikan password
Cara Menampilkan dan Menyembunyikan Password Dengan JQuery
Oke langsung saja teman-teman silahkan di perhatikan penjelasan untuk membuat show hide password berikut ini.
Yang kita butuhkan di tutorial ini adalah :
- file html/php
- jquery.js
- style.css
pada file html atau php nya kita akan buatkan form nya. dan pada style.css kita akan mempercantik tampilan form password kita. agar lebih enak di pandang ya. hehe
dan yang terpenting di sini kita membutuhkan library jquery.js. silahkan teman-teman download dari situs resmi jquery. http://jquery.com
kemudian buatkan sebuah file ntah itu html atau php. di sini saya membuat file dengan nama index.html. karena pada file ini lah kita akan membuat form password serta checkbox nya. untuk menampilkan dan menyembunyikan password nya.
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html> <head> <title>Show Hide Form Password Dengan JQuery | www.malasngoding.com</title> <script type="text/javascript" src="jquery.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Show Hide Form Password Dengan JQuery <br/> www.malasngoding.com</h1> <div class="kotak"> <form> <input class="form-password" type="password"> <br/> <br/> <input type="checkbox" class="form-checkbox"> Show password <br/> <br/> <input class="form-submit" type="submit" value="Login"> </form> </div> </body> <script type="text/javascript"> $(document).ready(function(){ $('.form-checkbox').click(function(){ if($(this).is(':checked')){ $('.form-password').attr('type','text'); }else{ $('.form-password').attr('type','password'); } }); }); </script> </html> |
baik saya jelaskan di sini tentang fungsi jquery yang kita buat untuk bisa menampilkan dan menyembunyikan form password. di sini yang harus kita lakukan pertama kali adalah dengan cara mendeteksi checkbox. apakah checkbox dalam keadaan aktif(di content) atau dalam kondisi non aktif. cara mengeceknya mudah teman-teman. pertama kita berikan event klik dulu pada checkbox.
|
1 |
$('.form-checkbox').click(function(){ |
teman-teman bisa membaca tutorial saya sebelumnya yang telah kita bahas tentang event pada jquery. baca tutorial event jquery. dan jika teman-teman ingin mempelajari event pada javascript teman-teman bisa baca tutorial event javascript.
kemudian kita cek apakah checkbox dalam keadan aktif atau non aktif.
|
1 2 3 4 5 |
if($(this).is(':checked')){ $('.form-password').attr('type','text'); }else{ $('.form-password').attr('type','password'); } |
kita mengecek checkbox aktif dengan
|
1 |
if($(this).is(':checked')){ |
lalu kita cek, jika aktif maka atribut form password kita ganti dengan text. jika checkbox tidak aktif maka kita ganti kembali atribut form password menjadi password.
yaitu dengan cara menangkap data
style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300); body{ font-family: 'Open Sans', sans-serif; background: #f2f5f7; } h1{ font-weight: 400; text-align: center; color: #2D3E50; } .kotak{ background: #1BBC9D; width: 500px; padding:60px 40px; color: #fff; margin:10px auto; box-shadow: 2px 2px 4px 0 #ccc; } .form-password{ width: 93%; padding: 10px 15px; font-size: 14pt; border: none; color: #2D3E50; } .form-submit{ padding: 10px 15px; background: transparent; border: 2px solid #fff; color: #fff; font-size: 12pt; } |
dan coba teman-teman coba sendiri pada demo nya berikut ini.
See the Pen menampilkan dan menyembunyikan password dengan jquery by Malas Ngoding (@malasngoding) on CodePen.
Mungkin sekian saja tutorial membuat Show Hide Form Password Dengan JQuery. semoga dapat bermanfaat.
Tutorial Menarik Lainnya
Membuat Pencarian Tanpa Reload Dengan PHP Dan Ajax JQuery
Membuat Halaman Web Ajax Tanpa Reload dengan JQuery
Membuat Animasi Form Dengan JQuery
Membuat Form Validasi Sendiri Dengan JQuery Tanpa Plugin
