Kayıt formu en iyi uygulamaları codelab'i

Sam Dutton

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

Bu codelab'de, güvenli, erişilebilir ve kullanımı kolay bir kayıt formu oluşturma hakkında bilgi verilmektedir.

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 ve şifre alanları gösterilir. Her biri bir bölümde yer alır ve etikete sahiptir. Kaydol düğmesi bir <button>. Bu kod laboratuvarının ilerleyen bölümlerinde tüm bu öğelerin özel özelliklerini öğreneceksiniz.

Not: <input> öğelerinde kapatma etiketi yoktur. Bunun nedeni, bunların geçersiz (boş) öğeler olmalarıdır: Bu öğelerde içerik bulunmaz. Boş bir öğenin sonundaki "/" 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>

Kaydolma formunuzu önizlemek için Uygulamayı Görüntüle'yi tıklayın. Bu sütun, varsayılan tarayıcı stilleri dışında bir formun CSS olmadan nasıl görüneceğini gösterir.

• Varsayılan stiller görünüyor mu? Formun daha iyi görünmesi için neyi değiştirirdiniz?
• Varsayılan stiller iyi çalışıyor mu? Formunuzu şu anki haliyle kullanırken ne gibi sorunlarla karşılaşılabilir? Mobil cihazlarda durum nedir? Ekran okuyucular veya diğer destekleyici teknolojiler için ne yapmalıyım?
• 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

Birçok donanıma sahip olabilir ve bir cihaz laboratuvarı oluşturabilirsiniz, ancak formunuzu çeşitli tarayıcı, platform ve cihazlarda denemenin daha ucuz ve kolay yolları vardır:

• Mobil cihazları simüle etmek için Chrome Geliştirici Araçları Cihaz Modu'nu kullanın.
• URL'yi bilgisayarınızdan telefonunuza gönderin.
• Çeşitli cihaz ve tarayıcılarda test yapmak için BrowserStack gibi bir hizmet kullanın.
• ChromeVox Chrome uzantısı gibi bir ekran okuyucu aracı kullanarak formu deneyin.

Uyarı: Sitenizi çeşitli cihaz ve tarayıcılarda test etmek özellikle formlar için önemlidir. Küçük sorunlar yüksek hemen çıkma oranlarına ve kullanıcıların hesap oluşturmaktan veya satın alma işlemini tamamlamaktan vazgeçmesine neden olabilir.

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

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

2. Adım: Formun daha iyi çalışmasını sağlamak 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ünde bir grup kullanıcı için iyi çalıştığından emin olmanız gerekiyor.

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:

Stillendirilmiş kaydolma formunuzu görmek için Uygulamayı Görüntüle'yi tıklayın. Ardından css/main.css sayfasına dönmek için Kaynağı Görüntüle'yi tıklayın.

• Bu CSS, çeşitli tarayıcılar ve ekran boyutlarında çalışır mı?

• padding, margin ve font-size değerlerini 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 ardından en az 500px genişliğindeki görüntü alanlarına tekrar uygulanır. Bu ayrılma noktaları yeterli mi? Formlar için kesme noktalarını nasıl seçmelisiniz?

Not: Bu bağlamda görüntü alanı, sayfanız için kullanılabilen görüntüleme alanı anlamına gelir. Cep telefonlarının görüntü alanı dizüstü bilgisayarlara kıyasla daha küçüktür. Masaüstü monitöründe küçük bir tarayıcı penceresinin görüntü alanı, pencerenin en üst düzeye çıkarılmış hâline kıyasla daha küçüktür.

3. adım: Kullanıcıların veri girmesine yardımcı olacak özellikler ekleyin

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

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ğerlerinin birçok işlevi vardır: * type="password", girilen metni karartır ve tarayıcının şifre yöneticisinin güçlü bir şifre önermesini sağlar. * type="email" temel doğrulama sağlar ve mobil kullanıcıların uygun bir klavye kullanmasını sağlar. Deneyin.

Uygulamayı Görüntüle'yi ve ardından E-posta etiketini tıklayın. Süreç Etiket, e-posta girişinin id değeriyle eşleşen bir for değerine sahip olduğu için odak e-posta girişine taşınır. Diğer etiketler ve girişler de aynı şekilde çalışır. Ekran okuyucular, etiket (veya etiketin ilişkili girişi) odaklandığında da etiket metnini sesli olarak okur. Bunu ChromeVox uzantısını kullanarak deneyebilirsiniz.

Formu boş bir alanla göndermeyi deneyin. Tarayıcı formu göndermez, eksik verileri tamamlamanızı isteerek odağı belirler. Bunun nedeni, tüm girişlere require özelliğini eklemiş olmanızdır. Şimdi de sekiz karakterden kısa bir şifreyle göndermeyi deneyin. Tarayıcı, şifrenin yeterince uzun olmadığı konusunda uyarır ve minlength="8" özelliği nedeniyle şifre girişine odaklanır. Aynı durum pattern (ad girişi için kullanılır) ve diğer doğrulama kısıtlamaları için de geçerlidir. Tarayıcı, tüm bunları ek kod gerekmeden otomatik olarak yapar.

Tam ad girişi için autocomplete değeri name kullanmak mantıklı olsa da diğer girişler için ne yapmalısınız? * E-posta girişi için autocomplete="username", tarayıcının şifre yöneticisinin e-posta adresini, şifreyle birlikte bu kullanıcının "adı" (kullanıcı adı) olarak depolayacağı anlamına gelir. * Şifre için autocomplete="new-password", şifre yöneticisine bu değeri mevcut sitenin şifresi olarak depolamayı teklif etmesi gerektiğini belirten bir ipucudur. Ardından, oturum açma formunda otomatik doldurmayı etkinleştirmek için autocomplete="current-password" simgesini kullanabilirsiniz (bu kayıt formudur).

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 girmesine yardımcı olun

Form şu anda olduğu gibiyken şifre girişiyle ilgili bir sorun fark ettiniz mi?

İki sorun vardır: * Şifre değerinde kısıtlama olup olmadığını öğrenmenin bir yolu yoktur. * Doğru girip girmediğinizi kontrol etmek için şifreyi göremezsiniz.

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

index.html öğesinin ş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 girmelerine yardımcı olacak yeni özellikler eklendi:

• Ş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 eklenir.)
• Ş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ı okur.

Ş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 JavaScript'in tamamını 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 biçimlendirildiğini ve yerleştirildiğini görmek için bu sayfaya göz atın.)

• Şifre görüntülemeyi açma/kapatma için metin yerine simge kullanmak daha iyi olur mu? Küçük bir arkadaş grubu veya iş arkadaşıyla İndirim Kullanılabilirlik Testi'ni deneyin.

• Ekran okuyucuların formlarla nasıl çalıştığını deneyimlemek için ChromeVox uzantısını yükleyin ve formda gezinin. Formu yalnızca ChromeVox'u 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 tespit etmek için şifre kontrol hizmeti kullanabilirsiniz. Mevcut bir hizmeti kullanabilir veya kendi sunucularınızda kendiniz çalıştırabilirsiniz. Yenilikleri inceleyin. Formunuza şifre kontrolü ekleyin.

• Hizmet Şartları ve gizlilik politikası belgelerine bağlantı: Verilerinin güvenliğini nasıl sağladığınızı kullanıcılara açıkça belirtin.

• Stil ve marka öğeleri: Bunların sitenizin geri kalanıyla eşleştiğinden emin olun. Kullanıcılar, ad ve adres girip ödeme yaparken doğru yerde olduklarına güvenerek kendilerini rahat hissetmelidir.

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