Halo semuanya, kembali lagi di sahretech. Baiklah di artikel tutorial kali ini kita akan membuat sebuah fitur untuk mempermudah user dalam membaca password yang mereka masukkan. Yaitu hide or show password pada form login. Penasaran?, ayo ikuti tutorialnya di bawah ini.
Buatlah sebuah folder baru dengan nama pass_hide_show, lalu buatlah sebuah file index.html di dalamnya. Isi file tersebut dengan script yang ada 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="https://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 onclick untuk merubah icon buka/tutup mata setiap diklik -->
<span id="mybutton" onclick="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="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>
</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>Save dan jalankan file tersebut di browser, maka hasilnya akan tampak seperti gambar di bawah ini:
 |
| Hasil dari script yang dijalankan |
Penjelasan
Untuk membuat fitur hide/show password logikannya sangat mudah sekali, dimana kita membutuhkan javascript onclick event yang diletakkan pada icon mata yang berada di ujung form password.
Tidak lupa juga kita berikan id="pass" pada form input password, karena type-nya akan kita ubah menjadi type="text" atau type="password" setiap kali icon mata diklik
Untuk iconnya kita tidak menggunakan font awesome, tapi kita menggunakan icon 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 onclick untuk merubah icon buka/tutup mata setiap diklik -->
<span id="mybutton" onclick="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="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>
</span>
</div>Dan yang terakhir, agar event onclick di atas dapat bekerja, kita perlu menambahkan javascript function 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="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>Di dalam function chnage() : kita buat sebuah variabel x yang berisi tipe input dari id="pass", id="pass" adalah tanda pengenal form input password yang telah kita buat di atas.
Kemudian kita buat pengkondisian, dimana jika x sama dengan password maka ubah tipe dari form input password menjadi text dan juga ubah icon mata terbuka menjadi icon mata tertutup.
Sebaliknya jika x tidak sama dengan password maka ubah tipe dari form input text menjadi password dan juga ubah icon mata tertutup menjadi terbuka.
Disetiap script yang ada di atas, saya sudah menyertakan sedikit penjelasannya. Tapi jika kalian masih merasa kesulitan untuk memahami script-script yang ada di atas, silahkan copy paste saja 1 script penuh pada script pertama yang saya berikan.
Pada artikel ini kita hanya membuat tampilannya saja, untuk membuat fungsi login kalian bisa membaca artikel saya berukut ini https://www.sahretech.com/2019/10/cara-mudah-membuat-multi-login-di-php.html
Sekian tutorial cara membuat hide/show password dengan javascrip dan bootstrap. Semoga bermanfaat, jika ada pertanyaan terkait dengan artikel di atas silahkan tinggalkan komentar di bawah ini. Sampai jumpa di artikel pemrograman keren lainnya. Happy Coding :)
No comments
Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik
Tidak boleh menyertakan link atau promosi produk saat berkomentar. Komentar tidak akan ditampilkan. Hubungi 081271449921(WA) untuk dapat menyertakan link dan promosi