Kayıt formu en iyi uygulamaları codelab'i

Sam Dutton

Bu codelab'i takip etmek için bu Glitch'i ikinci bir sekmede açın.

Bu codelab'de güvenli, erişilebilir ve kullanımı kolay bir kayıt formunu nasıl oluşturacağınız açıklanmaktadır.

1. Adım: Anlamlı HTML kullanın

Bu adımda, yerleşik tarayıcı özelliklerinden en iyi şekilde yararlanmak için form öğelerini nasıl kullanacağınızı öğreneceksiniz.

• Projeyi düzenlenebilir hale getirmek için Düzenlemek için Remiks'i tıklayın.

index.html ürünündeki formunuzun HTML'sine göz atın. Ad, e-posta adresi gibi girişler olduğunu görürsünüz ve şifre. Her biri bir bölümde yer alır ve her birinin etiketi vardır. Kaydolun düğmesi <button>! Bu codelab'in ilerleyen bölümlerinde tüm bu öğelerin özel güçlerini öğreneceksiniz.

Not: <input> öğelerinin kapanış etiketleri yok. Bunun nedeni, bunların geçersiz (boş) öğeler olmalarıdır: Bu öğelerde içerik bulunmaz. "/" karakterinin sondaki karakteri isteğe bağlıdır: <input> veya <input /> kullanılabilir.

<form action="#" method="post">
        
  <h1>Sign up</h1>
  
  <section>
    <label>Full name</label>
    <input>
  </section>
  
  <section>
    <label>Email</label>
    <input>
  </section>
  
  <section>
    <label>Password</label>
    <input>
  </section>
  
  <button id="sign-up">Sign up</button>
  
</form>

Kayıt formunuzu önizlemek için Uygulamayı Görüntüle'yi tıklayın. Bu sütun, varsayılan tarayıcı stilleri.

• Varsayılan stiller sorunsuz görünüyor mu? Formun daha iyi görünmesi için neyi değiştirirdiniz?
• Varsayılan stiller çalışıyor mu? Formunuzu şu anki haliyle kullanırken ne gibi sorunlarla karşılaşılabilir? Ne? mobil cihazlarda? Ekran okuyucular veya diğer yardımcı teknolojiler için ne olacak?
• Kullanıcılarınız kimler ve hangi cihazları ve tarayıcıları hedefliyorsunuz?

Not: Tarayıcı Varsayılan Stilleri, HTML öğeleri için varsayılan CSS'yi listeler.

Formunuzu test etme

Pek çok donanıma sahip olabilir ve kendi başınıza bir cihaz laboratuvarlarına çeşitli tarayıcılarda, platformlarda ve cihazlarda daha ucuz ve basit yöntemlerle form deneyebilirsiniz:

• Chrome Geliştirici Araçları Cihaz Modu'nu kullanma simüle eder.
• URL'yi bilgisayarınızdan telefonunuza gönderin.
• Bir aralık üzerinde test yapmak için BrowserStack gibi bir hizmet kullanın cihazlar ve tarayıcılar.
• Formu, ChromeVox Chrome uzantısı gibi bir ekran okuyucu aracını kullanarak deneyin.

Uyarı: Küçük sorunlar yüksek hemen çıkma oranlarına neden olabileceğinden ve kullanıcıların hesap oluşturmaktan veya satın alma işlemini tamamlamaktan vazgeçmesine neden olduğundan, sitenizi bir dizi cihaz ve tarayıcıda test etmek özellikle formlar için önemlidir.

Kayıt formunuzu önizlemek için Uygulamayı Görüntüle'yi tıklayın.

• Chrome Geliştirici Araçları Cihaz Modu'nu kullanarak formunuzu farklı cihazlarda deneyin.
• Şimdi formu telefonda veya diğer gerçek cihazlarda açın. Ne gibi farklılıklar görüyorsunuz?

2. adım: Formun daha iyi çalışması için CSS ekleyin

Kaynak kodunuza dönmek için Kaynağı Görüntüle'yi tıklayın.

Şu ana kadar HTML ile ilgili bir sorun yok ancak formunuzun mobil ve masaüstü

Bu adımda, formun kullanımını kolaylaştırmak için CSS ekleyeceksiniz.

