Cara menggunakan formulir tampilan javascript

Halo semuanya, kembali lagi di sahretech. Nah pada artikel tutorial kali ini kita akan membuat sebuah fitur untuk memudahkan pengguna dalam membaca password yang dimasukkan. Yaitu menyembunyikan atau menampilkan password pada form login. Penasaran?, yuk ikuti tutorialnya dibawah ini

Table of Contents Show

Apa cara yang benar untuk menggunakan file JavaScript dalam HTML?
Bagaimana cara membuat fungsi dalam JavaScript?
Permintaan JavaScript untuk apa?
Apa yang dimaksud dengan onklik?

Buat folder baru dengan nama pass_hide_show, lalu buat file index. html di dalamnya. Isi file dengan skrip di bawah ini



<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
            integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    </head>
    
    <body>
        <br>
        <div class="container jumbotron alert alert-success col-4 text-center">
            A Simple Login Form
        </div>
        <div class="container jumbotron col-4">
            <form>
                <div class="form-group">
                    <label for="exampleInputEmail1">Email address</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail1">Password</label>
                    <div class="input-group">
                        <input type="password" id="pass" class="form-control">
                        <div class="input-group-append">
    
                            <!-- kita pasang onclick untuk merubah icon buka/tutup mata setiap diklik  -->
                            <span id="mybutton" onclick="change()" class="input-group-text">
    
                                <!-- icon mata bawaan bootstrap  -->
                                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-eye-fill" fill="currentColor"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z" />
                                    <path fill-rule="evenodd"
                                        d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z" />
                                </svg>
                            </span>
                        </div>
                    </div>
                </div>
                <br>
                <button type="submit" class="btn btn-primary">Submit</button>
            </form>
        </div>
        <script>
            // membuat fungsi change
            function change() {
    
                // membuat variabel berisi tipe input dari id='pass', id='pass' adalah form input password 
                var x = document.getElementById('pass').type;
    
                //membuat if kondisi, jika tipe x adalah password maka jalankan perintah di bawahnya
                if (x == 'password') {
    
                    //ubah form input password menjadi text
                    document.getElementById('pass').type = 'text';
                    
                    //ubah icon mata terbuka menjadi tertutup
                    document.getElementById('mybutton').innerHTML = `<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-eye-slash-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                                                    <path d="M10.79 12.912l-1.614-1.615a3.5 3.5 0 0 1-4.474-4.474l-2.06-2.06C.938 6.278 0 8 0 8s3 5.5 8 5.5a7.029 7.029 0 0 0 2.79-.588zM5.21 3.088A7.028 7.028 0 0 1 8 2.5c5 0 8 5.5 8 5.5s-.939 1.721-2.641 3.238l-2.062-2.062a3.5 3.5 0 0 0-4.474-4.474L5.21 3.089z"/>
                                                                    <path d="M5.525 7.646a2.5 2.5 0 0 0 2.829 2.829l-2.83-2.829zm4.95.708l-2.829-2.83a2.5 2.5 0 0 1 2.829 2.829z"/>
                                                                    <path fill-rule="evenodd" d="M13.646 14.354l-12-12 .708-.708 12 12-.708.708z"/>
                                                                    </svg>`;
                }
                else {
    
                    //ubah form input password menjadi text
                    document.getElementById('pass').type = 'password';
    
                    //ubah icon mata terbuka menjadi tertutup
                    document.getElementById('mybutton').innerHTML = `<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-eye-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                                                    <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/>
                                                                    <path fill-rule="evenodd" d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/>
                                                                    </svg>`;
                }
            }
        </script>
    </body>
    
    </html>

Simpan dan jalankan file tersebut di browser, maka hasilnya akan terlihat seperti gambar di bawah ini

Hasil dari script yang dijalankan

Penjelasan

Untuk membuat fitur hide/show password, logikanya sangat sederhana, dimana kita membutuhkan event javascript onclick yang diletakkan pada ikon mata di akhir form password.

Jangan lupa beri id="pass" pada form input password, karena type akan berubah menjadi type="text" atau type="password" setiap icon mata di klik

Untuk ikon, kami tidak menggunakan font yang mengagumkan, tetapi kami menggunakan ikon svg bawaan bootstrap. Ada 2 icon mata yang kita gunakan yaitu icon mata terbuka dan icon mata tertutup



<input type="password" id="pass" class="form-control">
        <div class="input-group-append">

            <!-- kita pasang onclick untuk merubah icon buka/tutup mata setiap diklik  -->
            <span id="mybutton" onclick="change()" class="input-group-text">

                <!-- icon mata bawaan bootstrap  -->
                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-eye-fill" fill="currentColor"
                    xmlns="http://www.w3.org/2000/svg">
                    <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z" />
                    <path fill-rule="evenodd"
                        d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z" />
                </svg>
            </span>
        </div>

