Kayıt formu en iyi uygulamaları codelab'i

Kişi adı

Bu codelab'de güvenli, erişilebilir ve kullanımı kolay bir kayıt formunun nasıl oluşturulacağı gösterilmektedir.

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üzenlenecek remiks'i tıklayın.

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

<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, varsayılan tarayıcı stilleri dışında CSS kullanılmamış bir formun nasıl göründüğünü gösterir.

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

Formunuzu test etme

Çok sayıda donanım edinebilir ve bir cihaz laboratuvarı oluşturabilirsiniz. Ancak formunuzu çeşitli tarayıcı, platform ve cihazlarda denemenin daha ucuz ve daha basit yolları vardır:

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 telefonda veya diğer gerçek cihazlarda formu açın. Ne gibi farklar 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 herhangi bir sorun yok, ancak formunuzun mobilde ve masaüstünde bir dizi kullanıcı için düzgün ç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 tümünü kopyalayıp css/main.css dosyasına yapıştırın:

Stili ayarlanmış kayıt formunuzu görmek için Uygulamayı Görüntüle'yi tıklayın. Ardından css/main.css sitesine dönmek için Kaynağı Görüntüle'yi tıklayın.

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

  • 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 ve ardından en az 500px genişliğindeki görüntü alanlarına yönelik CSS kuralları uygulamak için kullanılır. Bu ayırma noktaları yeterli mi? Formlar için ayrılma noktalarını nasıl seçmelisiniz?

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 depolamasını ve otomatik olarak doldurmasını sağlamak ve eksik veya geçersiz veri içeren alanlar konusunda uyarıda bulunmak için giriş öğelerinize özellikler eklersiniz.

index.html dosyanızı form kodu aşağıdaki gibi olacak ş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", girildikleri metni gizler ve tarayıcının şifre yöneticisinin güçlü bir şifre önermesine olanak tanır. * type="email", temel doğrulama sağlar ve mobil cihaz kullanıcılarının uygun bir klavyeye sahip olmasını sağlar. Deneyin!

Uygulamayı Görüntüle'yi ve ardından E-posta etiketini tıklayın. Ne olur? Etikette, e-posta girişindeki id ile eşleşen bir for değeri olduğundan odak e-posta girişine taşınır. Diğer etiketler ve girişler de aynı şekilde çalışır. Ekran okuyucular, etikete (veya etiketin ilişkili girişine) odaklanıldığında etiket metnini sesli olarak okur. Bunu ChromeVox uzantısını kullanarak deneyebilirsiniz.

Formu boş bir alanla göndermeyi deneyin. Tarayıcı formu göndermez ve eksik verileri tamamlamak isteyip odağı ayarlar. Bunun nedeni, tüm girişlere require özelliğini eklemiş olmanızdır. Şimdi, sekiz karakterden kısa bir şifreyle göndermeyi deneyin. Tarayıcı, şifrenin yeterince uzun olmadığı konusunda uyarır ve minlength="8" özelliği nedeniyle odağı şifre girişine ayarlar. 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ı, fazladan koda gerek kalmadan otomatik olarak yapar.

Tam ad girişi için autocomplete değerini name kullanmak mantıklıdır. Peki ya diğer girişler? * E-posta girişi için autocomplete="username" kullanıldığında, tarayıcının şifre yöneticisi, e-posta adresini şifreyle birlikte kullanılacak "name" (kullanıcı adı!) olarak saklar. * Şifre için autocomplete="new-password", şifre yöneticisine bu değeri mevcut sitenin şifresi olarak saklaması için bir ipucu verir. Daha sonra, autocomplete="current-password" kullanarak bir oturum açma formunda otomatik doldurmayı etkinleştirebilirsiniz (bunun sign-up formu olduğunu unutmayın).

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

Bu formdaki haliyle şifre girişinde bir sorun fark ettiniz mi?

İki sorun vardır: * Şifre değerinde kısıtlamalar olup olmadığını bilmenin bir yolu yoktur. * Şifreyi göremiyorsunuz. Doğru yanıt verip vermediğinizi kontrol edebilirsiniz.

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

index.html tarayıcısının ş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 güncellemeyle birlikte, kullanıcıların şifre girmelerine yardımcı olacak yeni özellikler eklenmiştir:

  • Şifre görüntülemeyi açıp kapatmak için kullanılan bir düğme (aslında yalnızca metin). (Düğme işlevi JavaScript ile eklenecektir.)
  • Şifre değiştirme 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 değiştirme düğmesini etkinleştirmek ve kullanıcılara şifre kısıtlamalarıyla ilgili bilgileri 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 mevcuttur. Şifre değiştirme düğmesinin nasıl stilize ve yerleştirildiğini görmek için videoya bakın.)

  • Şifre görüntüsünü açmak/kapatmak için metin yerine bir simge kullanmak daha mı iyi olur? Küçük bir arkadaş grubuyla veya iş arkadaşlarınızla İndirimli 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 kullanarak doldurabilir misiniz? Yanıtınız hayırsa neyi değiştirirdiniz?

Formunuz bu noktada şu şekilde görünmelidir:

Daha da ileri

Bu codelab'de bazı önemli özellikler ele alınmamıştır:

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

  • Hizmet Şartları ve gizlilik politikası belgelerinizin bağlantısını vererek kullanıcılara verilerini nasıl koruduğunuzu açıkça belirtin.

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

  • Analizler ve gerçek kullanıcıları izleme: Form tasarımınızın performans ve kullanılabilirliğinin gerçek kullanıcılar için test edilip izlenmesine olanak tanıyın.