Menemukan masalah formulir dengan Chrome DevTools

Tim Chrome DevTools sedang membuat fitur baru tambahan untuk membantu Anda menemukan masalah formulir dan men-debug Isi Otomatis.

Sam Dutton

Di Chrome Canary, kami menguji fitur baru di DevTools yang bertujuan untuk membantu developer memahami cara kerja Isi Otomatis formulir, dan alasan fitur ini terkadang gagal:

  • Bagaimana cara Isi Otomatis browser memetakan nilai yang disimpan ke kolom formulir?
  • Kriteria apa yang digunakan oleh Isi Otomatis untuk mengisi kolom formulir?
  • Kolom mana yang tidak diisi oleh Isi Otomatis?
  • Mengapa kolom formulir tidak diisi oleh Isi Otomatis?

Artikel ini menguraikan fitur baru di Chrome DevTools, dan menjelaskan cara mengujinya serta memberikan masukan.

Apa yang dimaksud dengan Isi Otomatis?

Chrome membantu pengguna mengelola informasi alamat, pembayaran, dan login, dengan menyimpan kumpulan data secara aman dan menawarkan untuk mengisi kolom formulir tanpa perlu memasukkan teks. Hal ini dikenal sebagai Isi Otomatis.

Chrome menawarkan untuk menyimpan data Isi Otomatis saat Anda mengirimkan formulir. Di perangkat seluler:

Tiga screenshot Android: formulir alamat di Chrome, Isi Otomatis Chrome yang menawarkan untuk menyimpan alamat, lalu menampilkan dialog untuk mengedit entri Isi Otomatis baru.

Selanjutnya, Chrome menawarkan untuk mengisi otomatis formulir dengan data yang disimpan.

Di perangkat seluler:

Di desktop:

Chrome menawarkan untuk mengisi otomatis formulir alamat di desktop

Anda dapat mengelola data Isi Otomatis di setelan Chrome.

Di perangkat seluler:

Setelan Chrome di Android: mengedit alamat

Di desktop:

Halaman chrome://settings/addresses, yang menampilkan dua contoh alamat

Anda mungkin juga melihat Chrome menawarkan saran untuk kolom input yang tidak terkait dengan alamat, kartu kredit, atau data login. Selain menawarkan Isi Otomatis untuk kumpulan data terstruktur seperti alamat dan detail pembayaran, Chrome membantu pengguna agar tidak perlu memasukkan ulang data untuk satu kolom formulir yang tidak dapat ditangani oleh Isi Otomatis. Jika formulir memiliki kolom dengan atribut nama yang pernah ditemukan Chrome, Chrome dapat menyarankan nilai sehingga Anda tidak perlu memasukkan ulang data.

Berikut adalah contoh sederhana:

Chrome menawarkan saran untuk data tidak terstruktur dalam satu kolom formulir

Chrome DevTools menunjukkan bahwa kolom formulir di sini tidak memiliki atribut yang bermakna bagi browser. Sebagai gantinya, ini hanyalah atribut name dari n300.

Chrome DevTools menampilkan informasi tentang data tidak terstruktur dalam bentuk, seperti yang ditunjukkan pada contoh sebelumnya: satu input yang hanya memiliki atribut type=text dan name=n300.

Kolom ini tidak sesuai dengan nilai dalam kumpulan data terstruktur yang akan membuatnya sesuai untuk Isi Otomatis Chrome, tetapi Chrome masih dapat membantu pengguna jika menemukan kolom dengan nama ini di masa mendatang.

Menguji fitur Isi Otomatis Chrome DevTools baru

Chrome sedang menguji kemampuan baru untuk panel Masalah DevTools, untuk membantu men-debug error Isi Otomatis.

Anda dapat mencoba kemampuan baru ini di Chrome Canary. Periksa Setelan. Setelan > Eksperimen > Kotak centang. Menandai node atau atribut yang melanggar di hierarki DOM panel Elemen di DevTools dan memuat ulang DevTools saat diminta.

Halaman setelan Chrome DevTools, yang menampilkan 'Menandai node yang melanggar ...'

Atau, Anda dapat menjalankan Chrome Canary dari command line dengan tanda AutofillEnableDevtoolsIssues:

  • Windows: shell start chrome --restart --flag-switches-begin --enable-features=AutofillEnableDevtoolsIssues
  • Mac: shell open -a "Google Chrome Canary" --args --restart --flag-switches-begin --enable-features=AutofillEnableDevtoolsIssues

Untuk memeriksa masalah, buka panel Masalah DevTools di halaman yang memiliki formulir. form-problems.glitch.me adalah tempat yang tepat untuk memulai.

Chrome DevTools menampilkan masalah pada atribut for elemen formulir.

Seperti yang Anda lihat, formulir ini berantakan. Ada:

  • Kolom input tanpa atribut id atau name.
  • Elemen dengan ID duplikat.
  • <label> dengan atribut for yang tidak cocok dengan ID elemen.
  • Kolom dengan atribut autocomplete kosong.

Arahkan kursor ke elemen yang ditandai di hierarki DOM, lalu klik Lihat masalah untuk mempelajari lebih lanjut.

Masalah yang diperluas di Chrome DevTools: Penggunaan label yang salah untuk atribut.

Klik Node yang melanggar untuk melihat resource yang terpengaruh untuk setiap masalah. Formulir ini memiliki delapan label dengan atribut for yang tidak cocok dengan id kolom formulir.

Menggunakan DevTools untuk meningkatkan aksesibilitas formulir

DevTools juga dapat menyoroti masalah aksesibilitas Isi Otomatis, seperti kolom formulir yang tidak memiliki atribut aria-labelledby atau <label> terkait.

Panel Aksesibilitas Chrome DevTools, yang menunjukkan bahwa label ditemukan untuk elemen input dalam formulir.

Dalam contoh ini, elemen <input> memiliki label yang cocok. Artinya, perangkat pendukung dapat mengumumkan tujuan elemen. Namun, dalam contoh berikut, tidak ditemukan label atau atribut aria-labelledby yang cocok.

Panel Aksesibilitas Chrome DevTools, yang menunjukkan bahwa tidak ada label yang cocok, atau atribut aria-labelledby, yang ditemukan untuk elemen input dalam formulir.

Memberikan masukan tentang fitur Isi Otomatis baru di DevTools

Gunakan opsi berikut untuk membahas fitur dan perubahan baru dalam postingan, atau hal lain yang terkait dengan DevTools:

Cari tahu selengkapnya

  • Pelajari Formulir: Kursus tentang formulir HTML untuk membantu Anda meningkatkan keahlian developer web. Ideal untuk siapa saja yang baru menggunakan formulir dan Isi Otomatis.
  • web.dev/tags/forms: Panduan, praktik terbaik, dan codelab, untuk formulir pembayaran, login, dan alamat.