Dan terakhir, agar event onclick di atas bisa berjalan, kita perlu menambahkan fungsi javascript seperti script di bawah ini



<script>
            // membuat fungsi change
            function change() {
    
                // membuat variabel berisi tipe input dari id='pass', id='pass' adalah form input password 
                var x = document.getElementById('pass').type;
    
                //membuat if kondisi, jika tipe x adalah password maka jalankan perintah di bawahnya
                if (x == 'password') {
    
                    //ubah form input password menjadi text
                    document.getElementById('pass').type = 'text';
                    
                    //ubah icon mata terbuka menjadi tertutup
                    document.getElementById('mybutton').innerHTML = `<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-eye-slash-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                                                    <path d="M10.79 12.912l-1.614-1.615a3.5 3.5 0 0 1-4.474-4.474l-2.06-2.06C.938 6.278 0 8 0 8s3 5.5 8 5.5a7.029 7.029 0 0 0 2.79-.588zM5.21 3.088A7.028 7.028 0 0 1 8 2.5c5 0 8 5.5 8 5.5s-.939 1.721-2.641 3.238l-2.062-2.062a3.5 3.5 0 0 0-4.474-4.474L5.21 3.089z"/>
                                                                    <path d="M5.525 7.646a2.5 2.5 0 0 0 2.829 2.829l-2.83-2.829zm4.95.708l-2.829-2.83a2.5 2.5 0 0 1 2.829 2.829z"/>
                                                                    <path fill-rule="evenodd" d="M13.646 14.354l-12-12 .708-.708 12 12-.708.708z"/>
                                                                    </svg>`;
                }
                else {
    
                    //ubah form input password menjadi text
                    document.getElementById('pass').type = 'password';
    
                    //ubah icon mata terbuka menjadi tertutup
                    document.getElementById('mybutton').innerHTML = `<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-eye-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                                                    <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/>
                                                                    <path fill-rule="evenodd" d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/>
                                                                    </svg>`;
                }
            }
        </script>

Dalam fungsi chnage(). kita buat variabel x yang berisi input type dari id="pass", id="pass" adalah pengenal dari form input password yang sudah kita buat diatas.

Kemudian kita lakukan pengkondisian, dimana jika x sama dengan password maka ubah jenis dari form input password menjadi text dan juga ubah icon mata terbuka menjadi icon mata tertutup

Sebaliknya, jika x tidak sama dengan kata sandi, maka ubah jenis dari formulir input teks menjadi kata sandi dan ubah juga ikon mata tertutup menjadi terbuka.

Di setiap script diatas sudah saya sertakan sedikit penjelasannya. Namun jika anda masih kesulitan untuk memahami script-script diatas, silahkan copy paste 1 script full pada script pertama yang saya berikan

Pada artikel ini kita hanya membuat tampilan saja, untuk membuat fungsi login anda bisa membaca artikel saya sebagai berikut https. // www. sahretech. com/2019/10/easy-way-to-make-multi-login-in-php. html

Sekian tutorial cara menyembunyikan/menampilkan password dengan javascript dan bootstrap. Semoga bermanfaat, jika ada pertanyaan terkait artikel diatas silahkan tinggalkan komentar dibawah. Sampai jumpa di artikel pemrograman keren lainnya. Selamat Coding. )

Apa cara yang benar untuk menggunakan file JavaScript dalam HTML?

Anda dapat langsung menambahkan JavaScript di HTML dengan menggunakan tag yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis . Kode JS yang dapat ditambahkan. antara tag

Bagaimana cara membuat fungsi dalam JavaScript?

untuk membuat fungsi , penulisan harus didahului dengan sintaks " fungsi " lalu lanjutkan dengan nama fungsi yang ingin Anda buat . dan isi fungsi ditulis dalam kurung kurawal buka “{” dan kurung kurawal tutup “}”.

Permintaan JavaScript untuk apa?

Dialog prompt () berfungsi untuk mengambil input dari user. Dialog prompt () akan mengembalikan nilai string dari apa yang dimasukkan oleh pengguna.

Apa yang dimaksud dengan onklik?

onclick adalah atribut HTML untuk menentukan tindakan saat peristiwa mengklik suatu elemen. Atribut ini dapat diisi dengan nama fungsi atau ekspresi javascript. Selain event onclick ada juga event lainnya seperti onchange, onmouseover, onkeyup, onload, dll.