Cara menggunakan html show

Question

Table of Contents Show

Cara show hide password dengan javascript
Cara show hide password dengan jQuery
Bagaimana cara menggunakan HTML?
Bagaimana cara menampilkan gambar di HTML?
Kenapa gambar tidak bisa muncul di HTML?
Apa itu HTML dan bagaimana cara membuatnya?

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>



Code language: HTML, XML (xml)

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.

<!DOCTYPE html>
<html>
<head>
    <title>Cara show hide password dengan jquery</title>

    <!-- Bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm//dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <div class="mb-3 row">
            <label for="inputUsername" class="col-sm-2 col-form-label">Username</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="inputUsername" value="thohirdev">
            </div>
        </div>
        <div class="mb-3 row">
            <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="inputPassword" value="rahasia">
            </div>
        </div>
        <div class="mb-3 row">
            <div class="col-sm-10 offset-2">
                <input type="checkbox" class="form-check-input" id="show-password"> Tampilkan Password
            </div>
        </div>

    </div>

    <!-- jquery 3.5.1 -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#show-password').click(function() {
                if ($(this).is(':checked')) {
                    $('#inputPassword').attr('type', 'text');
                } else {
                    $('#inputPassword').attr('type', 'password');
                }
            });
        });
    </script>
</body>
</html>



Code language: HTML, XML (xml)

tampilan saat kata sandi tersembunyi :

tampilan kata sandi saat ditampilkan:

Demikian tutorial sederhana ini, semoga bermanfaat bagi teman-teman dan sampai jumpa pada tutorial berikutnya 🙂

Bagaimana cara menggunakan HTML?

Cara Membuat Halaman Web Sederhana dengan HTML.

Buka editor teks. ... .

Atur jenis dokumen untuk HTML. ... .

Tambahkan tab judul untuk halaman web kamu. ... .

Ketik di bawah tag "Head" yang tertutup. ... .

Selanjutnya membuat judul halaman. ... .

Tambahkan judul tambahan jika kamu mau. ... .

Membuat paragraf. ... .

Mengubah warna teks..

Bagaimana cara menampilkan gambar di HTML?

Dalam HTML, tag yang berfungsi untuk menampilkan gambar adalah tag <img>, singkatan dari image. Tag <img> merupakan jenis tag yang berdiri sendiri atau dalam konteks elemen, merupakan elemen tanpa tag penutup (empty element). Tag <img> memiliki atribut khusus yaitu src singkatan dari source yang berarti sumber.

Kenapa gambar tidak bisa muncul di HTML?

Salah satu penyebab gambar tidak muncul di web adalah kesalahan nama folder gambar di kode HTML. Kesalahan tersebut membuat server tidak akan bisa menemukan gambar yang diminta untuk ditampilkan. Jika nama folder sudah dikoreksi, akses kembali halaman website yang gambarnya tidak muncul.

Apa itu HTML dan bagaimana cara membuatnya?

HTML adalah adalah singkatan dari Hypertext Markup Language. HTML memungkinkan seorang pengguna dapat membuat dan menyusun bagian heading, paragraf, link atau tautan, dan blockquote untuk halaman sebuah website.