Adresinizi onuncu kez girmeniz yorucu olabilir. Tarayıcılar ve siz geliştiriciler, kullanıcıların verileri daha hızlı girmesine ve verileri yeniden girmesini önlemeye yardımcı olabilirsiniz.
Bu modülde, otomatik doldurmanın işleyiş şekli ve autocomplete ile diğer öğe özelliklerinin, tarayıcıların uygun otomatik doldurma seçenekleri sunmasını nasıl sağlayabileceği açıklanmaktadır.
Otomatik doldurma nasıl çalışır?
Otomatik doldurmaya giriş bölümünde, otomatik doldurmanın temel bilgilerini öğrenmiştiniz. Peki tarayıcılar neden otomatik doldurma özelliği sunar?
Form doldurmak ilginç bir aktivite olmasa da sık sık yaptığınız bir şeydir. Zaman içinde birçok form doldurursunuz ve genellikle aynı verileri girersiniz. Kullanıcıların formları daha hızlı doldurmasına yardımcı olmanın bir yolu, form alanlarını daha önce girilen verilerle otomatik olarak doldurma seçeneği sunmaktır. Bu özellik, otomatik doldurma olarak adlandırılır.
Tarayıcılar, hangi verilerin otomatik doldurulacağını nasıl anlar? Öğrenmek için örnek bir form alanına göz atın.
<label for="name">Name</label>
<input name="name" id="name">
Bu form alanını gönderirseniz tarayıcılar değeri (girdiğiniz veriler) name özelliğinin değeriyle (ad) birlikte depolar. Bazı tarayıcılar, verileri depolarken ve doldururken id özelliğini de dikkate alır.
Örneğin, haftalar sonra başka bir web sitesinde başka bir form dolduruyorsunuz. Bu sitede name="name" içeren bir form alanı da var. name için bir değer zaten depolandığından tarayıcınız artık otomatik doldurma önerebilir.
Otomatik doldurma özelliği özellikle düzenli olarak kullandığınız formlarda (ör. kaydolma ve oturum açma, ödeme, ödeme işlemi ve adınızı ya da adresinizi girmeniz gereken formlar) kullanışlıdır.
autocomplete özelliği için uygun değerler kullanarak tarayıcıların en iyi otomatik doldurma seçeneklerini sunmasına yardımcı olabilirsiniz. autocomplete için birçok olası değer vardır. Aşağıda adres örneği verilmiştir.
Tarayıcınızda sizin için kaydedilmiş bir adres var mı? Mükemmel! Adres formundaki ilk alanla etkileşimde bulunduktan sonra tarayıcı, kayıtlı adreslerin bir listesini gösterir. Birini seçtiğinizde tarayıcı, adresle ilgili tüm alanları doldurur. Otomatik doldurma özelliği, form doldurma işlemini daha hızlı ve kolay hale getirir.
Her adres formunda aynı alanlar bulunmaz ve alanların sırası da farklılık gösterir.
autocomplete için doğru değerlerin kullanılması, tarayıcının bir form için doğru değerleri doldurmasını sağlar. country, postal-code ve daha birçok değer vardır.
Kullanıcıların hızlı bir şekilde oturum açabilmesini ve güvenli şifreler kullanabilmesini sağlama
Birçok kişi şifreleri hatırlamakta zorlanır. En yaygın şifre "123456"dır. Bunu, hatırlaması kolay diğer kombinasyonlar izler. Güvenli ve benzersiz şifreleri nasıl kullanabilirsiniz?
Tarayıcılarda, sizin için şifre oluşturup kaydeden ve dolduran yerleşik şifre yöneticileri bulunur. Tarayıcıların e-postaları otomatik olarak doldurmasına ve şifreleri yönetmesine nasıl yardımcı olabileceğinizi öğrenin.
E-posta alanı için autocomplete="email" kullanabilirsiniz. Böylece kullanıcılar e-posta adresi için otomatik doldurma seçeneğini görür.
Bu bir kayıt formu olduğundan kullanıcılar, daha önce kullanılan şifreleri doldurma seçeneğini görmemelidir. Tarayıcıların yeni şifre oluşturma seçeneği sunmasını sağlamak için autocomplete="new-password" kullanabilirsiniz.
Oturum açma formunda, autocomplete="current-password" kullanarak tarayıcılara bu web sitesi için daha önce kaydedilmiş şifreleri doldurma seçeneği sunmalarını söyleyebilirsiniz.
Birçok web sitesinde iki faktörlü kimlik doğrulamayı ayarlayabilirsiniz. Şifreye ek olarak, SMS ile veya iki faktörlü kimlik doğrulama uygulamasıyla tek kullanımlık bir kod gönderilir.
SMS mesajında aldığınız kodun, ekrandaki klavye tarafından önerilmesi ve değeri doldurmak için doğrudan seçebilmeniz harika olmaz mıydı? Safari 14 veya sonraki sürümlerde bunu yapmak için autocomplete="one-time-code" simgesini kullanabilirsiniz. Android'deki Chrome'da, WebOTP API'yi kullanarak JavaScript ile bunu yapabilirsiniz.
SMS OTP formuyla ilgili en iyi uygulamalar hakkında daha fazla bilgi edinin.
Dikkat: Telefon numaraları geri dönüştürülebildiği ve saldırıya uğrayabildiği için SMS, tek başına en güvenli kimlik doğrulama yöntemi değildir. Diğer iki etmenli kimlik doğrulama yöntemlerini veya çok öğeli kimlik doğrulamayı kullanmayı deneyin.
Kullanıcıların kredi kartı bilgilerini doldurmalarına yardımcı olma
Birçok e-ticaret web sitesinde ürün satın almak için kredi kartınızı kullanabilirsiniz. Siteler, kendi formlarını sağlayan üçüncü taraf ödeme platformlarını kullanabilir. Ancak kendi ödeme formlarınızı oluşturmanız gerekiyorsa kullanıcıların ödeme bilgilerini kolayca doldurabilmesini sağlayın.
Tarayıcıların doğru otomatik doldurma seçeneklerini sunmasını sağlamak için autocomplete özelliğini tekrar kullanabilirsiniz.
Kredi kartı numarası cc-number, kredi kartının son kullanma tarihi cc-exp ve kredi kartı ödemesi için gerekli olan diğer tüm bilgiler
değerleri vardır.
Tarayıcıların otomatik doldurma özelliğini sunmasını sağlamak için kredi kartı numaraları ve telefon numaraları gibi sayılar için tek bir giriş kullanın. Otomatik tamamlama özelliğinin kullanılabilmesi için özel öğeler yerine standart form öğeleri (ör. ödeme kartı tarihleri için <select>) kullanın.
Kullanıcıların ödeme verilerini yeniden girmesini önleme hakkında daha fazla bilgi edinin.
Otomatik doldurmanın tüm alanlarınızda çalıştığından emin olun
Tarayıcılar, adres, hesap bilgileri ve kredi kartı bilgilerinin yanı sıra otomatik doldurma konusunda kullanıcılara yardımcı olabileceği daha birçok alan sunar.
Formunuza telefon alanı eklerken otomatik tamamlama için kullanılabilir değerlerden herhangi birini kullanıp kullanamayacağınızı kontrol edin. Form alanınız için uygun bir değer buldunuz mu? Ekleyin.
autocomplete özelliği için uygun değerler kullanmak, tarayıcıların en iyi otomatik doldurma seçeneğini sunmasına ve kullanıcıların formları daha hızlı doldurmasına yardımcı olur.
Tarayıcıların bir alanın otomatik olarak doldurulmaması gerektiğini anlamasına yardımcı olma
Otomatik doldurmanın işleyiş şeklini, tarayıcıların otomatik doldurma özelliğine nasıl yardımcı olabileceğinizi ve otomatik doldurmanın kullanıcıların formları doldurmasını neden kolaylaştırdığını öğrendiniz. Ancak bazen tarayıcıların otomatik doldurma özelliği sunmasını istemeyebilirsiniz.
<label for="one-time-code">One-time code</label>
<input autocomplete="off" type="text" name="one-time-code" id="one-time-code">
Otomatik doldurma özelliğinin yararlı olmadığı bir durum, tek kullanımlık kod alanı gibi tek seferlik, benzersiz değerler girerken ortaya çıkar. Değer her seferinde farklıdır ve tarayıcı değerleri kaydetmemeli veya otomatik doldurma seçeneği sunmamalıdır. Otomatik doldurmayı önlemek için bu tür alanlarda autocomplete="off" kullanabilirsiniz.
autocomplete="off" için bir başka kullanım alanı da tuzak alanıdır (önceki modüle bakın). Alan görünür olmasa da tarayıcılar, diğer alanlarla birlikte bu alanı otomatik olarak doldurabilir. Otomatik doldurma özelliğinin devre dışı bırakılması, alanın otomatik olarak doldurulması nedeniyle gerçek bir kullanıcının bot olarak tanımlanmasını önler.
Yalnızca kullanıcıların işine yarayacağından eminseniz otomatik doldurmayı devre dışı bırakmalısınız.
Anlayıp anlamadığınızı kontrol etme
Otomatik doldurma ile ilgili bilginizi test edin
Kayıt formundaki şifre alanı için hangi otomatik tamamlama değerini kullanmalısınız?
autocomplete="password"autocomplete="off"autocomplete="new-password"autocomplete="current-password"