Otomatik Doldurma özelliği

Onuncu kez adresinizi tekrar girmek yorucudur. Tarayıcılar ve bir geliştirici olarak siz, kullanıcıların verileri daha hızlı girmelerine yardımcı olabilir ve verileri yeniden girmek zorunda kalmazsınız. 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 öğretilir.

Otomatik doldurmanın işleyiş şekli nasıldır?

Otomatik doldurmaya giriş bölümünde, otomatik doldurmayla ilgili temel bilgileri zaten öğrendiniz. Peki tarayıcılar neden otomatik doldurma özelliğini sunuyor?

Form doldurmak ilgi çekici bir etkinlik olmasa da sıkça yaptığınız bir şeydir. Zaman içinde birçok form doldurursunuz ve genellikle aynı verileri doldurursunuz. Kullanıcılara form alanlarını daha hızlı doldurmaya yardımcı olmanın bir yolu, form alanlarını önceden girilen verilerle otomatik olarak doldurma seçeneği sunmaktır. Bu otomatik doldurma.

Tarayıcılar hangi verilerin otomatik olarak doldurulacağını nasıl bilir? Öğrenmek için örnek 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ğeri (ad) ile birlikte saklar. Bazı tarayıcılar, verileri depolayıp doldururken id özelliğine de bakar.

Diyelim ki haftalar sonra başka bir web sitesinde başka bir form doldurdunuz. Bu sitede ayrıca name="name" içeren bir form alanı da bulunmaktadır. Ad için bir değer zaten depolandığından tarayıcınız artık otomatik doldurmayı sunabilir.

Otomatik Doldurma, özellikle kaydolma ve oturum açma, ödeme, ödeme ve adınızı ya da adresinizi girmeniz gereken formlar gibi düzenli kullandığınız formlarda yararlı olur.

autocomplete özelliği için uygun değerleri kullanarak tarayıcıların en iyi otomatik doldurma seçeneklerini sunmalarına yardımcı olabilirsiniz. autocomplete için birçok olası değer vardır. Adreslerle ilgili bir örnek aşağıda verilmiştir.

Tarayıcınızda sizin için kaydedilmiş bir adres zaten var mı? İsteğinizi aldık. Adres formundaki ilk alanla etkileşimde bulunduktan sonra, tarayıcı kayıtlı adreslerin listesini size gösterir. Birini seçtiğinizde tarayıcı adresle ilgili tüm alanları doldurur. Otomatik Doldurma özelliği, form doldurmayı hızlı ve kolay hale getirir.

Her adres formu aynı alanlara sahip değildir ve alanların sırası değişiklik gösterir. autocomplete için doğru değerlerin kullanılması, tarayıcının form için doğru değerleri doldurmasını sağlar. country, postal-code ve daha birçok değer var.

Kullanıcıların hızlı oturum açabildiğinden ve güvenli şifreler kullanabildiğinden emin olun

Birçok kişi şifreleri hatırlama konusunda başarılı değildir. En yaygın şifre "123456" ve ardından hatırlanması kolay diğer kombinasyonlardır. Hepsini hatırlamadan güvenli ve benzersiz şifreleri nasıl kullanabilirsiniz?

Tarayıcılarda, sizin için şifreler oluşturmak, kaydetmek ve doldurmak üzere yerleşik şifre yöneticileri bulunur. E-postaları otomatik olarak doldurma ve şifreleri yönetme konularında tarayıcılara nasıl yardımcı olabileceğinizi öğrenin.

E-posta alanı için autocomplete="email" kullanabilirsiniz. Böylece kullanıcılara e-posta adresi için otomatik doldurma seçeneği sunulur.

Bu bir kayıt formu olduğundan, kullanıcılara önceden kullanılan şifreleri girme seçeneği sunulmamalıdır. Tarayıcıların yeni bir şifre oluşturma seçeneği sunmasını sağlamak için autocomplete="new-password" kullanabilirsiniz.

Oturum açma formunda, tarayıcılara bu web sitesine ilişkin önceden kaydedilmiş şifreleri doldurma seçeneği sunmalarını bildirmek için autocomplete="current-password" kullanabilirsiniz.

