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

html google-chrome autofill Riesling
sumber

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

kmote
sumber

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="[email protected]" required autocomplete="email">

<!-- note that "emailC" will not be autocompleted -->
<label for="frmEmailC">Confirm Email</label>
<input type="email" name="emailC" id="frmEmailC"
placeholder="[email protected]" 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

Standar WHATWG HTML saat ini untuk pelengkapan otomatis.
"Buat Formulir Luar Biasa" dari Google . Tampaknya diperbarui hampir setiap hari. Sangat bagus dibaca.
"Bantu Pengguna Checkout Lebih Cepat dengan IsiOtomatis" dari Google pada tahun 2015.

Katie
sumber

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

Mikha
sumber

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

5

Anda perlu memberi nama elemen dengan tepat sehingga browser akan mengisinya secara otomatis.

Berikut spesifikasi IETF untuk ini:

http://www.ietf.org/rfc/rfc3106.txt 1

Longsoran
sumber

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.

staabm
sumber

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

Riesling
sumber

0

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:

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

Tidak ada lagi.

Totty.js
sumber

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

Ini daftar baru "nama" IsiOtomatis Google. Ada semua nama yang didukung dalam bahasa apa pun yang diizinkan.

autofill_regex_constants.cc

Alvargon
sumber

0

Google sekarang menyediakan dokumentasi untuk ini:

Bantu pengguna checkout lebih cepat dengan IsiOtomatis | Web | Google Developers

dan

Buat Formulir Luar Biasa: Gunakan metadata untuk mengaktifkan lengkapi-otomatis | Web | Google Developers

henry
sumber

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');

reza.cse08
sumber

Bagaimana cara memicu IsiOtomatis di Google Chrome?

Jawaban:

Cara Mengaktifkan LengkapiOtomatis pada formulir HTML Anda

Cara memberi nama `<input>`tag Anda

Sumber daya

JSBIN

Bagaimana cara memicu IsiOtomatis di Google Chrome?

Jawaban:

Cara Mengaktifkan LengkapiOtomatis pada formulir HTML Anda

Cara memberi nama <input>tag Anda

Sumber daya

JSBIN

Cara memberi nama `<input>`tag Anda