Pengembangan Web

Autocomplete HTML - Biarkan Browser Memahami Formulirmu

Ditulis oleh Adam Muiz Diperbarui: 15 Nov 2026 6 menit baca
Autocomplete HTML - Biarkan Browser Memahami Formulirmu

Autocomplete HTML - Biarkan Browser Memahami Formulirmu

Sebuah form bisa sangat mudah dipahami manusia, tetapi tetap ambigu bagi browser. Label seperti “Email” memberi tahu pembaca apa yang harus diketik, namun belum tentu memberi tahu software apakah field itu berisi alamat email pengunjung, alamat orang lain, atau alamat dengan tujuan berbeda. Inilah masalah kecil yang ingin dikurangi oleh atribut HTML autocomplete.

Atribut ini sering dianggap sebagai sakelar untuk menyalakan atau mematikan autofill. Itu adalah model mental yang tidak lengkap. Dalam banyak kasus, tugas yang lebih berguna adalah menjelaskan makna field menggunakan kosakata yang dapat dikenali browser dan assistive technology. Browser kemudian dapat memutuskan apakah akan menawarkan nilai tersimpan, sementara situs tetap bertanggung jawab atas label, validasi, privasi, dan keamanan di server.

Autocomplete Adalah Petunjuk, Bukan Janji

HTML Standard menjelaskan autocomplete sebagai panduan bagi user agent mengenai jenis nilai yang diharapkan dan boleh tidaknya bantuan otomatis diberikan. Atribut ini tersedia pada control seperti text input, textarea, dan select, serta dapat diletakkan pada elemen form.

Hal ini penting. Situs tidak dapat memerintahkan “isi field ini sekarang”, dan tidak dapat membaca database autofill pribadi browser. Browser dapat menawarkan saran, mengisi sekelompok field setelah pengguna memilih profil, atau tidak melakukan apa-apa. Pengaturan browser, pilihan pengguna, struktur field, dan jenis data ikut menentukan hasil.

Ada tiga bentuk nilai umum:

  • on mengizinkan completion otomatis tanpa menyebutkan tipe data secara spesifik.
  • off meminta browser tidak menyediakan atau menyimpan data autocomplete biasa untuk field atau form tersebut.
  • Daftar token mengidentifikasi tujuan yang diharapkan, misalnya email atau postal-code.

Untuk field yang mengumpulkan informasi pribadi dengan jenis yang jelas, daftar token biasanya lebih berguna daripada sekadar menulis on. Kita menjelaskan makna field, bukan menyerahkan semuanya kepada tebakan browser dari label, id, atau name.

Gunakan Makna Field, Bukan Hanya Label Visual

Perhatikan form kontak sederhana berikut:

<form method="post" action="/contact">
  <label for="name">Name</label>
  <input id="name" name="name" type="text" autocomplete="name">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" autocomplete="email">
  <button type="submit">Send</button>
</form>

Label visual tetap diperlukan. Nilai autocomplete menambahkan deskripsi yang dapat dibaca mesin: field pertama mengharapkan nama lengkap seseorang dan field kedua alamat email. Referensi MDN mendokumentasikan token lain seperti given-name, family-name, username, tel, url, dan organization.

type="email" tetap berguna karena menjelaskan tipe input umum dan mengaktifkan validasi terkait. Namun, type belum tentu menjelaskan tujuan lengkapnya. Field email milik pengguna dan field email penerima bisa memiliki type yang sama tetapi makna berbeda.

Urutan Token Juga Memiliki Makna

Nilai autocomplete bukan label bebas yang dibuat setiap situs. Nilainya adalah daftar token yang sudah didefinisikan dan memiliki urutan. Token opsional dapat mengidentifikasi section atau kelompok seperti shipping dan billing, lalu diikuti token detail.

<label for="shipping-postal">Shipping postal code</label>
<input id="shipping-postal" name="shipping_postal"
       autocomplete="shipping postal-code">
<label for="billing-postal">Billing postal code</label>
<input id="billing-postal" name="billing_postal"
       autocomplete="billing postal-code">

Token detail-nya adalah postal-code; token sebelumnya memberikan konteks. Untuk kelompok alamat berulang, token section- dapat memberi nama pada kelompok. Standard mewajibkannya berada di awal daftar, lalu diikuti identifier kelompok dan token detail yang opsional.

Prinsipnya sederhana: metadata autocomplete harus menjelaskan model data form, bukan hanya tata letak visualnya.

Password Memerlukan Tujuan yang Tepat

Field password adalah bagian yang paling sering membuat gagasan “matikan autofill” menjadi menyesatkan. Form pendaftaran dan form login tidak meminta password dengan tujuan yang sama.

<!-- Account creation or password replacement -->
<label for="new-password">New password</label>
<input id="new-password" name="password" type="password"
       autocomplete="new-password">