İki faktörlü kimlik doğrulamayı birçok web sitesinde ayarlayabilirsiniz. Şifreye ek olarak, SMS veya iki faktörlü kimlik doğrulama uygulaması ile tek kullanımlık bir kod da gönderilir.

SMS mesajında aldığınız kodu dokunmatik klavyede önerip değeri girmek için doğrudan seçebilseydiniz harika olmaz mıydı? Bunun için Safari 14 veya sonraki sürümlerde autocomplete="one-time-code" kullanabilirsiniz. Android üzerinde Chrome'da, bunu JavaScript ile elde etmek için WebOTP API'sini kullanabilirsiniz.

SMS OTP formu en iyi uygulamaları ile web'de telefon numaralarını nasıl doğrulayacağınız hakkında daha fazla bilgi edinin.

Kullanıcıların kredi kartı bilgilerini doldurmalarına yardımcı olun

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ı kullanabilir. Ancak kendi ödeme formlarınızı oluşturmanız gerekiyorsa kullanıcıların ödeme bilgilerini kolayca doldurabildiğinden emin olun.

Tarayıcıların doğru otomatik doldurma seçeneklerini sunduğundan emin olmak için autocomplete özelliğini tekrar kullanabilirsiniz.

Kredi kartı numarası cc-number, kredi kartı 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 sunduğundan emin olmak için kredi kartı numaraları ve telefon numaraları gibi numaralar için tek bir giriş kullanın. Otomatik tamamlamanın kullanılabildiğinden emin olmak için özel öğeler yerine standart form öğeleri (örneğin, ödeme kartı tarihleri için bir <select>) kullanın.

Kullanıcıların ödeme verilerini yeniden girmekten kaçınmasına yardımcı olma hakkında daha fazla bilgi edinin.

Otomatik doldurma özelliğinin tüm alanlarınızda çalıştığından emin olun

Adresler, hesap bilgileri ve kredi kartı bilgilerine ek olarak, tarayıcıların kullanıcılara otomatik doldurma konusunda yardımcı olabileceği daha birçok alan vardır.

Formunuza bir 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 mi buldunuz? 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ı olun

Otomatik doldurmanın işleyiş şeklini, otomatik doldurma özelliğiyle tarayıcılara nasıl yardımcı olabileceğinizi ve otomatik doldurmanın kullanıcıların form doldurmasını neden daha kolay hale getirdiğini öğrendiniz. Ancak bazen tarayıcıların otomatik doldurma olanağı sunmasını istemezsiniz.

<label for="one-time-code">One-time code</label>
<input autocomplete="off" type="text" name="one-time-code" id="one-time-code">

Otomatik doldurmanın faydalı olmadığı noktalardan biri, tek seferlik kod alanı gibi tek seferlik benzersiz değerler girmektir. Değer her zaman farklıdır ve tarayıcı değerleri kaydetmemeli veya bir otomatik doldurma seçeneği sunmamalıdır. Otomatik doldurmayı önlemek için bu tür alanlarda autocomplete="off" kullanabilirsiniz.

autocomplete="off" için başka bir kullanım alanı da bir honeypot alanıdır (önceki modüle bakın). Bu alan görünür olmasa da, tarayıcılar alanı diğer alanlarla otomatik olarak doldurabilir. Otomatik doldurmanın kapatılması, alanın otomatik olarak doldurulması nedeniyle gerçek bir kullanıcının bot olarak tanımlanmamasını sağlar.

Otomatik doldurmayı yalnızca kullanıcılara yardımcı olacağından eminseniz devre dışı bırakmalısınız.

Öğrendiklerinizi sınayın

Otomatik doldurmayla ilgili bilginizi test edin

Kayıt formundaki şifre alanı için hangi otomatik tamamlama değerini kullanmalısınız?

autocomplete="password"
Tekrar deneyin.
autocomplete="off"
Tekrar deneyin.
autocomplete="new-password"
🎉
autocomplete="current-password"
Tekrar deneyin.

Kaynaklar