En iyi uygulamalara uygun bir oturum açma formu oluşturma

Güvenli, erişilebilir ve kullanımı kolay oturum açma formları oluşturmak için platformlar arası tarayıcı özelliklerini kullanın.

Kullanıcıların sitenizde oturum açması gerekiyorsa iyi bir oturum açma formu tasarımı çok önemlidir. Bu durum özellikle bağlantısı zayıf olan, mobil cihaz kullanan, acelesi olan veya stresli olan kişiler için geçerlidir. Kötü tasarlanmış oturum açma formları yüksek hemen çıkma oranlarına sahiptir. Her hemen çıkma, yalnızca kaçırılan bir oturum açma fırsatı değil, aynı zamanda kaybedilen bir müşteri ve memnuniyetsiz bir kullanıcı anlamına gelebilir.

Nasıl uygulanır?

Başarılı oturum açma formları oluşturmayla ilgili en önemli kurallar aşağıda açıklanmıştır.

Anlamlı ve geçerli HTML kullanma

Form oluşturmak için tasarlanmış öğelerden ve özelliklerden en iyi şekilde yararlanın:

• <form>, <input>, <label> ve <button>
• type, autocomplete ve inputmode

Bunlar, yerleşik tarayıcı işlevini etkinleştirir, erişilebilirliği iyileştirir ve işaretlemeye anlam katar.

Veri girişi için form alanlarını etiketlemek üzere <label> öğesini kullanın

<input>, <select> veya <textarea> etiketlemek için <label> kullanın. Etiketin for özelliğine girişin id özelliğiyle aynı değeri vererek etiketi bir girişle ilişkilendirin.

HTML özelliklerinden en iyi şekilde yararlanma

Mobil cihazlarda doğru klavyeyi sağlamak ve tarayıcı tarafından temel yerleşik doğrulamayı etkinleştirmek için uygun <input> öğe <type> özelliğini kullanarak kullanıcıların veri girmesini kolaylaştırın.

E-posta adresleri için her zaman type="email", telefon numaraları için ise type="tel" kullanın.

Erişilebilirliği iyileştirmek ve kullanıcıların verileri yeniden girmesini önlemek için her <input>, <select> ve <textarea> öğesinin uygun bir autocomplete özelliği OLMALIDIR.

Kullanıcı adı ve e-posta girişleri, metin değil tanımlayıcı içerir. Tarayıcının bunları hesabın eşleşmediği bir şekilde yeniden yazmaması için spellcheck="false" ekleyin. autocorrect ve autocapitalize, input type="email" için her zaman devre dışıdır ancak e-posta olmayan kullanıcı adları için gereklidir.

Düğmeleri faydalı hale getirme

Düğmeler için <button> kullanın. <input type="submit"> öğesini de kullanabilirsiniz ancak div veya düğme işlevi gören başka bir rastgele öğe kullanmayın. Düğme öğeleri, erişilebilir davranış ve yerleşik form gönderme işlevi sağlar ve kolayca stillendirilebilir.

Her form gönderme düğmesine, ne yaptığını belirten bir değer verin. Anlaşılır ve tanınabilir bir etiket kullanın. Örneğin, Devam veya Gönder yerine Oturum Aç'ı kullanın.

Mümkün olduğunda tek bir ad girişi kullanın

Adları, soyadları, unvanları veya adın diğer kısımlarını ayrı ayrı saklamak için geçerli bir nedeniniz yoksa kullanıcılarınızın adlarını tek bir giriş kullanarak girmelerine izin verin. Tek bir ad girişi kullanmak formları daha az karmaşık hale getirir, kesme ve yapıştırma işlemlerini mümkün kılar ve otomatik doldurmayı kolaylaştırır.

Uluslararası adlara izin verin. Doğrulama için yalnızca Latin karakterleriyle eşleşen normal ifadeler kullanmaktan kaçının. Yalnızca Latin alfabesi seçeneği, adlarında veya adreslerinde Latin alfabesinde olmayan karakterler bulunan kullanıcıları hariç tutar. Bunun yerine Unicode harf eşleştirmeye izin verin ve arka ucunuzun Unicode'u hem giriş hem de çıkış olarak güvenli bir şekilde desteklediğinden emin olun. Normal ifadelerdeki Unicode, modern tarayıcılar tarafından iyi bir şekilde desteklenir.

Oturum açma işleminin ilerleme durumunu göster

Oturum açma sürecindeki her adımda, o anda yapılması gerekenleri ve bir sonraki adımı netleştiren sayfa başlıkları ve açıklayıcı düğme değerleri kullanın.

