HTML autocomplete Özniteliği ve type="password" Alanı

autocomplete ne yapar, nerede kullanılır?

MDN'in tanımıyla autocomplete, tarayıcının bir alanı önceden doldurmasına izin verip vermediğinizi ve alana hangi tür bilginin girileceğini belirten bir ipucudur. Metin veya sayı alan <input> öğelerinde, <textarea>, <select> ve <form> öğelerinde kullanılabilir. Önerilen değerlerin kaynağı tarayıcıya kalmıştır: genellikle kullanıcının daha önce girdiği değerlerdir, ama tarayıcının sakladığı ad, adres, telefon veya kimlik doğrulamadan sonra açılan şifrelenmiş kart bilgisi gibi önceden kaydedilmiş değerler de olabilir.

Bir alanda öznitelik yoksa tarayıcı alanın sahibi olan formun autocomplete değerine bakar. Sahip form, alanın form özniteliğiyle işaret ettiği <form> ya da daha yaygın olarak alanın içinde bulunduğu formdur. Formun kendi özniteliği yalnızca on veya off alır; alanlara yazılan değer formdakini geçersiz kılar. Form özniteliklerinin tamamı için form etiketi yazısına bakın.

Üç değer biçimi: off, on ve belirteç listesi

• off: Tarayıcının bu alana otomatik değer girmesine veya seçmesine izin verilmez. Belgenin kendi otomatik tamamlama özelliği olabilir ya da güvenlik nedeniyle değer otomatik girilmemelidir.
• on: Tarayıcı alanı otomatik tamamlayabilir, ama beklenen veri hakkında bir ipucu verilmez; tarayıcı kendi yargısını kullanır.
• Belirteç listesi: Boşlukla ayrılmış, sıralı belirteçler. Alanın anlamını tam olarak tarif eder: shipping postal-code, section-kullanici1 billing street-address gibi.

Aynı belirteç listesi birden fazla alanda kullanılırsa tarayıcı hepsini aynı veriyle doldurur. type="hidden" bir alana autocomplete yazarsanız değer bir belirteç listesi olmak zorundadır; orada on ve off kullanılamaz.

autocomplete="off" neden çoğu zaman işe yaramaz?

Geliştiriciler bazen "güvenlik" gerekçesiyle formun tamamına autocomplete="off" yazar. MDN bu konuda iki uyarı yapar. Birincisi teknik: modern tarayıcıların çoğunda off değeri, şifre yöneticisinin kullanıcıya kullanıcı adı ve şifreyi kaydetmeyi önermesini ya da giriş formunu doldurmasını engellemez. Tarayıcılar, giriş formu olduğundan şüphelendikleri formlarda bu değeri yok sayma eğilimindedir. Şifre alanı sayfası da bazı yazılımların bu değeri görmezden geldiğini, çünkü güvenli şifre alışkanlıklarına genellikle zarar verdiğini söyler.

İkincisi erişilebilirlik: otomatik doldurma, bilişsel engeli olan kullanıcıların kişisel bilgilerini hatırlamasına, motor engeli olan kullanıcıların daha az yazmasına yardım eder. Bu özelliği kapatmak onlar için formu zorlaştırır. MDN, off değerini yalnızca gerçekten gerekli alanlarda, örneğin CAPTCHA veya tek kullanımlık belirteç alanlarında kullanmayı önerir. Otomatik doldurmayı atlatmak için uydurma değerler yazmak da aynı sonucu doğurur: tarayıcı alanın amacını tanıyamaz ve hiçbir öneri sunamaz.

MDN bir tarayıcı farkını da not eder: Firefox, diğer tarayıcılardan farklı olarak bir alanın dinamik devre dışı ve işaretli durumunu sayfa yeniden yüklendiğinde korur ve bu davranış da autocomplete="off" ile kapatılır. Bu konu checkbox ve radio yazısında da geçiyor.

Belirteç listesi hangi sırayla yazılır?

Belirteç listesinin bir dilbilgisi vardır. MDN'e göre sıra şöyledir ve köşeli parantez içindekiler isteğe bağlıdır:

• [section-*]: Adlandırılmış grup. İlk sekiz karakteri "section-" olan ve ardından bir ad gelen belirteç. Aynı belirteci taşıyan bütün alanlar aynı gruba aittir. Örneğin bir formda iki ayrı teslimat adresi varsa section-adres1 ve section-adres2 onları birbirinden ayırır. Varsa her zaman ilk belirteçtir.
• [shipping veya billing]: Alanın teslimat mı fatura mı bilgisine ait olduğunu söyler. Aynı formda iki posta kodu varsa shipping postal-code ve billing postal-code onlara farklı değerler verilmesini sağlar.
• [home, work, mobile, fax, pager]: Yalnızca telefon, e-posta ve anlık mesajlaşma belirteçlerinden önce gelir ve alıcının türünü belirtir: work email, mobile tel gibi.
• Ayrıntı belirteci (zorunlu): Alanın asıl anlamı: email, tel, postal-code, cc-number vb.
• [webauthn]: Varsa en sondadır. <input> ve <textarea> üzerinde, Web Authentication API ile oluşturulmuş geçiş anahtarlarının (passkey) önerilmesini ister; bu, koşullu bir navigator.credentials.get() çağrısıyla birlikte çalışır.

En sık kullanılan ayrıntı belirteçleri

MDN, adın parçalara bölünmesi yerine tek bir name alanı kullanılmasını önerir, çünkü insan adlarının yapısı çok çeşitlidir. Sokak adresi için street-address ile address-line1 ve diğer satırlar aynı formda birlikte bulunmamalıdır; satır belirteçleri yalnızca street-address yoksa kullanılır. street-address şehir, posta kodu ve ülke adını içermemelidir.

İdari düzeyler ve Türkiye adresleri

address-level1 ile address-level4 arası belirteçler adresi giderek daralan idari birimlerle tarif eder. MDN'e göre address-level1 her zaman ülke adından sonraki en geniş birimdir: ABD'de eyalet, İsviçre'de kanton, Birleşik Krallık'ta kontluk. İki düzeyli ülkelerde address-level2 genellikle şehir veya kasabadır. MDN Türkiye için ayrı bir örnek vermez; bu tanım uygulandığında il address-level1, ilçe address-level2 olur. Ülkeler adres yazımında farklı sıralar kullandığı için MDN, mümkünse adres formunun düzenini kullanıcının ülkesine göre değiştirmeyi önerir.

<fieldset>
  <legend>Teslimat adresi</legend>
  <label for="t-adres">Açık adres</label>
  <textarea id="t-adres" name="t_adres" autocomplete="shipping street-address"></textarea>

  <label for="t-ilce">İlçe</label>
  <input id="t-ilce" name="t_ilce" autocomplete="shipping address-level2" />

  <label for="t-il">İl</label>
  <input id="t-il" name="t_il" autocomplete="shipping address-level1" />

  <label for="t-posta">Posta kodu</label>
  <input id="t-posta" name="t_posta" inputmode="numeric" autocomplete="shipping postal-code" />
</fieldset>

<fieldset>
  <legend>Fatura bilgisi</legend>
  <label for="f-posta">Fatura posta kodu</label>
  <input id="f-posta" name="f_posta" inputmode="numeric" autocomplete="billing postal-code" />
</fieldset>

Burada iki posta kodu alanı shipping ve billing sayesinde birbirinden ayrılır; tarayıcı teslimat adresini fatura alanına yazmaz. Çok satırlı adres alanının ayrıntıları textarea yazısında.

type="password" alanının özellikleri

type="password" tek satırlık bir metin alanıdır; yazılan karakterler yıldız veya nokta gibi bir simgeyle gizlenir. Gizleme karakteri tarayıcıya ve işletim sistemine göre değişir. Bazı tarayıcılar yazılan karakteri kısa bir süre gösterip sonra gizler, bazıları kullanıcının şifreyi açıkça görüp gizlemesine izin verir. Değerde satır sonu ve satır başı karakterleri bulunamaz; betikle atanan değerden bu karakterler çıkarılır. autocorrect genel özniteliği eklenebilir ama MDN'e göre saklanan durum her zaman off'tur.

Şifre alanı minlength, maxlength, pattern, placeholder, readonly, required, size ve inputmode özniteliklerini destekler. size yalnızca alanın kaç karakter genişliğinde görüneceğini yaklaşık olarak belirler, varsayılanı 20'dir ve giriş uzunluğunu sınırlamaz; sınır için maxlength kullanılır. MDN, belirli karakter sınıflarını zorunlu kılmak için şifre alanlarında pattern kullanılmasını önerir ve kuralın title ile birlikte görünür bir metinle de açıklanmasını ister. Bu özniteliklerin doğrulama davranışı form doğrulama yazısında ayrıntılı anlatılıyor.

current-password ile new-password farkı

Şifre alanlarında autocomplete değeri, şifre yöneticisinin ne yapacağını belirler. MDN dört değeri karşılaştırır: on otomatik doldurmaya izin verir ama ne tür bir şifre olduğunu söylemez; off doldurmayı yasaklamaya çalışır ama bazı yazılımlarca yok sayılır; current-password site için bilinen mevcut şifrenin girilmesine izin verir ama yeni şifre önermez; new-password ise yeni hesap ve şifre değiştirme formlarındaki "yeni şifre" ve "yeni şifreyi doğrula" alanları içindir. Bu değer, tarayıcının yanlışlıkla mevcut şifreyi doldurmasını önler ve güvenli bir şifre üretmeye yardım etmesine imkân verir.

<!-- giriş formu -->
<form action="/giris" method="post">
  <label for="g-kadi">Kullanıcı adı</label>
  <input id="g-kadi" name="kadi" autocomplete="username" required />

  <label for="g-sifre">Şifre</label>
  <input id="g-sifre" name="sifre" type="password" autocomplete="current-password" required />

  <button type="submit">Giriş yap</button>
</form>

<!-- şifre değiştirme formu -->
<form action="/sifre" method="post">
  <label for="d-eski">Mevcut şifre</label>
  <input id="d-eski" name="eski" type="password" autocomplete="current-password" required />

  <label for="d-yeni">Yeni şifre (en az 12 karakter)</label>
  <input id="d-yeni" name="yeni" type="password" minlength="12"
    autocomplete="new-password" required />

  <button type="submit">Şifreyi değiştir</button>
</form>

Tek kullanımlık kod ve PIN alanları

one-time-code, oturum açarken ek bir doğrulama adımı olarak kullanılan tek kullanımlık şifreyi (OTP) belirtir. MDN'e göre bu kod çoğunlukla SMS, e-posta veya bir doğrulayıcı uygulama gibi ayrı bir kanaldan gelir. Şifre alanı sayfası, PIN gibi yalnızca rakamdan oluşan bir değer için inputmode="numeric" eklenmesini önerir; sanal klavyeli cihazlar bu durumda tam klavye yerine rakam düzenine geçebilir. PIN tek kullanımlıksa, saklanmaması gerektiğini belirtmek için autocomplete değerini off veya one-time-code yapmanız önerilir.

<form action="/dogrula" method="post">
  <label for="kod">Telefonunuza gönderilen 6 haneli kod</label>
  <input
    id="kod"
    name="kod"
    type="text"
    inputmode="numeric"
    pattern="[0-9]{6}"
    autocomplete="one-time-code"
    required />
  <button type="submit">Doğrula</button>
</form>

Burada alanı type="text" bıraktık, çünkü kod bir sayı değil bir karakter dizisidir; neden type="number" kullanılmadığı number ve range yazısında anlatılıyor. MDN'in sosyal güvenlik numarası örneğinde de benzer bir mantık vardır: şifre olmayan gizli bir değer için autocomplete="off" yazılır ki şifre yöneticileri ve oturum geri yükleme özellikleri değeri doldurmaya çalışmasın.

Erişilebilirlik ve WCAG bağlantısı

Doğru belirteçler yalnızca kolaylık değildir. MDN'e göre geçerli autocomplete değerleri vermek, kullanıcı bilgisi toplayan alanların amacının programla belirlenebilmesini isteyen WCAG 2.2 Başarı Ölçütü 1.3.5 "Identify Input Purpose" (AA düzeyi) ölçütünü karşılar. Amaç belirlenebilir olunca kullanıcı aracıları ve yardımcı teknolojiler kişiselleştirilmiş sunumlar yapabilir; örneğin alanların yanına tanıdık simgeler koyabilir. Uydurma veya standart dışı değerler bu ölçütü bozar. WCAG'in genel yapısı için web erişilebilirliği ve WCAG yazısına bakın.

Sık yapılan hatalar

• Formun tamamına autocomplete="off" yazmak. Giriş formlarında çoğu zaman yok sayılır, diğer alanlarda ise kullanıcıları zorlar. Yalnızca gerçekten gereken alanda kullanın.
• Uydurma değerler yazmak. autocomplete="nope" gibi değerler tarayıcının alanın amacını anlamasını engeller ve WCAG 1.3.5'i bozar.
• Kayıt formunda current-password kullanmak. Yeni şifre alanına new-password yazın; aksi hâlde şifre yöneticisi mevcut şifreyi doldurabilir.
• Teslimat ve fatura alanlarına aynı belirteci vermek. Aynı belirteç listesi aynı veriyle doldurulur; shipping ve billing ekleyin.
• Belirteç sırasını karıştırmak. section-* her zaman ilk, webauthn her zaman son belirteçtir.
• size özniteliğini uzunluk sınırı sanmak. Şifre alanında sınır maxlength ile konur.
• Alanları name veya id olmadan, form dışında bırakmak. Tarayıcılar otomatik doldurma için bunları gerektirebilir.

Sık Sorulan Sorular

autocomplete="off" şifre kaydetme penceresini engeller mi?

MDN'e göre modern tarayıcıların çoğunda engellemez. Şifre yöneticileri giriş alanlarında bu değeri genellikle yok sayar.

Yeni şifre alanına hangi değeri yazmalıyım?

autocomplete="new-password". Bu değer yeni hesap ve şifre değiştirme formlarındaki yeni şifre ile şifre doğrulama alanları içindir.

SMS doğrulama kodu alanı için doğru ayar nedir?

autocomplete="one-time-code" ve rakam klavyesi için inputmode="numeric". Kod bir sayı değil karakter dizisi olduğu için type="text" tercih edin.

Ad ve soyadı ayrı mı sormalıyım?

MDN, insan adlarının çok farklı yapılarda olabildiği için genellikle tek bir name alanını önerir. Ayrı alan gerekiyorsa given-name ve family-name kullanın.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: HTML öğrenme rehberi · HTML form etiketi · HTML form doğrulama · input türleri · textarea · WCAG temelleri