
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.0
Mungkin sekian saja tutorial membuat Show Hide Form Password Dengan JQuery. semoga dapat bermanfaat.
Incoming search terms:
- cara membuat show password di php
- show hide password php
- buat check box show password di halaman login php
- cara show password di java
- cara menampilkan password php
- membuat form login tidak kelihatan password java
- cara menampilkan password md5
- cara agar input password dijava
- membuat fasilitas show password di php
- malas ngoding jquery
TUTORIAL MENARIK LAINNYA

Membuat Halaman Web Ajax Tanpa Reload dengan JQuery

Membuat Animasi Form Dengan JQuery

Membuat Form Validasi Sendiri Dengan JQuery Tanpa Plugin

Download Ebook belajar HTML & CSS dasar untuk pemula gratis.
Ebook ini di buat oleh Diki Alfarabi Hadi, Founder dari www.malasngoding.com. yang aktif menulis tutorial pemrograman di www.malasngoding.com. ebook ini bisa di download oleh teman-teman yang baru mulai belajar HTML dan CSS dasar tapi tidak tahu mau memulai belajar dari mana. materi pembelajaran sudah di susun secara sistematis dan di dukung contoh gambar.
DOWNLOAD
Discussion
No Comment