Autocomplete

Browser modern menyimpan banyak hal tentang penggunanya: nama, email, nomor telepon, alamat, sampai kartu pembayaran. Atribut autocomplete adalah cara kita memberi tahu browser kolom mana sedang meminta data apa — sehingga satu ketukan menawarkan isian yang tepat alih-alih pengguna mengetik ulang data yang sama untuk kesekian kali.

Kuncinya: nilainya bukan teks bebas, melainkan token baku dari spesifikasi HTML.

Cara Kerja #

Atribut autocomplete dipasang pada input, select, textarea, atau pada form itu sendiri untuk mengatur seluruh isi form. Saat nilainya berupa token baku, browser mencocokkannya dengan data yang tersimpan dan menawarkan isian otomatis. Nilai on mengizinkan pengisian otomatis umum, off memintanya dimatikan — pembahasan khususnya ada di bagian akhir chapter.

Pasangan alami atribut ini adalah name dan id yang juga deskriptif, karena beberapa browser lama menebak dari keduanya bila autocomplete tidak ada.

Token Baku yang Paling Berguna #

Spesifikasi mendefinisikan puluhan token; sepuluh yang paling sering terpakai:

Token lain yang layak dihafal: current-password untuk form login, one-time-code untuk kode OTP dari SMS, cc-exp untuk masa berlaku kartu, serta given-name dan family-name bila nama depan-belakang dipecah dua kolom. Daftar lengkapnya dirawat MDN dan spesifikasi HTML WHATWG.

Contoh: Form Alamat Pengiriman #

<form action="/kirim" method="post">
  <label for="nama">Nama penerima</label>
  <input type="text" id="nama" name="nama" autocomplete="name">

  <label for="telepon">Nomor telepon</label>
  <input type="tel" id="telepon" name="telepon" autocomplete="tel">

  <label for="alamat">Alamat lengkap</label>
  <input type="text" id="alamat" name="alamat" autocomplete="street-address">

  <label for="kodepos">Kode pos</label>
  <input type="text" id="kodepos" name="kodepos" autocomplete="postal-code">

  <label for="negara">Negara</label>
  <input type="text" id="negara" name="negara" autocomplete="country-name">

  <button type="submit">Kirim ke Alamat Ini</button>
</form>

Hasil Render secara naratif: tampilan form biasa — efek autocomplete baru terasa saat pengguna mengetuk kolom: browser menawarkan data tersimpan, dan sekali dipilih, kolom-kolom lain dengan token serupa ikut terisi.

Mari kita telaah kode di atas:

1. autocomplete="name" pada kolom nama: sekali ketuk, nama lengkap tersimpan tampil — bukan tebakan generik dari name="nama".
2. autocomplete="street-address": alamat lengkap diisi satu perintah; postal-code dan country-name biasanya ikut terisi serentak.
3. Token satu kolom satu makna: tidak ada token “alamat dan kode pos” — masing-masing kolom menyebut kebutuhannya sendiri.
4. type tetap dipilih dari kebutuhan: type="tel" untuk kolom telepon tetap dipakai walau autocomplete-nya tel; type mengatur keyboard dan validasi, autocomplete mengatur sumber isian.

Token Sandi: new-password dan current-password #

Dua token sandi punya peran khusus. current-password menandai kolom sandi untuk login — password manager mengambil isian tersimpan. new-password menandai kolom sandi pendaftaran atau ganti sandi — browser menawarkan kata sandi kuat buatan sendiri, dan token inilah yang membuat penawaran itu muncul. Keduanya sering luput padahal cuma satu kata.

Menonaktifkan: autocomplete=“off” #

Ada kondisi form memang tidak ingin diisi otomatis — kolom satu kali pakai di sistem internal, misalnya. Nilai off menyampaikan maksud itu. Faktanya di lapangan: browser sering tetap mengabaikan off untuk form login karena menganggap pengelolaan sandi lebih menguntungkan pengguna daripada permintaan halaman. Rancang form dengan asumsi off adalah permintaan, bukan perintah.

Ringkasan #

• autocomplete memakai token baku spesifikasi: name, email, tel, street-address, postal-code, country-name, cc-number, bday, new-password, one-time-code, dan lainnya.
• Token yang tepat memicu isian cepat, bantuan password manager, dan konsistensi data.
• new-password untuk pendaftaran/ganti sandi, current-password untuk login.
• autocomplete="off" adalah permintaan yang bisa diabaikan browser, terutama pada form login.