Aşağıdaki CSS'nin tamamını kopyalayıp css/main.css dosyasına yapıştırın:

Stil verilmiş kayıt formunuzu görmek için Uygulamayı Göster'i tıklayın. Ardından şuraya dönmek için Kaynağı Görüntüle'i tıklayın css/main.css.

• Bu CSS çeşitli tarayıcılarda ve ekran boyutlarında çalışıyor mu?

• padding, margin ve font-size özelliklerini test cihazlarınıza uyacak şekilde ayarlamayı deneyin.

• CSS, mobil önceliklidir. Medya sorguları en az 400px genişliğindeki görüntü alanlarına CSS kuralları uygulamak için kullanılır ve daha sonra, en az 500px genişliğinde görüntü alanları. Bunlar ayırma noktaları mı? yeterli mi? Formlar için ayrılma noktalarını nasıl seçmelisiniz?

Not: Bu bağlamda görünüm, sayfanız için kullanılabilir görüntüleme alanını ifade eder. Cep telefonlarının görünümü dizüstü bilgisayarlara göre daha küçüktür. Masaüstü monitördeki küçük bir tarayıcı penceresinin görüntüsü ise maksimum ekranı kaplayan tarayıcı penceresinden daha küçüktür.

3. Adım: Kullanıcıların veri girmesine yardımcı olmak için özellikler ekleyin

Bu adımda, tarayıcının depolamasını ve otomatik doldurmasını sağlamak için giriş öğelerinize özellikler eklersiniz form alanı değerlerini girin ve eksik veya geçersiz veri içeren alanları uyarın.

index.html dosyanızı, form kodu aşağıdaki gibi görünecek şekilde güncelleyin:

<form action="#" method="post">
        
  <h1>Sign up</h1>
  
  <section>        
    <label for="name">Full name</label>
    <input id="name" name="name" autocomplete="name" 
           pattern="[\p{L}\.\- ]+" required>
  </section>

  <section>        
    <label for="email">Email</label>
    <input id="email" name="email" autocomplete="username"
           type="email" required>
  </section>
  
  <section>
    <label for="password">Password</label>
    <input id="password" name="password" autocomplete="new-password" 
           type="password" minlength="8" required>
  </section>
  
  <button id="sign-up">Sign up</button>
  
</form>

type değerleri çok işe yarar: * type="password", girildiği sırada metni gizler ve tarayıcının şifre yöneticisi kullanarak güçlü bir şifre önerin. * type="email", temel doğrulama sağlar ve mobil kullanıcıların uygun klavyeye sahip olmasını sağlar. Dene çıkar!

Uygulamayı Görüntüle'yi ve ardından E-posta etiketini tıklayın. Süreç Odak e-postaya taşınır bu giriş, etiketteki e-posta girişinin id değeriyle eşleşen bir for değerine sahip olmasından kaynaklanıyor. Diğer etiketler ve aynı şekilde çalışır. Ekran okuyucular ayrıca etiket (veya etiketin) nasıl odaklanılır? Bunu ChromeVox uzantısını kullanarak deneyebilirsiniz.

Formu boş bir alanla göndermeyi deneyin. Tarayıcı formu göndermiyor ve şunu yapmak istiyor: ve odak noktası haline gelir. Bunun nedeni,require giriş değerleridir. Şimdi, sekiz karakterden kısa bir şifreyle göndermeyi deneyin. Tarayıcı, şifre yeterince uzun değil ve minlength="8" nedeniyle şifre girişine odaklanıyor özelliğini gönderin. Aynı durum pattern (ad girişi için kullanılır) ve diğer doğrulama kısıtlamaları hakkında daha fazla bilgi edinin. Tarayıcı tüm bunları fazladan koda gerek kalmadan otomatik olarak yapar.

