Halo semuanya, kembali lagi di sahretech. Nah pada artikel tutorial kali ini kita akan membuat sebuah fitur untuk memudahkan pengguna dalam membaca password yang dimasukkan. Yaitu menyembunyikan atau menampilkan password pada form login. Penasaran?, yuk ikuti tutorialnya dibawah ini
Buat folder baru dengan nama pass_hide_show, lalu buat file index. html di dalamnya. Isi file dengan skrip di bawah ini
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> </head> <body> <br> <div class="container jumbotron alert alert-success col-4 text-center"> A Simple Login Form </div> <div class="container jumbotron col-4"> <form> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"> </div> <div class="form-group"> <label for="exampleInputEmail1">Password</label> <div class="input-group"> <input type="password" id="pass" class="form-control"> <div class="input-group-append"> <!-- kita pasang title untuk merubah icon buka/tutup mata setiap diklik --> <span id="mybutton" title="change()" class="input-group-text"> <!-- icon mata bawaan bootstrap --> <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-eye-fill" fill="currentColor" xmlns="//www.w3.org/2000/svg"> <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z" /> <path fill-rule="evenodd" d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z" /> </svg> </span> </div> </div> </div> <br> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> <script> // membuat fungsi change function change() { // membuat variabel berisi tipe input dari id='pass', id='pass' adalah form input password var x = document.getElementById('pass').type; //membuat if kondisi, jika tipe x adalah password maka jalankan perintah di bawahnya if (x == 'password') { //ubah form input password menjadi text document.getElementById('pass').type = 'text'; //ubah icon mata terbuka menjadi tertutup document.getElementById('mybutton').innerHTML = `<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-eye-slash-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path d="M10.79 12.912l-1.614-1.615a3.5 3.5 0 0 1-4.474-4.474l-2.06-2.06C.938 6.278 0 8 0 8s3 5.5 8 5.5a7.029 7.029 0 0 0 2.79-.588zM5.21 3.088A7.028 7.028 0 0 1 8 2.5c5 0 8 5.5 8 5.5s-.939 1.721-2.641 3.238l-2.062-2.062a3.5 3.5 0 0 0-4.474-4.474L5.21 3.089z"/> <path d="M5.525 7.646a2.5 2.5 0 0 0 2.829 2.829l-2.83-2.829zm4.95.708l-2.829-2.83a2.5 2.5 0 0 1 2.829 2.829z"/> <path fill-rule="evenodd" d="M13.646 14.354l-12-12 .708-.708 12 12-.708.708z"/> </svg>`; } else { //ubah form input password menjadi text document.getElementById('pass').type = 'password'; //ubah icon mata terbuka menjadi tertutup document.getElementById('mybutton').innerHTML = `<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-eye-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/> <path fill-rule="evenodd" d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/> </svg>`; } } </script> </body> </html>
Simpan dan jalankan file tersebut di browser, maka hasilnya akan terlihat seperti gambar di bawah ini
Penjelasan
Untuk membuat fitur hide/show password, logikanya sangat sederhana, dimana kita membutuhkan event javascript title yang diletakkan pada ikon mata di akhir form password.
Jangan lupa beri id="pass" pada form input password, karena type akan berubah menjadi type="text" atau type="password" setiap icon mata di klik
Untuk ikon, kami tidak menggunakan font yang mengagumkan, tetapi kami menggunakan ikon svg bawaan bootstrap. Ada 2 icon mata yang kita gunakan yaitu icon mata terbuka dan icon mata tertutup
<input type="password" id="pass" class="form-control"> <div class="input-group-append"> <!-- kita pasang title untuk merubah icon buka/tutup mata setiap diklik --> <span id="mybutton" title="change()" class="input-group-text"> <!-- icon mata bawaan bootstrap --> <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-eye-fill" fill="currentColor" xmlns="//www.w3.org/2000/svg"> <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z" /> <path fill-rule="evenodd" d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z" /> </svg> </span> </div>_
Dan terakhir, agar event title di atas bisa berjalan, kita perlu menambahkan fungsi javascript seperti script di bawah ini
<script> // membuat fungsi change function change() { // membuat variabel berisi tipe input dari id='pass', id='pass' adalah form input password var x = document.getElementById('pass').type; //membuat if kondisi, jika tipe x adalah password maka jalankan perintah di bawahnya if (x == 'password') { //ubah form input password menjadi text document.getElementById('pass').type = 'text'; //ubah icon mata terbuka menjadi tertutup document.getElementById('mybutton').innerHTML = `<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-eye-slash-fill" fill="currentColor" xmlns="//www.w3.org/2000/svg"> <path d="M10.79 12.912l-1.614-1.615a3.5 3.5 0 0 1-4.474-4.474l-2.06-2.06C.938 6.278 0 8 0 8s3 5.5 8 5.5a7.029 7.029 0 0 0 2.79-.588zM5.21 3.088A7.028 7.028 0 0 1 8 2.5c5 0 8 5.5 8 5.5s-.939 1.721-2.641 3.238l-2.062-2.062a3.5 3.5 0 0 0-4.474-4.474L5.21 3.089z"/> <path d="M5.525 7.646a2.5 2.5 0 0 0 2.829 2.829l-2.83-2.829zm4.95.708l-2.829-2.83a2.5 2.5 0 0 1 2.829 2.829z"/> <path fill-rule="evenodd" d="M13.646 14.354l-12-12 .708-.708 12 12-.708.708z"/> </svg>`; } else { //ubah form input password menjadi text document.getElementById('pass').type = 'password'; //ubah icon mata terbuka menjadi tertutup document.getElementById('mybutton').innerHTML = `<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-eye-fill" fill="currentColor" xmlns="//www.w3.org/2000/svg"> <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/> <path fill-rule="evenodd" d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/> </svg>`; } } </script>
Dalam fungsi chnage(). kita buat variabel x yang berisi input type dari id="pass", id="pass" adalah pengenal dari form input password yang sudah kita buat diatas.
Kemudian kita lakukan pengkondisian, dimana jika x sama dengan password maka ubah jenis dari form input password menjadi text dan juga ubah icon mata terbuka menjadi icon mata tertutup
Sebaliknya, jika x tidak sama dengan kata sandi, maka ubah jenis dari formulir input teks menjadi kata sandi dan ubah juga ikon mata tertutup menjadi terbuka.
Di setiap script diatas sudah saya sertakan sedikit penjelasannya. Namun jika anda masih kesulitan untuk memahami script-script diatas, silahkan copy paste 1 script full pada script pertama yang saya berikan
Pada artikel ini kita hanya membuat tampilan saja, untuk membuat fungsi login anda bisa membaca artikel saya sebagai berikut https. // www. sahretech. com/2019/10/easy-way-to-make-multi-login-in-php. html
Sekian tutorial cara menyembunyikan/menampilkan password dengan javascript dan bootstrap. Semoga bermanfaat, jika ada pertanyaan terkait artikel diatas silahkan tinggalkan komentar dibawah. Sampai jumpa di artikel pemrograman keren lainnya. Selamat Coding. )