Hallo sahabat Dumet School, bagaimana kabarnya setelah menikmati liburan panjang. Apakah masih tetap semangat codingnya? semoga selalu full power semangat belajarnya. Dalam kesempatan kali ini saya akan memberikan tutorial yang berhubungan dengan password atau dengan input password. Nah pada kasus kali ini ada yang berbeda nih karena saya memakai toggle visibility , ya bisa di sederhanakan seperti menampilkan atau menyembunyikan.Kenapa saya memakai toggle karena akan dijumpai pada script yang digunakan dalam javascript, baiklah supaya tidak terlalu lama bagaimana cara menggunakan toggle visibility input password , coba sekarang sahabat siapkan struktur HTML terlebih dahulu seperti dibawah ini:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Cara Menggunakan Toggle Visibility pada Input Password</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Toggle Visibility pada Input Password</h1> <h5>Your Password</h5> <div class="container"> <input type="password"> <i class="material-icons oplos">visibility</i> </div> </body> </html> |
langkah selanjutnya tambahkan style untuk CSS coba ketikan seperti berikut :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
@import url('https://fonts.googleapis.com/icon?family=Material+Icons'); .container{ width: 60%; display: flex; align-items: center; border:1px solid #ddd; border-radius: 3px; } .container input{ padding:5px; width: 100%; font-size: 16px; border: 0; outline: none; color:#666; } i{ margin:0 10px; color:#b5b5b5; cursor: default; font-size: 10px; } |
pada HTML terdapat sebuah Icon yang menggunakan tag <i> , lalu pada CSS dapat dilihat line 1 saya melakukan import Icon atau mengakses library data secara online disini,
Langkah selanjutnya setelah mengetikan file html dan css sekarang tambahkan script dari javascript berikut ini:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script> const visibilityToggle = document.querySelector('.oplos'); const input = document.querySelector('.container input'); var password = true; visibilityToggle.addEventListener('click', function(){ if(password) { input.setAttribute('type', 'text'); visibilityToggle.innerHTML = 'visibility'; } else { input.setAttribute('type', 'password'); visibilityToggle.innerHTML = 'visibility_off'; } password = !password; }); </script> |
jika semua sudah diketikkan coba simpan lalu jalankan pada browser masing-masing ,apakah seperti ini tampilannya:
Demikian pembahasan tentang cara menggunakan toggle visibility input password ,semoga bermanfaat dan selamat mencoba
terima kasih