Mobil klavyenin Enter tuşu etiketini ayarlamak için form girişlerinde enterkeyhint özelliğini kullanın. Örneğin, çok sayfalı bir formda enterkeyhint="previous" ve enterkeyhint="next", formdaki son giriş için enterkeyhint="done" ve arama girişi için enterkeyhint="search" kullanın.

Kullanıcıların oturum açma verilerini yeniden girmesini önleme

Oturum açma formlarına uygun autocomplete değerlerini eklediğinizden emin olun.

Bu sayede tarayıcılar, oturum açma bilgilerini güvenli bir şekilde saklayarak ve form verilerini doğru şekilde girerek kullanıcılara yardımcı olabilir. Otomatik tamamlama özelliği olmadığında kullanıcıların oturum açma bilgilerini fiziksel olarak kaydetme veya oturum açma verilerini cihazlarında güvensiz bir şekilde saklama olasılığı daha yüksek olabilir.

Dikkatlice doğrulayın

Veri girişini hem gerçek zamanlı olarak hem de form gönderilmeden önce doğrulayın. E-posta girişleri için type="email" kullanın. Tarayıcı, biçimi otomatik olarak doğrular. Boş gönderimleri önlemek için zorunlu alanlara required özelliğini ekleyin.

Oturum açma işlemini kendi <form> öğesine yerleştirin

Kullanıcıların veri girmesini istediğinizde her zaman <form> öğesini kullanın.

Girişleri <div> içine sarmayın ve giriş verilerinin gönderimini yalnızca JavaScript ile gerçekleştirin. Genellikle <form> öğesi kullanmak daha iyidir. Bu sayede siteniz, ekran okuyucular ve diğer yardımcı cihazlar tarafından erişilebilir hale gelir, çeşitli yerleşik tarayıcı özellikleri etkinleştirilir, eski tarayıcılar için temel işlevsel oturum açma işlemleri daha kolay oluşturulur ve JavaScript başarısız olsa bile çalışmaya devam edebilir.

Girişleri iki katına çıkarmayın

Bazı siteler, kullanıcıları e-posta adreslerini veya şifrelerini iki kez girmeye zorlar. Bu, birkaç kullanıcı için hataları azaltabilir ancak tüm kullanıcılar için ek iş yükü oluşturur ve vazgeçme oranlarını artırır. Tarayıcıların e-posta adreslerini otomatik olarak doldurduğu veya güçlü şifreler önerdiği durumlarda da iki kez sormak mantıklı değildir. Kullanıcıların e-posta adreslerini onaylamalarını sağlamak (bunu zaten yapmanız gerekir) ve gerektiğinde şifrelerini sıfırlamalarını kolaylaştırmak daha iyi bir yöntemdir.

Şifreleri gizli tutma ancak kullanıcıların istedikleri zaman şifreleri görmelerine izin verme

Şifre girişlerinde, şifre metnini gizlemek ve tarayıcının girişin şifreler için olduğunu anlamasına yardımcı olmak amacıyla type="password" bulunmalıdır. (Tarayıcıların, giriş rollerini anlamak ve şifreleri kaydetmeyi teklif edip etmeyeceğine karar vermek için çeşitli teknikler kullandığını unutmayın.)

Kullanıcıların girdikleri metni kontrol edebilmeleri için Şifreyi göster açma/kapatma düğmesi eklemeniz gerekir. Ayrıca Şifremi unuttum bağlantısı eklemeyi de unutmayın.

Mobil kullanıcılara doğru klavyeyi sunun

Mobil kullanıcılara uygun bir klavye sunmak ve tarayıcı tarafından temel yerleşik e-posta adresi doğrulamasını etkinleştirmek için <input type="email"> kullanın. JavaScript gerekmez.

E-posta adresi yerine telefon numarası kullanmanız gerekiyorsa <input type="tel">, mobil cihazlarda telefon tuş takımını etkinleştirir. Gerektiğinde inputmode özelliğini de kullanabilirsiniz: inputmode="numeric", PIN numaraları için idealdir.

Mobil klavyenin Oturum aç düğmesini engellemesini önleme

Dikkatli olmazsanız mobil klavyeler formunuzu kapatabilir veya daha da kötüsü, Oturum aç düğmesini kısmen engelleyebilir. Kullanıcılar ne olduğunu anlamadan vazgeçebilir.

Mümkünse oturum açma sayfanızın üst kısmında yalnızca e-posta (veya telefon) ve şifre girişleri ile Oturum aç düğmesini göstererek bu durumdan kaçının. Diğer içerikleri altına yerleştirin.

