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

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.

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.

kita mengecek checkbox aktif dengan

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

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:

• membuat show password
• hide dan unhide password di php
• membuat show password di php
• menampilkan password php
• cara menampilkan password md5
• Cara bikin form search ketika di ketik keliatan
• cara membuat show password di php
• membuat fasilitas show hide password form login
• show hide password php
• jquery passowrd show