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:
- Mobil cihazları simüle etmek için Chrome Geliştirici Araçları Cihaz Modu'nu kullanın.
- Bilgisayarınızdan telefonunuza URL'yi 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.
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
vefont-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 az500px
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.