Kayıt formu en iyi uygulamaları codelab'i

Sam Dutton

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 oluştur'u tıklayın.

index.html adresindeki formunuzun HTML'sine bakı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.

<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 resimde, varsayılan tarayıcı stilleri dışında CSS'nin olmadığı bir formun görünümü gösterilmektedir.

  • Varsayılan stiller görünüyor mu? Formun daha iyi görünmesi için neleri değiştirirdiniz?
  • Varsayılan stiller çalışıyor mu? Formunuzu olduğu gibi kullandığınızda 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?

Formunuzu test etme

Çok sayıda donanım satın alıp bir cihaz laboratuvarı oluşturabilirsiniz ancak formunuzu çeşitli tarayıcılarda, platformlarda ve cihazlarda denemenin daha ucuz ve basit yolları vardır:

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.
  • Ardından formu bir telefonda veya 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 Kaynak Kodu Görüntüle'yi tıklayın.

HTML'de şu ana kadar bir sorun yok ancak formunuzun mobil cihazlarda ve masaüstünde çeşitli kullanıcılar için iyi çalıştığından emin olmanız gerekiyor.

Bu adımda, formun daha kolay kullanılmasını sağlamak 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 cihazlara öncelik verir. 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?

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 kodunun şu şekilde görüneceği ş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ğundan 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ı ister ve odağı ayarlar. 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 kaydolma formu olduğunu unutmayın).

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ğeriyle ilgili 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 etmeye zorlamayı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üntülemeyi açma/kapatma düğmesi (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 bir 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 uygulanmıştır. Şifre açma/kapatma düğmesinin nasıl biçimlendirildiğini ve konumlandırıldığını görmek için bir 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ş veya iş arkadaşı grubuyla indirimli kullanılabilirlik testini 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? Aksi takdirde neyi değiştirmek istersiniz?

Bu aşamada formunuz aşağıdaki gibi görünmelidir:

Daha ileri gitme

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

  • Güvenliği ihlal edilmiş şifreleri kontrol etme. 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ınız ve gizlilik politikası belgelerinizin bağlantısını ekleyin: Kullanıcılara verilerini nasıl koruduğunuzu 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.