Membuat Tombol Show Password dengan Javascript

Membuat Tombol Show Password menggunakan javascript - Hallo semuanya pada artikel sebelumnya saya sudah membuat sebuah artikel serupa dengan jquery, artikel tersebut berjudul Membuat Tombol Show Password dengan JQuery Pada artikel tersebut kita menggunakan checkbox untuk menerapkannya,

Sekarang ini kita akan membahas tentang bagaimana cara membuat tombol show password menggunakan javascript. Ya, tentu konsepnya hampir mirip dengan artikel sebelumnya, hanya saja kali ini kita akan membahasnya menggunakan javascript, baiklah sekarang kita akan lihat tutorialnya.
saat ini kita akan coba menggunakan template bootstrap untuk mempermudah membuat tampilannya.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- javascript first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.javascript.com/javascript-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

Selanjutya, kita akan membuat struktur form login dengan html seperti berikut, disini kita menggunakan fungsi onclick pada div yang menjadi tombol nya

<div class="row justify-content-center mt-5">
      <div class="col-3">
        <h2 class="text-center mb-4">LOGIN</h2>
        <div class="input-group mb-2 mr-sm-2">
          <input type="text" class="form-control" id="inputUsername" placeholder="Username">
        </div>
        <div class="input-group mb-2 mr-sm-2">
          <input type="password" class="form-control" id="inputPassword" placeholder="Password">
          <div class="input-group-prepend">
            <div  onclick="myFunction()" class="input-group-text btn btn-secondary">Show</div>
          </div>
        </div>
        <div class="input-group mb-2 mr-sm-2">
          <input type="submit" class="form-control btn btn-success" value="Login" >
        </div>

      </div>
    </div>

selanjutnya kita akan memberikan fungsi javascript untuk membuat tombol show password berfungsi

function myFunction() {
        var x = document.getElementById("inputPassword");
        if (x.type === "password") {
            x.type = "text";
        } else {
            x.type = "password";
        }
    }

Baiklah teman teman, demikian artikel kali ini yang membahas tentang cara membuat tombol show password dengan menggunakan javascript, semoga bermanfaat

 

28 Oktober 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat