Autocomplete özniteliği ne işe yarar ve hangi…

autocomplete özniteliği, tarayıcının form alanları için otomatik tamamlama sağlamasına izin verir. Kullanıcı deneyimini artırmak için daha önce kaydedilmiş verileri önerir.

autocomplete özniteliğinin parametreleri iki türe ayrılır: genel ve veri tipi bazlı.

Genel parametreler:

off: Bu alan için otomatik tamamlama engellenir.
on: Bu alan için otomatik tamamlama etkinleştirilir.

Veri tipi bazlı parametreler (en sık kullanılanlar):

name: Kullanıcının tam adı.
honorific-prefix: Ünvan (örneğin, "Bay", "Bayan").
given-name: İsim.
additional-name: Ek isimler (ikinci isim vb.).
family-name: Soyadı.
honorific-suffix: İsimden sonra gelen unvan (örneğin, "Jr.", "Sr.").
nickname: Takma ad.
email: E-posta adresi.
username: Kullanıcı adı.
new-password: Yeni şifre (şifre oluşturma alanları için).
current-password: Mevcut şifre (var olan şifre giriş alanları için).
one-time-code: Tek kullanımlık kod (örneğin, iki faktörlü kimlik doğrulama için).
organization-title: Pozisyon.
organization: Kuruluşun adı.
street-address: Sokak ve ev numarası.
address-line1: Adresin ilk satırı.
address-line2: Adresin ikinci satırı.
address-line3: Üçüncü satır.
address-level4: En küçük idari birim (örneğin, köy).
address-level3: Üçüncü en büyük idari birim (örneğin, ilçe).
address-level2: İkinci en büyük idari birim (örneğin, şehir).
address-level1: En büyük idari birim (örneğin, bölge, eyalet).
country: Ülke.
country-name: Ülke adı.
postal-code: Posta kodu.
cc-name: Kredi kartındaki isim.
cc-given-name: Kredi kartındaki isim.
cc-additional-name: Kredi kartındaki ek isimler.
cc-family-name: Kredi kartındaki soyadı.
cc-number: Kredi kartı numarası.
cc-exp: Kredi kartı son kullanma tarihi.
cc-exp-month: Son kullanma ayı.
cc-exp-year: Son kullanma yılı.
cc-csc: Güvenlik kodu.
cc-type: Kart tipi.
transaction-currency: İşlem para birimi.
transaction-amount: İşlem tutarı.
language: Tercih edilen dil.

Parametreler ayrıca shipping veya billing gibi önekler içerebilir, bu da bunların teslimat veya ödeme verileri olduğunu gösterir.

Kullanım örneği:

<form>
  <label for="name">İsim:</label>
  <input type="text" id="name" name="name" autocomplete="given-name">

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

  <label for="street">Sokak:</label>
  <input type="text" id="street" name="street" autocomplete="shipping street-address">
</form>

Autocomplete özniteliği ne işe yarar ve hangi parametreleri alır?