Saya ingin tahu apakah ada semacam markup khusus untuk mengaktifkan fitur IsiOtomatis Chrome untuk formulir tertentu. Saya hanya menemukan pertanyaan tentang cara menonaktifkannya, tetapi saya ingin tahu apakah saya dapat menambahkan semacam markup ke kode html untuk memberi tahu browser "ini adalah input untuk alamat" atau "ini adalah kode ZIP bidang "untuk mengisinya dengan benar (diasumsikan pengguna mengaktifkan fitur ini).
Jawaban:
UPDATE untuk 2017: Sepertinya jawaban dari Katie memiliki lebih banyak informasi terkini daripada milik saya. Pembaca masa depan: berikan suara Anda untuk jawabannya .
Ini adalah pertanyaan yang bagus dan pertanyaan yang sulit untuk didokumentasikan. Sebenarnya, dalam banyak kasus, Anda akan menemukan bahwa fungsi IsiOtomatis Chrome "berfungsi". Misalnya, cuplikan html berikut ini menghasilkan formulir yang, setidaknya untuk saya (Chrome v. 18), secara otomatis diisi setelah mengklik di bidang pertama:
<!DOCTYPE html>
<html>
<body>
<form method="post">
First name:<input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="text" name="email" /><br />
Phone: <input type="text" name="phone" /><br />
Address: <input type="text" name="address" /><br />
</form>
</body>
</html>Namun, jawaban ini tidak memuaskan, karena meninggalkan solusi di bidang "sihir." Menggali lebih dalam, saya mengetahui bahwa Chrome (dan peramban lain yang diaktifkan dengan pengisian otomatis) terutama mengandalkan petunjuk kontekstual untuk menentukan jenis data yang harus diisi ke dalam elemen formulir. Contoh petunjuk kontekstual tersebut termasuk nameelemen input, teks yang mengelilingi elemen, dan teks placeholder apa pun.
Namun, baru-baru ini, tim Chrome mengakui bahwa ini adalah solusi yang tidak memuaskan, dan mereka telah mulai mendesak untuk standardisasi dalam masalah ini. Posting yang sangat informatif dari grup Google Webmaster baru-baru ini membahas masalah ini, menjelaskan:
Sayangnya, hingga kini sulit bagi webmaster untuk memastikan bahwa Chrome dan penyedia pengisian formulir lainnya dapat menguraikan formulir mereka dengan benar. Ada beberapa standar; tetapi mereka memberatkan beban pada implementasi situs web, sehingga mereka tidak banyak digunakan dalam praktik.
("Standar" yang mereka maksudkan adalah versi terbaru dari spesifikasi yang disebutkan dalam jawaban Avalanchi di atas.)
Posting Google selanjutnya menggambarkan solusi yang diusulkan (yang disambut oleh kritik yang signifikan dalam komentar posting). Mereka mengusulkan penggunaan atribut baru untuk tujuan ini:
Cukup tambahkan atribut ke elemen input, misalnya bidang alamat email mungkin terlihat seperti:
<input type=”text” name=”field1” x-autocompletetype=”email” />
... di mana x-singkatan dari "eksperimental" dan akan dihapus jika & ketika ini menjadi standar. Baca posting untuk detail lebih lanjut, atau jika Anda ingin menggali lebih dalam, Anda akan menemukan penjelasan proposal yang lebih lengkap tentang whatwg wiki .
PEMBARUAN:
Seperti yang ditunjukkan dalam jawaban yang berwawasan luas ini , semua ekspresi reguler yang digunakan Chrome untuk mengidentifikasi / mengenali bidang umum dapat ditemukan di . Jadi untuk menjawab pertanyaan awal, pastikan nama untuk bidang html Anda dicocokkan dengan ekspresi ini. Beberapa contoh termasuk:autofill_regex_constants.cc.utf8
"first.*name|initials|fname|first$""last.*name|lname|surname|last$|secondname|family.*name""e.?mail""address.*line|address1|addr1|street""zip|postal|post.*code|pcode|^1z$"Pertanyaan ini cukup lama tetapi saya memiliki jawaban yang diperbarui !
Berikut ini tautan ke dokumentasi WHATWG untuk mengaktifkan pelengkapan otomatis.
Google menulis panduan yang cukup bagus untuk mengembangkan aplikasi web yang ramah untuk perangkat seluler. Mereka memiliki bagian tentang cara memberi nama input pada formulir agar mudah menggunakan pengisian otomatis. Meskipun ditulis untuk seluler, ini berlaku untuk desktop dan seluler!
Berikut adalah beberapa poin penting tentang cara mengaktifkan pelengkapan otomatis:
<label>untuk semua <input>bidang Andaautocompleteatribut ke <input>tag Anda dan isi dengan menggunakan panduan ini .namedan autocompleteatribut dengan benar untuk semua <input>tagContoh :
<label for="frmNameA">Name</label>
<input type="text" name="name" id="frmNameA"
placeholder="Full name" required autocomplete="name">
<label for="frmEmailA">Email</label>
<input type="email" name="email" id="frmEmailA"
placeholder="name@example.com" required autocomplete="email">
<!-- note that "emailC" will not be autocompleted -->
<label for="frmEmailC">Confirm Email</label>
<input type="email" name="emailC" id="frmEmailC"
placeholder="name@example.com" required autocomplete="email">
<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA"
placeholder="+1-555-555-1212" required autocomplete="tel"><input>tag AndaUntuk memicu pelengkapan otomatis, pastikan Anda memberi nama namedan autocompleteatribut dengan benar di <input>tag Anda . Ini secara otomatis memungkinkan pelengkapan otomatis pada formulir. Pastikan juga punya <label>! Informasi ini juga dapat ditemukan di sini .
Berikut cara memberi nama input Anda:
name:name fname mname lnameautocomplete:
name (untuk nama lengkap)given-name (untuk nama depan)additional-name (untuk nama tengah)family-name (untuk nama belakang)<input type="text" name="fname" autocomplete="given-name">name:emailautocomplete:email<input type="text" name="email" autocomplete="email">name:address city region province state zip zip2 postal country autocomplete:
street-addressaddress-line1address-line2address-level1 (Negara atau Provinsi)address-level2 (kota)postal-code (Kode Pos)countryname:phone mobile country-code area-code exchange suffix extautocomplete:telname:ccname cardnumber cvc ccmonth ccyear exp-date card-typeautocomplete:
cc-namecc-numbercc-csccc-exp-monthcc-exp-yearcc-expcc-typename:usernameautocomplete:usernamename:passwordautocomplete:
current-password (untuk formulir masuk)new-password (untuk formulir pendaftaran dan penggantian kata sandi)Dari pengujian saya, x-autocompletetag tidak melakukan apa pun. Alih-alih menggunakan autocompletetag pada tag input Anda, dan tetapkan nilainya sesuai dengan spesifikasi HTML di sini http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms. html # autofill-field .
Contoh:
<input name="fname" autocomplete="given-name" type="text" placeholder="First Name" required>Tag formulir induk membutuhkan autocomplete = "on" dan method = "POST".
on , offatau default. Jadi ini mark up yang tidak valid dan akan cenderung inkonsistensi. Saya benar-benar berpikir penempatan dalam atribut autocomplete tidak relevan. Saya kira itu terlihat pada semua atribut dan autocomplete kebetulan menjadi salah satu yang diperiksa.
Anda perlu memberi nama elemen dengan tepat sehingga browser akan mengisinya secara otomatis.
Berikut spesifikasi IETF untuk ini:
Saya baru saja bermain diseluruh spec dan mendapat contoh kerja yang bagus - termasuk beberapa bidang lagi.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<form autocomplete="on" method="POST">
<fieldset>
<legend>Ship the blue gift to...</legend>
<p>
<label> Firstname:
<input name="fname" autocomplete="section-blue shipping given-name" type="text" required>
</label>
</p>
<p>
<label> Lastname:
<input name="fname" autocomplete="section-blue shipping family-name" type="text" required>
</label>
</p>
<p>
<label> Address: <input name=ba
autocomplete="section-blue shipping street-address">
</label>
</p>
<p>
<label> City: <input name=bc
autocomplete="section-blue shipping address-level2">
</label>
</p>
<p>
<label> Postal Code: <input name=bp
autocomplete="section-blue shipping postal-code">
</label>
</p>
</fieldset>
<fieldset>
<legend>Ship the red gift to...</legend>
<p>
<label> Firstname:
<input name="fname" autocomplete="section-red shipping given-name" type="text" required>
</label>
</p>
<p>
<label> Lastname:
<input name="fname" autocomplete="section-red shipping family-name" type="text" required>
</label>
</p>
<p>
<label> Address: <input name=ra
autocomplete="section-red shipping street-address">
</label>
</p>
<p>
<label> City: <input name=bc
autocomplete="section-red shipping address-level2">
</label>
</p>
<p>
<label> Postal Code: <input name=rp
autocomplete="section-red shipping postal-code">
</label>
</p>
</fieldset>
<fieldset>
<legend>payment address</legend>
<p>
<label> Firstname:
<input name="fname" autocomplete="billing given-name" type="text" required>
</label>
</p>
<p>
<label> Lastname:
<input name="fname" autocomplete="billing family-name" type="text" required>
</label>
</p>
<p>
<label> Address: <input name=ra
autocomplete="billing street-address">
</label>
</p>
<p>
<label> City: <input name=bc
autocomplete="billing address-level2">
</label>
</p>
<p>
<label> Postal Code: <input name=rp
autocomplete="billing postal-code">
</label>
</p>
</fieldset>
<input type="submit" />
</form>
</body>
</html>Ini berisi 2 area alamat yang terpisah dan juga jenis alamat yang berbeda. Mengujinya juga di iOS 8.1.0 dan sepertinya itu selalu mengisi semua bidang sekaligus, sementara desktop otomatis mengisi krom dengan alamat.
Sepertinya kita akan mendapatkan kontrol lebih besar tentang fitur isi-otomatis ini, ada API eksperimental baru yang datang ke Chrome Canary, yang dapat digunakan untuk mengakses data setelah meminta pengguna untuk itu:
http://www.chromium.org/developers/using-requestautocomplete http://blog.alexmaccaw.com/requestautocomplete
info baru oleh google:
http://googlewebmastercentral.blogspot.de/2015/03/helping-users-fill-out-online-forms.html
Inilah jawabannya:
Ini berfungsi: http://jsfiddle.net/68LsL1sq/1/ <label for="name">Nom</label>
Ini bukan: http://jsfiddle.net/68LsL1sq/2/ <label for="name">No</label>
Satu-satunya perbedaan adalah pada label itu sendiri. "Nom" berasal dari "Nama" atau "Nome" dalam bahasa Portugis.
Jadi inilah yang Anda butuhkan:
<label for="id_of_field">Name</label><input id="id_of_field"></input>Tidak ada lagi.
Ini daftar baru "nama" IsiOtomatis Google. Ada semua nama yang didukung dalam bahasa apa pun yang diizinkan.
Google sekarang menyediakan dokumentasi untuk ini:
Bantu pengguna checkout lebih cepat dengan IsiOtomatis | Web | Google Developers
dan
Dalam kasus saya, $('#EmailAddress').attr('autocomplete', 'off');tidak berfungsi. Tetapi berikut ini bekerja pada chrome Versi 67 oleh jQuery.
$('#EmailAddress').attr('autocomplete', 'new-email');
$('#Password').attr('autocomplete', 'new-password');