Auto hide password pada form Login PHP menggunakan checkbox

Auto hide password pada form Login PHP menggunakan checkbox

Baiklah agan semua kali ini saya akan menulis artikel tentang bagaimana caranya membuat form autohide password pada form login dengan php. Caranya lumayan simple, karena hanya dengan menambahkan satu bari code javascript, permasalahan sudah bisa terselesaikan…..

Ok langsung kita buat step by stepnya :

1.       Seperti biasa buka terlebih dahulu aplikasi dreamweaper pada laptop anda

2.       Kemudian buka new document dengan Page Type : Php

3.       Buatlah sebuah form Login, agar setiap field yang kita buat terlihat lebih rapi, kali ini saya menggunakan bantuan tabel untuk menempatkan field field yang akan kita butuhkan. Untuk lebih jelasnya teman-teman bisa lihat pada gambar berikut:

4.       Kemudian untuk membuat auto hide, tambahkan code berikut pada properti checkbox Anda.
onchange="document.getElementById('password').type = this.checked ? 'text' : 'password'"
Pastikan id yang digunakan adalah id dari field password, seperti yang sudah saya blok pada step yang ke-4.

  

5.       Masih bingung? Kalau begitu coba saja copas source code nya berikut ini:

<form id="form1" name="form1" method="post" action=""> <table width="200" border="1"> <tr> <td>Username</td> <td><label for="username"></label> <input name="username" type="text" id="username" value="Username" /></td> </tr> <tr> <td>Password</td> <td><label for="password"></label> <input name="password" type="password" id="password" value="Password" /></td> </tr> <tr> <td> </td> <td><input type="checkbox" name="checkbox" onchange="document.getElementById('password').type = this.checked ? 'text' : 'password'" id="checkbox" /> <label for="checkbox">Show Password</label></td> </tr> <tr> <td> </td> <td><input type="submit" name="button" id="button" value="Login" /></td> </tr> </table> </form>

6.       Selamat mencoba dan semoga berhasil
7. Jangan komentarnya ya kawan - kawan ...... :)