HTML autocomplete alanları nasıl tanımlanır?

Mehmet · Dün 21:58 da

HTML autocomplete alanları nasıl tanımlanır?

HTML’de otomatik doldurma davranışı, form veya form kontrolüne autocomplete özniteliği eklenerek tanımlanır. Kullanıcının tarayıcıda kayıtlı adres, ad, e-posta ya da ödeme bilgilerini doğru alana yerleştirebilmesi için yalnızca on kullanmak yerine alanın anlamını belirten uygun bir değer seçin. Örneğin e-posta alanı için autocomplete="email", yeni parola alanı için autocomplete="new-password" kullanılır.

Nasıl çalışır?

autocomplete hem form öğesinde genel varsayılanı belirleyebilir hem de input, select ve textarea üzerinde alanı özel olarak tanımlayabilir. Kontrol üzerindeki değer, formdaki genel değeri geçersiz kılar.

En yararlı yaklaşım, alanın kullanıcıya görünen etiketini ve name değerini anlamlı tutmak, ardından standart bir otomatik doldurma belirteci seçmektir. Tarayıcılar ve parola yöneticileri alanın türünü değerlendirirken bu bilgileri birlikte kullanabilir.

Sık kullanılan değerler şunlardır:

Alan amacı	Değer	Örnek kullanım
Ad	`given-name`	Kullanıcının adı
Soyadı	`family-name`	Kullanıcının soyadı
E-posta	`email`	E-posta adresi
Telefon	`tel`	Telefon numarası
Yeni parola	`new-password`	Kayıt veya parola değiştirme
Mevcut parola	`current-password`	Giriş formu
Adres	`street-address`	Açık adres
Posta kodu	`postal-code`	Posta kodu

Aşağıdaki form yalnız ön yüz örneğidir. /kayit yolunda POST işleyecek sunucu, güvenli parola işleme ve CSRF koruması ayrıca gerekir; kaydedilmiş gerçek hesap oluşturma kodu değildir:

Kod:

<style>input, select, textarea, button, details { border-radius: 4px; }</style>
<form action="/kayit" method="post" autocomplete="on">
  <label for="ad">Ad</label>
  <input id="ad" name="given-name" type="text" autocomplete="given-name" required>

  <label for="email">E-posta</label>
  <input id="email" name="email" type="email" autocomplete="email" required>

  <label for="password">Parola</label>
  <input id="password" name="password" type="password"
         autocomplete="new-password" required>

  <button type="submit">Hesap oluştur</button>
</form>

Uygulama adımları

Her kontrolün amacını belirleyin: Bu alan ad mı, e-posta mı, mevcut parola mı, yoksa yeni parola mı?
Amaca karşılık gelen standart autocomplete değerini seçin. Alanın yalnızca metin olduğunu belirtmek için on kullanmak yerine mümkünse daha açıklayıcı belirteci tercih edin.
Kontrole benzersiz bir id, sunucu tarafında anlamlı bir name ve buna bağlı bir label ekleyin.
Formun tamamında otomatik doldurmayı varsayılan olarak açmak istiyorsanız form autocomplete="on" kullanın; özel alanlardaki değerler bu varsayılanı geçersiz kılar.
Formu farklı tarayıcılarda deneyin. Alanın öneri almaması, tarayıcıda kayıtlı veri bulunmaması veya tarayıcının güvenlik ve kullanıcı tercihlerine göre doldurmayı sınırlaması anlamına gelebilir.

Bölümlü adres ve birden fazla kişi alanları

Aynı formda birden fazla kişinin bilgisi varsa alanları ayırmak için section- ile başlayan bir bölüm adı kullanılabilir. section- ile başlayan ad, keyfî bir grup kimliğidir; kendi başına adresin gönderim mi fatura mı olduğunu belirtmez. Bu anlam için ayrı shipping veya billing belirtecini kullanın; sıra section adı, adres türü, alan amacı biçimindedir. Böylece aynı türdeki alanların hangi adrese ait olduğu daha açık hale gelir.

Kod:

<input name="shipping-address"
       autocomplete="section-order shipping street-address">
<input name="billing-address"
       autocomplete="section-order billing street-address">

Bu belirteçler, görünür başlıkların veya sunucu tarafındaki alan adlarının yerine geçmez. Kullanıcı deneyimi için label metnini açık yazmaya devam edin.

Sık yapılan hatalar

Yanlış alan türü seçmek: Giriş formunda current-password yerine new-password kullanmak, tarayıcının yeni parola önermesine yol açabilir. Kayıt ve parola yenileme alanlarında new-password, mevcut parola alanında current-password kullanın.

Her alana autocomplete="off" yazmak: Bu, kullanıcıların güvenilir otomatik doldurma özelliğini gereksiz yere kaybetmesine neden olabilir. Yalnızca gerçekten otomatik doldurulmaması gereken alanlarda ve iş kuralı bunu gerektiriyorsa kullanın; parola alanlarında tarayıcı davranışının her zaman tamamen engelleneceğini varsaymayın.

Sadece name değerine güvenmek: name="user1" gibi belirsiz adlar hem sunucu kodunu hem de otomatik doldurma yorumunu zorlaştırır. Açık etiket, doğru tür ve anlamlı otomatik doldurma belirteci birlikte kullanılmalıdır.

Otomatik doldurmayı doğrulama sanmak: Doldurulan değer yine sunucu tarafında doğrulanmalıdır. autocomplete yalnızca öneri ve doldurma davranışını tanımlar; e-posta biçimini, yetkilendirmeyi veya verinin doğruluğunu garanti etmez.

Sık sorulan sorular

Bir alanda hem form hem kontrol değeri varsa hangisi geçerlidir?

Kontrolün kendi autocomplete değeri önceliklidir. Kontrolde değer yoksa form üzerindeki varsayılan dikkate alınır.

Otomatik doldurma hiç görünmüyorsa HTML hatalı mıdır?

Gerekmez. Tarayıcıda kayıtlı uygun veri olmayabilir veya kullanıcı tercihi, gizlilik ayarı ya da tarayıcının güvenlik politikası doldurmayı sınırlayabilir. Önce autocomplete değerini, name ve alan türünü kontrol edin; özelliğin her tarayıcıda zorla çalışacağını varsaymayın.

HTML autocomplete alanları nasıl tanımlanır?

Mehmet