<!-- Existing account sign-in -->
<label for="current-password">Password</label>
<input id="current-password" name="password" type="password"
       autocomplete="current-password">

new-password memberi tahu browser bahwa password tersimpan yang lama bukan nilai yang diharapkan dan bantuan membuat password mungkin sesuai. current-password mengidentifikasi credential yang dipakai untuk login. Token ini tidak menggantikan hashing password, keamanan transport, perlindungan session, atau kontrol server lainnya.

Panduan keamanan MDN juga menjelaskan mengapa autocomplete="off" bukan cara universal untuk mematikan password manager. Browser modern dapat tetap menawarkan credential login tersimpan. Situs tidak boleh menganggap atribut ini bisa mengalahkan pilihan pengguna pada password manager.

Kode Sekali Pakai Berbeda dari Data yang Dipakai Ulang

Kode verifikasi sekali pakai bukan detail profil seperti nama atau alamat. Kosakata standard menyediakan one-time-code:

<label for="verification-code">Verification code</label>
<input id="verification-code" name="code" inputmode="numeric"
       autocomplete="one-time-code">

Ini memberi tahu user agent jenis nilai yang diharapkan. Atribut tersebut tidak mengautentikasi kode, membuktikan asalnya, atau membuat SMS menjadi aman. Server tetap perlu memverifikasi kode, menerapkan masa berlaku dan batas percobaan yang sesuai, serta melindungi alur verifikasi.

Jika sebuah field benar-benar tidak boleh diisi dari data form biasa yang tersimpan, off dapat sesuai. Kode sekali pakai adalah contoh yang lebih jelas daripada field nama atau alamat. Namun atribut ini tetap permintaan kepada user agent, bukan batas keamanan atas nilai yang dikirim.

Aksesibilitas Bukan Sekadar Kenyamanan

Penjelasan W3C tentang WCAG 2.2 Success Criterion 1.3.5 membedakan label yang terlihat dari tujuan input yang dapat ditentukan secara programatik. Tujuannya adalah agar software dapat mengenali tujuan field informasi pribadi umum dan menyajikannya dengan cara yang sesuai kepada pengguna serta assistive technology.

Ini dapat mengurangi pengetikan berulang, tetapi manfaatnya tidak hanya kenyamanan. Orang dengan disabilitas memori, kognitif, bahasa, atau motorik dapat terbantu ketika form menggunakan kosakata yang konsisten. Token tetap tidak bergantung pada bahasa label visual tertentu.

Ada nuansa penting: WCAG tidak mewajibkan browser mengisi field. Yang dibutuhkan adalah tujuan dapat dikenali secara programatik ketika teknologinya mendukung. Browser boleh tidak menawarkan saran dan markup tetap dapat benar. Sebaliknya, tebakan browser yang kebetulan benar tidak sama dengan tujuan yang dinyatakan penulis.

Hal yang Tidak Dapat Dilakukan Atribut Ini

Autocomplete tidak dapat memvalidasi nilai di server, melindungi password atau kode saat transit, menjamin browser mengisi atau menolak mengisi field, menggantikan label, atau membuat client yang dimodifikasi menjadi tepercaya. Jangan gunakan nilai buatan untuk membingungkan autofill. Jika ada token standard yang sesuai, gunakan token tersebut; jika nilainya hanya sekali pakai, pilih perilaku yang paling sempit dan anggap server sebagai otoritas terakhir.

Checklist Singkat

  1. Apakah setiap control memiliki label visual yang jelas?
  2. Apakah type menjelaskan tipe input umumnya?
  3. Apakah ada token autocomplete yang sesuai dengan tujuan sebenarnya?
  4. Apakah kelompok alamat atau kontak berulang dibedakan dengan konteks yang tepat?
  5. Apakah field login, pendaftaran, dan kode sekali pakai dibedakan?
  6. Apakah off dipakai untuk alasan satu kali atau privasi yang nyata?
  7. Apakah server tetap memvalidasi dan melindungi semua nilai?

Kesimpulan

autocomplete adalah bagian kecil HTML yang berada di batas menarik antara situs dan browser. Situs dapat menjelaskan tujuan field tanpa mengambil alih penyimpanan data pribadi browser. Jika digunakan secara tepat, form lebih mudah diisi dan lebih mudah dipahami assistive technology. Jika dianggap sebagai sakelar keamanan, atribut ini menciptakan rasa aman palsu.

Pendekatan praktisnya: pertahankan label visual, pilih token standard sesuai tujuan, kelompokkan field terkait dengan sengaja, dan terima bahwa keputusan akhir berada pada browser. Form yang membantu bukan form yang mencoba mengendalikan setiap user agent, melainkan form yang memberi informasi jelas dan menyerahkan keamanan kepada lapisan yang benar-benar dapat menegakkannya.

References