En iyi uygulamalara uygun bir kayıt formu oluşturma

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

Kullanıcıların sitenize kaydolması gerekiyorsa kayıt formunun iyi tasarlanmış olması ç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ış kayıt formları, yüksek hemen çıkma oranlarına neden olur. Her hemen çıkma, yalnızca kaçırılan bir kaydolma 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ı kayıt formları oluşturmak için en önemli kurallar aşağıda özetlenmiştir.

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 Hesap oluştur ya da Kaydol'u 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.

Kayıt sürecinin durumunu göster

Kayıt sürecinin her adımında, 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 kayıt verilerini yeniden girmesini önleme

Kayıt formlarına uygun autocomplete değerlerini eklediğinizden emin olun.

Bu sayede tarayıcılar, kaydolma ayrıntılarını güvenli bir şekilde depolayarak ve form verilerini doğru şekilde girerek kullanıcılara yardımcı olabilir. Otomatik tamamlama özelliği olmadığında kullanıcıların, kaydolma bilgilerini fiziksel olarak kaydetme veya kaydolma verilerini cihazlarında güvenli olmayan 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. Şifreler için pattern özelliğini kullanarak güç koşullarını zorunlu kılın ve doğrulama başarısız olduğunda net hata mesajları gösterin. Boş gönderimleri önlemek için zorunlu alanlara required özelliğini ekleyin.

Kayıt 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 kaydolma özelliğini oluşturmak daha kolay hale gelir 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 "Kaydol" düğmesini engellemesini önleme

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

Mümkünse kaydolma sayfanızın üst kısmında yalnızca e-posta (veya telefon) ve şifre girişlerini ve Kaydol 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.

Yeni şifre için autocomplete="new-password" kullanın

ZORUNLU: Kayıt formu için autocomplete="new-password" kullanın.

<!-- new-password prevents password managers from auto-filling an existing password into this field -->
<input type="password" id="new-password" name="new-password" autocomplete="new-password" required>

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

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.

Ş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.

Üçüncü taraf girişi sunma

Birçok kullanıcı, e-posta adresi ve şifre kayıt formunu kullanarak web sitelerinde oturum açmayı tercih eder. Ancak kullanıcıların, birleştirilmiş giriş olarak da bilinen üçüncü taraf kimlik sağlayıcı kullanarak oturum açmasına da izin vermeniz gerekir.

Bu yaklaşımın çeşitli avantajları vardır. Birleşik giriş kullanarak hesap oluşturan kullanıcılar için şifre istemeniz, iletmeniz veya saklamanız gerekmez.

Ayrıca, birleşik girişten e-posta adresi gibi ek doğrulanmış profil bilgilerine de erişebilirsiniz. Bu sayede kullanıcının bu verileri girmesi ve sizin de doğrulamayı kendiniz yapmanız gerekmez. Birleşik giriş, kullanıcıların yeni bir cihaz aldıklarında da işlerini çok daha kolaylaştırabilir.

Kullanıcı adları konusunda dikkatli olun

Gerekli olmadığı sürece (veya gerekli olana kadar) kullanıcı adı istemeyin. Kullanıcıların yalnızca bir e-posta adresi (veya telefon numarası) ve şifreyle ya da tercih ederlerse birleşik girişle kaydolup oturum açmalarına olanak tanıyın. Kullanıcıları bir kullanıcı adı seçmeye ve hatırlamaya zorlamayın.

Siteniz kullanıcı adı gerektiriyorsa kullanıcı adları için mantıksız kurallar koymayın ve kullanıcıların kullanıcı adlarını güncellemelerini engellemeyin. Arka uçta, her kullanıcı hesabı için benzersiz bir kimlik oluşturmanız gerekir. Kullanıcı adı gibi kişisel verilere dayalı bir tanımlayıcı kullanmamalısınız.

Ayrıca kullanıcı adları için autocomplete="username" kullandığınızdan emin olun.

Yedek stratejiler

Otomatik doldurma, progresif bir geliştirmedir. Otomatik doldurmayı desteklemeyen tarayıcılarda kullanıcıların kaydolma 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.