Hello semuanya kali ini saya akan share cara menampilkan password menggunakan html & javascript, seperti gambar dibawah ini
Selanjutnya kita membuat file dengan nama index.html
lalu codingan nya seperti dibawah ini ya, untuk penjelasan nya ada di bawah kodingan ini ya
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>check show hide password</title>
<style>
body {
padding: 3rem;
}
</style>
</head>
<body>
Password : <input type="password" value="banana" id="myInput">
<input type="checkbox" onclick="myFunction()"> Show Password
</body>
<script>
function myFunction() {
var x = document.getElementById("myInput");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
</script>
</html>
Oke kita jelaskan satu persatu ya
Password : <input type="password" value="banana" id="myInput">
artinya kita membuat password denga type password dan mempunyai value banana artinya kotak password tersebut ketika kita baru refresh pada browser tersebut maka di kotak itu terdapat tulisan banana dan kita juga membuat id dengan nama myInput fungsinya untuk memangil id tersebut lalu memberikan perintah.
<input type="checkbox" onclick="myFunction()"> Show Password
Nah ini berfungsi untuk membuat checkbox dan menggunakan function onclick myFunction
onclick disini berfungsi ketika kita klik pada bagian checkbox tersebut maka dia akan melakukan sesuatu tergantung apa yang kita inginkan.
Oke selanjutnya kita menjelaskan mengenai pada bagian script javascriptnya ya.
function myFunction() {
Fungsi ini berfungsi untuk memanggil yang bernama myFunction yang di ambil dari checkbox dan memberi tahu ketika di click ia akan melakukan sesuatu
var x = document.getElementById("myInput");
Nah disini ktia membuat variabel x lalu kita mengambil data id myInput yang diambil dari input type password.
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
disini kita membuat jika x.type ==== password maka hasilnya text.
x ini di didapat dari nama variabel tersebut lalu type di ambil dari input type password
Selesai.
Sampai jumpa di tutorial selanjutnya
No comments:
Post a Comment