Pada tutorial membuat input password html ketika kita memasukan teks akan menjadi karakter bintang (*) atau (•) tergantung browser yang kita gunakan.
kita akan mencoba cara show hide password pada html, ada beberapa cara, bisa menggunakan vanilla javascript dan jQuery.
saat mengisi formulir, ada situasi dimana kita mengetik kata sandi dan ingin melihat apa yang telah kita ketik, untuk melihatnya ada kotak centang yang membuat karakter terlihat.
Cara show hide password dengan javascript
kita akan mengimplementasikan menggunakan javascript, jadi saat mengetik akan muncul ******* dan saat klik checkbox maka akan muncul karakter : rahasia
<!DOCTYPE html>
<html>
<head>
<title> show password dengan javascript </title>
</head>
<body>
<p>
klik checkbox tampilkan password untuk melihat kata sandi
</p>
Password: <input type="password" value="rahasia" id="inputPassword">
<br><br>
<input type="checkbox" onclick="myFunction()">Tampilkan Password
<script>
function myFunction() {
var x = document.getElementById("inputPassword");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
</script>
</body>
</html>
tampilan kata sandi tersembunyi atau tidak bisa dibaca :
kata sandi yang bisa dibaca :
Cara show hide password dengan jQuery
menampilkan dan menyembunyikan password menggunakan jQuery, fitur ini biasanya terdapat pada form login pada sebuah halaman web.
fitur show hide password walaupun bisa menggunakan javascript, namun lebih mudah jika kita sudah menggunakan library jQuery
kita juga menggunakan Bootstrap 5 untuk penggunaan CSS supaya lebih bagus.
sumber : https://thohirdev.com/tutorial/cara-show-hide-password-pada-html/
