Google I/O'ya katıldığınız için teşekkürler! İçerikleri isteğe bağlı olarak izleyin.

Bu sayfa, Cloud Translation API ile çevrilmiştir.

Kayıt formu en iyi uygulamaları codelab'i

Sam Dutton

Güvenli, erişilebilir ve kullanımı daha kolay bir kayıt formu oluşturmayı öğrenin. Son form CodePen'de mevcuttur.

1. Anlamlı HTML kullanma

Yerleşik tarayıcı özelliklerinden en iyi şekilde yararlanmak için form öğelerini nasıl kullanacağınızı öğrenin.

Yeni bir Pen oluşturun.

Aşağıdaki kodu kopyalayıp HTML Düzenleyici'ye yapıştırın.

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

HTML formunu görmek için canlı önizlemeyi tıklayın. Ad, e-posta ve şifre girişleri vardır. Bu formda yalnızca varsayılan tarayıcı CSS'si kullanılır.

Her giriş bir bölümde yer alır ve her birinin etiketi vardır. Kayıt düğmesi, önemli bir <button>. Bu codelab'in ilerleyen bölümlerinde, bu öğelerin tümünün özel güçlerini öğreneceksiniz.

Kendinize şu soruları sorun:

Varsayılan stiller iyi 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 kullanırken hangi sorunlarla karşılaşılabilir? Mobil cihazlarda durum nedir? Ekran okuyucular veya diğer yardımcı 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 cihaz laboratuvarı oluşturabilirsiniz ancak formunuzu çeşitli tarayıcılarda, platformlarda ve cihazlarda denemenin daha ucuz ve basit 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 etmek için BrowserStack gibi bir hizmet kullanın.
ChromeVox Chrome uzantısı gibi bir ekran okuyucu aracı kullanarak formu deneyin.

CodePen'inizin canlı görünümünü açın veya canlı görünümümüzü ziyaret edin. Chrome Geliştirici Araçları'ndaki 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. Formun daha iyi çalışması için CSS ekleme

Şu ana kadar HTML'de bir sorun yok ancak formunuzun mobil ve masaüstü cihazlarda çeşitli kullanıcılar tarafından sorunsuz bir şekilde kullanılabildiğinden emin olmanız gerekiyor.

Bu adımda, formu daha kolay kullanmak için CSS ekleyeceksiniz. Bu CSS'yi kopyalayıp css/main.css dosyasına yapıştırın.

Stil uygulanmış kayıt formunuzu görmek için önizlemeyi tıklayın.

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

padding, margin ve font-size değerlerini test cihazlarınıza uyacak şekilde ayarlamayı deneyin.
CSS, mobil öncelikli olmalıdır. Görüntü alanlarına en az 400px genişliğinde CSS kuralları uygulamak için medya sorgularını, ardından da en az 500px genişliğinde görüntü alanları için tekrar kullanın. Bu kesme noktaları yeterli mi? Formlar için kesme noktalarını nasıl seçmelisiniz?

3. Kullanıcıların veri girmesine yardımcı olacak özellikler ekleme

Tarayıcının form alanı değerlerini depolamasını ve otomatik olarak doldurmasını sağlamak, ayrıca eksik veya geçersiz veriler içeren alanlar konusunda uyarıda bulunmak için giriş öğelerinize özellikler ekleyin.

HTML'nizi, 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 birçok iş yapar:

type="password", girilen metni gizler 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 klavyeyi kullanmasını sağlar.

Önizlemede E-posta etiketini tıklayın. Süreç Etiketin, e-posta girişinin id ile eşleşen bir for değeri olduğundan odak, e-posta girişine taşınıyor. Diğer etiketler ve girişler de aynı şekilde çalışır. Ekran okuyucular, etiket (veya etiketle ilişkili giriş) odaklandığında etiket metnini de sesli okur.

Formu boş bir alanla göndermeyi deneyin. Tarayıcı, formu göndermez, eksik verilerin tamamlanmasını ister ve odak ayarlar. Bunun nedeni, tüm girişlere require özelliğini eklememizdir.

Şimdi sekiz karakterden kısa bir şifreyle göndermeyi deneyin. Tarayıcı, şifrenin yeterince uzun olmadığını belirten bir uyarı gösteriyor ve minlength="8" özelliği nedeniyle şifre girişine odaklanıyor. 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ı otomatik olarak yapar ve ek kod gerektirmez.

Tam ad girişi için autocomplete değeri name kullanmak mantıklı olsa da diğer girişler için ne yapmalıyız?

E-posta girişi için autocomplete="username", tarayıcının şifre yöneticisinin, şifreyle birlikte kullanılacak bu kullanıcının "adı" (kullanıcı adı!) olarak e-posta adresini saklayacağı anlamına gelir.
Şifre için autocomplete="new-password", şifre yöneticisine bu değeri mevcut sitenin şifresi olarak depolamayı teklif etmesi gerektiği konusunda ipucu verir. Daha sonra, oturum açma formunda otomatik doldurmayı etkinleştirmek için autocomplete="current-password" kullanabilirsiniz. Bunun bir kayıt formu olduğunu unutmayın.

4. Kullanıcıların güvenli şifreler girmesine yardımcı olma

Şifre girişiyle ilgili bir sorun fark ettiniz mi? İki sorun vardır:

Şifre değeriyle ilgili kısıtlamalar olup olmadığını bilmenin bir yolu yoktur.
Doğru şifreyi girip girmediğinizi kontrol etmek için şifreyi göremezsiniz.

Kullanıcıları tahmin etmeye zorlamayın. index.html ş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 displays your password on the screen.">
  Show password</button>
  <input id="password" name="password" type="password" minlength="8"
  autocomplete="new-password" aria-describedby="password-constraints" required>
  <div id="password-constraints">Eight or more characters.</div>
</section>

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

Şifre gösterimini açıp kapatmak için kullanılan bir düğme (aslında sadece metin). (Düğme işlevi JavaScript ile eklenecektir.)
Şifre değiştirme düğmesi için 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ı hakkında bilgi göstermek için JavaScript'i kopyalayın ve JavaScript düzenleyicisine yapıştırın.

Şifre gösterimini açıp kapatmak için simge kullanmak metin kullanmaktan daha mı iyi olur? Küçük bir arkadaş veya iş arkadaşı grubuyla indirimli kullanılabilirlik testi yapmayı 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? Değilse neyi değiştirirdiniz?

Daha fazlasını yapın

Bu codelab'de birkaç önemli özellik 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 (ve kullanmalısınız).
Hizmet Şartları ve gizlilik politikası belgelerinizin bağlantısını ekleyin. Kullanıcılara verilerini nasıl koruduğunuzu net bir şekilde açıklayın.
Formlarınızın stilini ve markasını, sitenizin geri kalanıyla eşleşecek şekilde güncelleyin. Bu sayede kullanıcılar, ad ve adres girerken, özellikle de ödeme yaparken doğru yerde olduklarından emin olabilir.
Analiz ve gerçek kullanıcı izleme ekleyin. 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ğlayın.