Tam ad girişi için autocomplete değeri name kullanılması mantıklı. Peki ya kullanabilirsiniz. * E-posta girişi için autocomplete="username", tarayıcının şifre yöneticisinin verileri depolayacağı anlamına gelir. 'name' yerine e-posta adresi (kullanıcı adı!) kullandığınızdan emin olun. * Şifre için autocomplete="new-password", şifre yöneticisine bu değeri, geçerli sitenin şifresi olarak saklamayı teklif eder. Ardından Oturum açma formunda otomatik doldurma özelliğini etkinleştirmek için autocomplete="current-password" (bunun kayıt formunu kullanabilirsiniz.

Not: Oturum açma formuyla ilgili en iyi uygulamalar'da form tasarımını, düzeni ve erişilebilirliği iyileştirme hakkında daha fazla ipucu bulunur.

4. adım: Kullanıcıların güvenli şifreler girmelerine yardımcı olun

Şu anki formu kullanırken şifre girişiyle ilgili bir sorun fark ettiniz mi?

İki sorun var: * Şifre değerinde kısıtlama olup olmadığını öğrenmenin bir yolu yoktur. * Doğru anlayıp anlamadığınızı kontrol etmek için şifreyi göremiyorsunuz.

Kullanıcıları tahmin yürütmek zorunda bırakmayın!

index.html sitesinin şifre bölümünü aşağıdaki kodla güncelleyin:

<section>
  <label for="password">Password</label>
  <button id="toggle-password" type="button" aria-label="Show password as plain text. 
          Warning: this will display your password on the screen.">Show password</button>
  <input id="password" name="password" type="password" autocomplete="new-password" 
         minlength="8" aria-describedby="password-constraints" required>
  <div id="password-constraints">Eight or more characters.</div>
</section>

Bu sayede, kullanıcıların şifre girmesine yardımcı olacak yeni özellikler eklenir:

• Şifre görünümünü açıp kapatmak için kullanılan bir düğme (aslında yalnızca metin). ( düğme işlevi JavaScript ile eklenecektir.)
• Şifre açma/kapatma düğmesi için bir aria-label özelliği.
• Şifre girişi için aria-describedby özelliği. Ekran okuyucular etiket metnini, giriş türünü (şifre) ve ardından açıklamayı okuyun.

Şifre açma/kapatma düğmesini etkinleştirmek ve kullanıcılara şifre kısıtlamaları hakkında bilgi göstermek için aşağıdaki tüm JavaScript'i kopyalayıp kendi js/main.js dosyanıza yapıştırın.

(CSS, 2. adımdan itibaren zaten uygulanır. Şifre açma/kapatma düğmesinin nasıl olduğunu ve emin olun.)

• Simge, mesaj göndermekten daha mı iyi sonuç verir? şifre görüntüsüne geçilsin mi? İndirim Kullanılabilirlik Testi'ni deneyin küçük bir arkadaş grubu veya iş arkadaşıyla bağ kurabilirsiniz.

• Ekran okuyucuların formlarla çalışma şeklini deneyimlemek için ChromeVox uzantısını yükleyin ve formda gezinin. Formu yalnızca ChromeVox kullanarak doldurabilir misiniz? Yoksa neleri değiştirirdiniz?

Formunuz bu noktada aşağıdaki gibi görünecektir:

Daha ileri gidiyoruz

Bu codelab'de bazı önemli özellikler ele alınmamaktadır:

• Güvenliği ihlal edilmiş şifre olup olmadığı kontrol ediliyor. Güvenliği ihlal edilmiş şifrelere hiçbir zaman izin vermemelisiniz. Güvenliği ihlal edilmiş şifreleri yakalamak için şifre kontrol hizmeti kullanabilirsiniz (ve kullanmanız gerekir). Mevcut bir hizmeti kullanabilir veya hizmeti kendi sunucularınızda kendiniz çalıştırabilirsiniz. Yenilikleri inceleyin. Şifre ekleyin kontrol edebilirsiniz.

• Hizmet Şartları ve gizlilik politikası belgelerinizin bağlantısı: verilerini koruyabilmek.

• Stil ve markalama: Bunların sitenizin geri kalanıyla eşleştiğinden emin olun. Ad ve adres girerken Kullanıcılar ödeme yaparken kendilerini rahat hissetmeli, hâlâ doğru yerde olduklarından emin olmalıdır.

• Analytics ve Gerçek Kullanıcı İzleme: Form tasarımınızın performansı ile kullanılabilirliğinin gerçek kullanıcılar için test edilip izlenebilmesini sağlar.