Belirli bir form için Chrome otomatik doldurma özelliğini etkinleştirmek üzere bir tür özel işaretleme olup olmadığını bilmek istiyorum. Sadece nasıl devre dışı bırakılacağıyla ilgili sorular buldum, ancak tarayıcıya "adresin girdisi bu" veya "bu posta kodu alanını "doğru doldurmak için (kullanıcının bu özelliği etkinleştirdiği varsayılarak).
Yanıtlar:
2017 için GÜNCELLEME: Katie'nin cevabının benimkinden daha güncel bilgilere sahip olduğu anlaşılıyor. Gelecekteki okuyucular: cevabına oylarınızı verin .
Bu harika bir soru ve belgelerin şaşırtıcı derecede zor olduğu bir sorudur. Aslında, çoğu durumda Chrome Otomatik Doldur işlevinin "sadece işe yaradığını" görürsünüz. Örneğin, aşağıdaki html snippet'i, en azından benim için (Chrome s. 18), ilk alana tıkladıktan sonra otomatik olarak doldurulan bir form oluşturur:
<!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>Bununla birlikte, çözümü "büyü" alanında bıraktığı için bu cevap tatmin edici değildir. Daha derine inmek Chrome'un (ve diğer otomatik doldurma özellikli tarayıcıların) form öğelerine doldurulması gereken veri türünü belirlemek için öncelikle bağlamsal ipuçlarına dayandığını öğrendim. Bu bağlamsal ipuçlarına örnekler arasındaname olarak bir girdi öğesinin, öğeyi çevreleyen metnin ve herhangi bir yer tutucu metnin gösterilebilir.
Ancak son zamanlarda, Chrome ekibi bunun tatmin edici olmayan bir çözüm olduğunu kabul etti ve bu konuda standartlaştırma için baskı yapmaya başladılar. Google Web Yöneticileri grubundan çok bilgilendirici bir yayın kısa süre önce bu sorunu tartıştı ve şunları açıkladı:
Ne yazık ki, şimdiye kadar web yöneticilerinin Chrome ve diğer form doldurma sağlayıcılarının formlarını doğru şekilde ayrıştırabilmelerini sağlamak zordu. Bazı standartlar mevcuttur; ancak web sitesinin uygulanmasına ağır yük bindirdiler, bu yüzden pratikte fazla kullanılmıyorlar.
(Söz ettikleri "standartlar", yukarıda Çığ'ın cevabında belirtilen spesifikasyonun daha yeni bir versiyonudur .)
Google postası, önerilen çözümünü (postanın yorumlarında önemli eleştirilerle karşılanmaktadır) açıklamaya devam etmektedir. Bu amaçla yeni bir öznitelik kullanılmasını önerirler:
Girdi öğesine bir özellik eklemeniz yeterlidir, örneğin bir e-posta adresi alanı aşağıdaki gibi olabilir:
<input type=”text” name=”field1” x-autocompletetype=”email” />
... burada x-"deneysel" anlamına gelir ve bu standart haline gelirse & kaldırılacaktır. Oku yazıyı daha fazla ayrıntı için, ya da daha derine inmemiz istiyorsanız, teklifin daha kapsamlı bir açıklama bulacaksınız whatwg wiki .
GÜNCELLEME:
Bu anlayışlı yanıtlarda belirtildiği gibi , Chrome'un ortak alanları tanımlamak / tanımak için kullandığı tüm normal ifadeler bulunabilir autofill_regex_constants.cc.utf8. Orijinal soruyu cevaplamak için, html alanlarınızın adlarının bu ifadelerle eşleştiğinden emin olun. Bazı örnekler:
"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$"Bu soru oldukça eski ama güncellenmiş bir cevabım var !
Otomatik tamamlamayı etkinleştirmek için WHATWG belgelerine bir bağlantı.
Google , mobil cihazlara uygun web uygulamaları geliştirmek için oldukça güzel bir rehber yazdı . Otomatik doldurmayı kolayca kullanmak için formlardaki girişlerin nasıl adlandırılacağı konusunda bir bölümleri vardır. Mobil cihazlar için yazılmış olmasına rağmen, bu hem masaüstü hem de mobil cihazlar için geçerlidir!
Otomatik tamamlamanın nasıl etkinleştirileceğiyle ilgili bazı önemli noktalar:
<label>Tüm <input>alanlarınız için a kullanınautocompleteözelliği sizin için <input>etiketleri ve bu kullanarak doldurun kılavuzu .nameve autocompleteniteliklerinizi doğru şekilde adlandırın<input>Örnek :
<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>Etiketlerinize nasıl ad verilir?Otomatik tamamlamayı tetiklemek için etiketlerinizdeki nameve autocompleteözelliklerini doğru bir şekilde adlandırdığınızdan emin olun <input>. Bu otomatik olarak formlarda otomatik tamamlamaya izin verecektir. Ayrıca bir emin olun <label>! Bu bilgiyi burada da bulabilirsiniz .
Girişlerinizi nasıl isimlendireceğiniz aşağıda açıklanmıştır:
name:name fname mname lnameautocomplete:
name (tam ad için)given-name (ad için)additional-name (ikinci ad için)family-name (soyadı için)<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 (Eyalet veya İl)address-level2 (Kent)postal-code (posta kodu)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 (oturum açma formları için)new-password (kayıt ve şifre değiştirme formları için)Testimden, x-autocompleteetiket hiçbir şey yapmıyor. Bunun yerine autocomplete, giriş etiketlerinizdeki etiketleri kullanın ve değerlerini http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms adresindeki HTML özelliklerine göre ayarlayın . html # otomatik doldurma alanı .
Misal:
<input name="fname" autocomplete="given-name" type="text" placeholder="First Name" required>Üst form etiketi için autocomplete = "on" ve method = "POST" gerekir.
on , offya default. Yani bu geçersiz bir işaretleme ve tutarsızlıklara eğilimli olacaktır. Aslında otomatik tamamlama özelliğindeki yerleşimin alakasız olduğunu düşünüyorum. Sanırım tüm özelliklere bakar ve otomatik tamamlama kontrol ettiği şeylerden biri olur.
Tarayıcının otomatik olarak doldurması için öğeleri uygun şekilde adlandırmanız gerekir.
İşte bunun için IETF spesifikasyonu:
Ben sadece spec ile etrafında oynadı ve birkaç alan da dahil olmak üzere güzel bir çalışma örneği var.
<!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>İki ayrı adres alanı ve farklı adres türleri içerir. Ayrıca iOS 8.1.0'da da test edildi ve masaüstü krom adresini adrese göre otomatik doldururken, tüm alanları her zaman aynı anda doldurduğu görülüyor.
Bu otomatik doldurma özelliği hakkında daha fazla kontrole sahip olacağımız anlaşılıyor, Chrome Canary'e gelen ve kullanıcıdan istedikten sonra verilere erişmek için kullanılabilecek yeni bir deneysel API var:
http://www.chromium.org/developers/using-requestautocomplete http://blog.alexmaccaw.com/requestautocomplete
google'dan yeni bilgiler:
http://googlewebmastercentral.blogspot.de/2015/03/helping-users-fill-out-online-forms.html
İşte gerçek cevap:
Bu çalışıyor: http://jsfiddle.net/68LsL1sq/1/ <label for="name">Nom</label>
Bu değil: http://jsfiddle.net/68LsL1sq/2/ <label for="name">No</label>
Tek fark etiketin kendisidir. "Nom", Portekizce'de "Ad" veya "Nome" adından geliyor.
İşte ihtiyacınız olan şey:
<label for="id_of_field">Name</label><input id="id_of_field"></input>Başka bir şey yok.
Google Otomatik Doldurma "adları" nın yeni listesi. İzin verilen tüm dillerde desteklenen tüm adlar vardır.
Google artık bunun için dokümantasyon sağlıyor:
ve
Benim durumumda, $('#EmailAddress').attr('autocomplete', 'off');çalışmıyor. Ancak aşağıdaki jQuery krom 67 sürümü üzerinde çalışır.
$('#EmailAddress').attr('autocomplete', 'new-email');
$('#Password').attr('autocomplete', 'new-password');