Membuat Show Hide Password Di HTML

Pada tutorial ini kita akan Belajar Membuat Show Hide Password Di HTML dengan sangat mudah dan sederhana.

Pada umumnya, inputan pada form password akan disamarkan dengan tujuan privasi dan keamanan pada saat user mengisi data password.

Dengan fitur show hide password ini, user bisa menampilkan inputan yang disamarkan ke dalam bentuk inputan asli yang diinput oleh user.

Dengan kata lain ini adalah cara menampilkan dan menyembunyikan password pada form password.

Setelah menampilkan password, user juga bisa melakukan hide atau menyamarkan kembali inputannya.

Yuk kita mulai.

Membuat Show Hide Password Di HTML

Langkah pertama, yang perlu teman-teman lakukan adalah membuat sebuah form login sebagai simulasi dari show hide password yang akan kita buat.

Pada contoh ini saya contohkan dengan membuat sebuah form login di dalam sebuah file malasngoding.html.

malasngoding.html

Setelah membuat form login, kita lanjut dengan mendesain sedikit tampilannya agar terlihat lebih menarik.

Baca juga : Membuat Desain Form Login Dengan CSS

Mendesain Form Login Dengan CSS

Setelah membuat form login, kita akan memberikan sedikit sentuhan CSS agar form login kita lebih terlihat rapi dan menarik.

CSS

Jika kita jalankan, maka hasilnya akan seperti berikut.

Seperti yang bisa teman-teman perhatikan pada coding dan gambar di atas,

Kita membuat form password dan sebuah form checkbox yang berguna sebagai pengatur password ditampilkan atau disembunyikan.

Perhatikan pada coding berikut.

<input type="password" id="passwordKu" placeholder="Masukkan username ..">

Pada form password ini kita membuat id dengan value nya “passwordKu“.

dan pada form checkbox, kita membuat event yang jika form ini diklik, maka akan menjalankan function javascript showHide().

<input type="checkbox" onclick="showHide()"> Tampilkan Password

Oke, Sekarang kita masuk ke inti dari membuat show hide password dengan javascript.

Yaitu membuat perintah untuk menampilkan dan menyembunyikan passwordnya.

Membuat Show Hide Password Dengan JavaScript

Untuk proses menampilkan dan menyembunyikan text yang ada pada form password, kita akan menggunakan javascript.

Tuliskan coding javascript berikut pada bagian bawah.

Coba teman-teman perhatikan pada perintah javascript di atas.

Pertama kita deklarasi form password yang ber id “passwordKu” ke dalam variabel inputan.

Kemudian kita periksa jika type dari form tersebut adalah “password“, maka kita ubah type form nya menjadi “text“. agar isi dari form password tersebut terlihat.

Karena dianggap sebagai form text, bukan form password lagi.

Dan jika saat form checkbox diklik, dan form password ber-type “text”, maka kita kembalikan lagi form password ini ke type “password“.

Bingung memahaminya? hehe ..

Pahami pelan-pelan saja. hehe ..

Form checkbox ini berguna sebagai toggle.

Contoh Source Code Form Login Dengan Fitur Show Hide Password

Dari penjelasan di atas, maka sekarang file malasngoding.html akan menjadi seperti berikut.

malasngoding.html

Sekarang kita coba jalankan form login yang sudah kita buat seperti pada gambar berikut.

Jika form checkbox “Tampilkan Password” diklik, maka isi dari form password akan terlihat.

Dan jika checkbox “Tampilkan Password diklik lagi, maka form password akan kembali disembunyikan.

Demikian tutorial membuat form login dengan fitur show hide password, atau menampilkan dan menyembunyikan isi pada form password.

Demo :

See the Pen Untitled by Malas Ngoding (@malasngoding) on CodePen.

Selesai sudah tutorial cara membuat show hide password di HTML. semoga dapat bermanfaat dan bisa membantu teman-teman dalam belajar.

Baca juga tutorial lainnya :

• Membuat Show Hide Form Password Dengan JQuery
• Membuat Login Dengan PHP dan MySQLi

Terima kasih.