Show password? Ya, Kita kali ini akan belajar mengenai bagaimana sih membuat fungsi show password pada HTML. Pada umumnya, kita melihat apabila akan mengisikan suatu password akan menampilkan lambang asterisk seperti *****. Hal ini berguna agar orang lain bahkan Kita sendiri tidak dapat membacanya. Dengan kata lain sebagai salah satu keamanan.
Tapi terkadang, ketika kita sendiri yang menuliskan password tersebut, Kita sendiri lupa karakter apa yang baru saja Kita ketikkan. Jika password yang dimiliki tidak rumit, pastinya sangat mudah. Namun bagaimana jika cukup rumit? Apalagi terdapat spesial karakter? Pastinya agak ribet bukan?
Dari kasus di atas, kali ini Kita akan membuat bagaimana caranya agar karekter asterisk tersebut dapat terbaca. Kita disini menggunakan HTML dan JavaScript. Tak lupa kita juga akan menggunakan tag yang bernama checkbox. Jadi cara kerjanya, ketika kita sedang menuliskan password dan lupa telah menulis apa saja, checkbox tersebut kita centang, maka karakter asterisk tersebut akan berubah menjadi karakter yang suda kita inputkan.
Pertama tama kita akan membuat sebaris code element HTML textfield yang berfungsi untuk menuliskan password. Jangan lupa menggunakan type password pada astributnya agar karakter berubah menjadi asterisk atau symbol lain. Setelah itu, pada bagian bawah element textfield tersebut, kita akan menambahakan sebaris code untuk membuat checkbos. Kira kira begini codenya :
<input type="password" name="pass1" id="passwd"> <input type="checkbox" onclick="showPasswd()"> Show Password
Sedikit penjelasan code diatas, kita akan focus pada element checkbox dimana kita lihat terdapat event onclick(). Jika Kamu ingin tau apa itu onclick(), Kamu bisa membaca pada artikel Kami yang lainnya pada halaman Penggunaan Event OnClick() pada html dan Javascript. Pada event tersebut, kita memanggil nama fungsi showPasswd() yang didalamnya terdapat proses menampilkan password dari asterisk ke karakter.
Pada dasarnya, untuk menampilkan password ini, kita hanya sedikit trik yakni mengubah type passsword pada tag input menjadi text, namun kita memproses menggunakan JavaScript. Begini contoh codenya pada javascript :
<script type="text/javascript">
function showPasswd(){
//membuat variabel dari inputan password passwd
var x = document.getElementById("passwd");
//fungsi untuk mengubah type password ke text dan sebaliknya
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
</script>
Dan apabila kesemua script diatas digabungkan menjadi satu halaman, makan secara lengkapnya akan terlihat sebagai berikut :
<html>
<head>
<title>Tutorial Show Password CheckBox</title>
</head>
<body>
<input type="password" name="pass1" id="passwd"><br/>
<input type="checkbox" onclick="showPasswd()"> Show Password
</body>
</html>
<script type="text/javascript">
function showPasswd(){
var x = document.getElementById("passwd");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
</script>
Mudah bukan? sekarang giliran Kamu untuk mencobanya. Semoga berhasil ya.
Leave a Reply