Bagaimana cara memicu IsiOtomatis di Google Chrome?


191

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:


182

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

  • nama depan: "first.*name|initials|fname|first$"
  • nama keluarga: "last.*name|lname|surname|last$|secondname|family.*name"
  • surel: "e.?mail"
  • alamat (baris 1): "address.*line|address1|addr1|street"
  • Kode Pos: "zip|postal|post.*code|pcode|^1z$"

3
Selain itu, Anda harus mengirimkan <form> -Tag lengkap dengan "action" dan "method"
qualle

Meskipun ini mungkin relevan dengan pengujian saya, hanya metode yang saya uraikan di bawah ini yang benar-benar berfungsi.
Micah

Saya menduga bahwa konstanta autofill regex bukan satu-satunya yang digunakannya, ia juga mengingat hal-hal dari input bernama khusus.
CloudMeta

1
Gunakan url dalam jawaban ini dan itu rusak. Ini berfungsi sekarang: code.google.com/p/chromium/codesearch#chromium/src/components/…
Nathan

2
URL yang disediakan @Nathan tidak berfungsi lagi - Ini yang sekarang, sampai mereka mengubahnya lagi :) cs.chromium.org/chromium/src/components/autofill/core/common/…
HungryBeagle

85

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!

Cara Mengaktifkan LengkapiOtomatis pada formulir HTML Anda

Berikut adalah beberapa poin penting tentang cara mengaktifkan pelengkapan otomatis:

  • Gunakan <label>untuk semua <input>bidang Anda
  • Tambahkan autocompleteatribut ke <input>tag Anda dan isi dengan menggunakan panduan ini .
  • Beri nama Anda namedan autocompleteatribut dengan benar untuk semua <input>tag
  • Contoh :

    <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">

Cara memberi nama <input>tag Anda

Untuk 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:

  • Nama
    • Gunakan salah satu dari ini untuk name:name fname mname lname
    • Gunakan salah satu dari ini untuk autocomplete:
      • name (untuk nama lengkap)
      • given-name (untuk nama depan)
      • additional-name (untuk nama tengah)
      • family-name (untuk nama belakang)
    • Contoh: <input type="text" name="fname" autocomplete="given-name">
  • Surel
    • Gunakan salah satu dari ini untuk name:email
    • Gunakan salah satu dari ini untuk autocomplete:email
    • Contoh: <input type="text" name="email" autocomplete="email">
  • Alamat
    • Gunakan salah satu dari ini untuk name:address city region province state zip zip2 postal country
    • Gunakan salah satu dari ini untuk autocomplete:
      • Untuk satu input alamat:
        • street-address
      • Untuk dua input alamat:
        • address-line1
        • address-line2
      • address-level1 (Negara atau Provinsi)
      • address-level2 (kota)
      • postal-code (Kode Pos)
      • country
  • Telepon
    • Gunakan salah satu dari ini untuk name:phone mobile country-code area-code exchange suffix ext
    • Gunakan salah satu dari ini untuk autocomplete:tel
  • Kartu kredit
    • Gunakan salah satu dari ini untuk name:ccname cardnumber cvc ccmonth ccyear exp-date card-type
    • Gunakan salah satu dari ini untuk autocomplete:
      • cc-name
      • cc-number
      • cc-csc
      • cc-exp-month
      • cc-exp-year
      • cc-exp
      • cc-type
  • Nama pengguna
    • Gunakan salah satu dari ini untuk name:username
    • Gunakan salah satu dari ini untuk autocomplete:username
  • Kata sandi
    • Gunakan salah satu dari ini untuk name:password
    • Gunakan salah satu dari ini untuk autocomplete:
      • current-password (untuk formulir masuk)
      • new-password (untuk formulir pendaftaran dan penggantian kata sandi)

Sumber daya


39

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".


2
di browser manakah spesifikasi ini diterapkan? pengalaman / tes belum dilakukan?
staabm

Spesifikasi W3C menyatakan bahwa autocomplete hanya boleh berision , 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.
Liam

1
Ini HTML yang benar, lihat spesifikasi WHATWG dan pos Google .
AlecRust


4

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>

JSBIN

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.


1
Tidak yakin mengapa jawaban ini diturunkan. Contoh di atas masih berfungsi untuk saya menggunakan browser yang dijelaskan
staabm

1
Autocomplete yang diperlihatkan dalam contoh di atas berasal dari sini: html.spec.whatwg.org/multipage/forms.html#autofill
Bryan Rehbein

2

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

https://developers.google.com/web/fundamentals/input/form/label-and-name-inputs#use-metadata-to-enable-auto-complete


0

Inilah jawabannya:

Satu-satunya perbedaan adalah pada label itu sendiri. "Nom" berasal dari "Nama" atau "Nome" dalam bahasa Portugis.

Jadi inilah yang Anda butuhkan:

  • Pembungkus formulir;
  • SEBUAH <label for="id_of_field">Name</label>
  • Sebuah <input id="id_of_field"></input>

Tidak ada lagi.


saya tahu juga, bahwa label juga dapat memicu pelengkapan otomatis krom.
emfi

Jadi maksud Anda adalah bahwa nama label juga digunakan saat mengerjakan bidang isian lengkap otomatis? Jawaban ini tidak terlalu jelas
Liam

Sebenarnya Nom berasal dari Perancis. Tapi saya membuatnya bekerja tanpa Label, pengganti untuk input dengan nilai kerja yang tepat juga.
AxelH


0

Jawaban dengan hanya tautan menjadi tidak membantu jika tautan ini turun, seperti yang pertama dalam jawaban itu.
bfontaine

Benar tapi itu sebabnya jawabannya adalah komunitas wiki: untuk mendorong orang lain untuk berkontribusi padanya. Juga menurunkan wiki komunitas tidak memengaruhi penulis, itu hanya berfungsi untuk mengubur dokumentasi Google sendiri. Selalu merasa bebas untuk memperbarui jawaban wiki komunitas, terutama jika itu sesuatu yang memotong dan mengering seperti memperbarui tautan!
Henry

-3

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');
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.