Kullanıcıların verileri yeniden girmesini önleme

Tarayıcıların verileri doğru şekilde depolamasına ve girişleri otomatik olarak doldurmasına yardımcı olabilirsiniz. Böylece kullanıcıların e-posta ve şifre değerlerini girmeyi hatırlaması gerekmez. Bu, özellikle mobil cihazlarda önemlidir ve yüksek vazgeçme oranlarına sahip e-posta girişleri için çok önemlidir. Bunun iki bölümü vardır:

1. autocomplete, name, id ve type özellikleri, tarayıcıların girişlerin rolünü anlamasına yardımcı olur. Böylece tarayıcılar, daha sonra otomatik doldurma için kullanılabilecek verileri depolayabilir. Modern tarayıcılar, verilerin otomatik doldurma için saklanmasına izin vermek amacıyla girişlerin sabit bir name veya id değerine sahip olmasını (her sayfa yüklemede veya site dağıtımında rastgele oluşturulmamış) ve submit düğmesi olan bir <form> öğesinde bulunmasını da gerektirir.
2. autocomplete özelliği, tarayıcıların depolanan verileri kullanarak girişleri doğru şekilde otomatik doldurmasına yardımcı olur.

E-posta girişleri için autocomplete="username" kullanın. username, modern tarayıcılardaki şifre yöneticileri tarafından tanınır. Ancak type="email" kullanmanız gerekir ve id="email" ile name="email" kullanmak isteyebilirsiniz. Şifre girişleri için tarayıcıların yeni ve mevcut şifreleri ayırt etmesine yardımcı olacak uygun autocomplete değerini kullanın.

Mevcut bir şifre için autocomplete="current-password" kullanın

ZORUNLU: Oturum açma formundaki şifre girişi için autocomplete="current-password" kullanın. Bu, tarayıcıya site için sakladığı mevcut şifreyi kullanmasını istediğinizi bildirir.

Oturum açma formu için:

<input type="password" autocomplete="current-password" id="current-password" …>

Tarayıcının güçlü bir şifre önermesini etkinleştirme

Modern tarayıcılar, şifre yöneticisi kullanıcı arayüzünü ne zaman göstereceklerine ve güçlü bir şifre önereceklerine karar vermek için sezgisel yöntemler kullanır.

Yerleşik tarayıcı şifre oluşturucuları sayesinde kullanıcıların ve geliştiricilerin "güçlü şifre"nin ne olduğunu bulması gerekmez. Tarayıcılar şifreleri güvenli bir şekilde saklayıp gerektiğinde otomatik olarak doldurabildiğinden kullanıcıların şifreleri hatırlaması veya girmesi gerekmez. Kullanıcıları yerleşik tarayıcı şifre oluşturucularından yararlanmaya teşvik etmek, sitenizde benzersiz ve güçlü bir şifre kullanma olasılıklarını artırır ve başka bir yerde güvenliği ihlal edilebilecek bir şifreyi yeniden kullanma olasılıklarını azaltır.

Kullanıcıların girişleri yanlışlıkla kaçırmasını önlemeye yardımcı olma

ZORUNLU: Hem e-posta hem de şifre alanlarına required özelliğini ekleyin. Modern tarayıcılar, eksik veriler için otomatik olarak istemde bulunur ve odağı ayarlar.

<input type="email" id="email" name="email" autocomplete="username" required>
<input type="password" id="password" name="password" autocomplete="current-password" required>

Şifre yapıştırmaya izin ver

Bazı siteler, şifre girişlerine metin yapıştırılmasına izin vermez.

Şifre yapıştırmaya izin verilmemesi kullanıcıları rahatsız eder, akılda kalıcı (ve dolayısıyla güvenliği ihlal edilmesi daha kolay olabilecek) şifreler kullanmaya teşvik eder ve Birleşik Krallık Ulusal Siber Güvenlik Merkezi gibi kuruluşlara göre güvenliği azaltabilir. Kullanıcılar, şifrelerini yapıştırmayı denedikten sonra yapıştırmaya izin verilmediğini fark eder. Bu nedenle, şifre yapıştırmaya izin verilmemesi, pano güvenlik açıklarını önlemez.

Yedek stratejiler

Otomatik doldurma, progresif bir geliştirmedir. Otomatik doldurmayı desteklemeyen tarayıcılarda kullanıcıların oturum açma kimlik bilgilerini manuel olarak girmesi gerekir. Semantik HTML kısıtlamaları (type, inputmode ve required gibi), kullanıcı girişini doğrulamak ve doğru sanal klavyeleri sağlamak için uygun şekilde çalışmaya devam eder.