Membuat Show Hide Password Di HTML dengan mudah dan aman

Membuat Show Hide Password Di HTML adalah teknik sederhana untuk meningkatkan pengalaman pengguna saat mengisi form, tanpa mengorbankan keamanan jika diterapkan dengan benar.

Halo teman-teman, bagaimana kabarnya? Pada artikel ini kodelyly.com akan membahas cara membuat tombol show/hide password yang rapi, responsif, dan ramah aksesibilitas, lengkap dengan HTML, CSS, serta JavaScript singkat yang mudah dipahami. Kalian juga akan mendapat tips SEO dan UX agar halaman form kalian makin optimal.

Membuat Show Hide Password Di HTML

Struktur Dasar HTML

Kita mulai dari markup input password dan sebuah tombol untuk mengubah visibilitas. Pastikan elemen memiliki label yang jelas agar ramah pembaca layar.

<form class="form-password" autocomplete="off">
  <div class="field">
    <label for="password">Password</label>
    <div class="input-wrap">
      <input id="password" name="password" type="password" placeholder="Masukkan password" aria-label="Password" required>
      <button type="button" id="togglePassword" aria-label="Tampilkan password" aria-pressed="false">Show</button>
    </div>
  </div>
</form>

Menambahkan CSS Agar Rapi

Sedikit gaya sudah cukup untuk membuat tampilan profesional dan konsisten di berbagai perangkat.

.form-password { max-width: 420px; margin: 24px auto; font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial; }
.field label { display: block; font-weight: 600; margin-bottom: 8px; }
.input-wrap { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.input-wrap input { width: 100%; padding: 12px 14px; border: 1px solid #d0d5dd; border-radius: 12px; outline: none; }
.input-wrap input:focus { border-color: #7c3aed; box-shadow: 0 0 0 4px rgba(124,58,237,.15); }
#togglePassword { padding: 10px 14px; border: 1px solid #d0d5dd; border-radius: 12px; background: #fff; cursor: pointer; }
#togglePassword:focus { outline: 3px solid rgba(124,58,237,.35); outline-offset: 2px; }

JavaScript Toggle Password

Logika utamanya adalah mengganti atribut type dari password menjadi text dan sebaliknya. Kita juga memperbarui teks tombol serta atribut aria demi aksesibilitas.

const pwd = document.getElementById('password');
const btn = document.getElementById('togglePassword');

btn.addEventListener('click', () => {
  const willShow = pwd.type === 'password';
  pwd.type = willShow ? 'text' : 'password';
  btn.textContent = willShow ? 'Hide' : 'Show';
  btn.setAttribute('aria-pressed', String(willShow));
  btn.setAttribute('aria-label', willShow ? 'Sembunyikan password' : 'Tampilkan password');
});

Alternatif: Checkbox Sederhana

Jika kalian ingin interaksi yang lebih sederhana, gunakan checkbox yang mengikat event change.

<label style="display:flex;gap:8px;align-items:center;margin-top:8px;">
  <input id="showPw" type="checkbox"> Tampilkan password
</label>
<script>
  const showPw = document.getElementById('showPw');
  showPw.addEventListener('change', (e) => {
    pwd.type = e.target.checked ? 'text' : 'password';
  });
</script>

Perbandingan Metode

Tips SEO, UX, Dan Aksesibilitas

Gunakan judul yang memuat kata kunci seperti “Membuat Show Hide Password Di HTML” agar relevan di mesin pencari. Pastikan label form jelas, gunakan aria-label dan aria-pressed pada tombol, serta sediakan fokus yang terlihat. Hindari menampilkan password sebagai teks secara default, dan pertahankan autocomplete="off" pada form sensitif apabila kebijakan keamanan kalian mensyaratkan.

Baca Juga:
Contoh Coding HTML Website Biodata

Kesimpulan

Menerapkan fitur show/hide password di HTML sangat mudah dan bermanfaat untuk UX. Dengan struktur HTML yang benar, CSS yang rapi, dan JavaScript singkat, kalian bisa menghadirkan kontrol visibilitas password yang aman, aksesibel, dan SEO-friendly. Sekian artikel dari kodelyly.com, semoga membantu dan sampai jumpa di tutorial berikutnya!