Bu codelab'de güvenli, erişilebilir ve kullanımı kolay bir kayıt formunu nasıl oluşturacağınız açıklanmaktadır.
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 adresi gibi girişler olduğunu görürsünüz
ve şifre. Her biri bir bölümde yer alır ve her birinin etiketi vardır. Kaydolun 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 sütun, varsayılan tarayıcı stilleri.
- Varsayılan stiller sorunsuz görünüyor mu? Formun daha iyi görünmesi için neyi değiştirirdiniz?
- Varsayılan stiller çalışıyor mu? Formunuzu şu anki haliyle kullanırken ne gibi sorunlarla karşılaşılabilir? Ne? mobil cihazlarda? Ekran okuyucular veya diğer yardımcı teknolojiler için ne olacak?
- Kullanıcılarınız kimler ve hangi cihazları ve tarayıcıları hedefliyorsunuz?
Formunuzu test etme
Pek çok donanıma sahip olabilir ve kendi başınıza bir cihaz laboratuvarlarına çeşitli tarayıcılarda, platformlarda ve cihazlarda daha ucuz ve basit yöntemlerle form deneyebilirsiniz:
- Chrome Geliştirici Araçları Cihaz Modu'nu kullanma simüle eder.
- URL'yi bilgisayarınızdan telefonunuza gönderin.
- Bir aralık üzerinde test yapmak için BrowserStack gibi bir hizmet kullanın cihazlar ve tarayıcılar.
- Formu, ChromeVox Chrome uzantısı gibi bir ekran okuyucu aracını kullanarak 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 formu telefonda veya diğer gerçek cihazlarda açın. Ne gibi farklılıklar 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 bir sorun yok ancak formunuzun mobil ve masaüstü
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:
Stil verilmiş kayıt formunuzu görmek için Uygulamayı Göster'i tıklayın. Ardından şuraya dönmek için Kaynağı Görüntüle'i tıklayın
css/main.css
.
Bu CSS çeşitli tarayıcılarda ve ekran boyutlarında çalışıyor mu?
padding
,margin
vefont-size
özelliklerini 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 daha sonra, en az500px
genişliğinde görüntü alanları. Bunlar ayırma noktaları mı? yeterli mi? Formlar için ayrılma noktalarını nasıl seçmelisiniz?
3. Adım: Kullanıcıların veri girmesine yardımcı olmak için özellikler ekleyin
Bu adımda, tarayıcının depolamasını ve otomatik doldurmasını sağlamak için giriş öğelerinize özellikler eklersiniz form alanı değerlerini girin ve eksik veya geçersiz veri içeren alanları uyarın.
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ğerleri çok fayda sağlar:
* type="password"
, girildiği sırada metni gizler ve tarayıcının
şifre yöneticisi kullanarak güçlü bir şifre önerin.
* type="email"
, temel doğrulama sağlar ve mobil kullanıcıların uygun klavyeye sahip olmasını sağlar. Dene
çıkar!
Uygulamayı Görüntüle'yi ve ardından E-posta etiketini tıklayın. Süreç Odak e-postaya taşınır
bu giriş, etiketteki e-posta girişinin id
değeriyle eşleşen bir for
değerine sahip olmasından kaynaklanıyor. Diğer etiketler ve
aynı şekilde çalışır. Ekran okuyucular ayrıca etiket (veya etiketin)
nasıl odaklanılır? Bunu ChromeVox uzantısını kullanarak deneyebilirsiniz.
Formu boş bir alanla göndermeyi deneyin. Tarayıcı formu göndermiyor ve şunu yapmak istiyor:
ve odak noktası haline gelir. Bunun nedeni,require
giriş değerleridir. Şimdi, sekiz karakterden kısa bir şifreyle göndermeyi deneyin. Tarayıcı,
şifre yeterince uzun değil ve minlength="8"
nedeniyle şifre girişine odaklanıyor
özelliğini gönderin. Aynı durum pattern
(ad girişi için kullanılır) ve diğer
doğrulama kısıtlamaları hakkında daha fazla bilgi edinin.
Tarayıcı tüm bunları fazladan koda gerek kalmadan otomatik olarak yapar.
Tam ad girişi için autocomplete
değeri name
kullanılması mantıklı. Peki ya
kullanabilirsiniz.
* E-posta girişi için autocomplete="username"
, tarayıcının şifre yöneticisinin verileri depolayacağı anlamına gelir.
'name' yerine e-posta adresi (kullanıcı adı!) kullandığınızdan emin olun.
* Şifre için autocomplete="new-password"
, şifre yöneticisine
bu değeri, geçerli sitenin şifresi olarak saklamayı teklif eder. Ardından
Oturum açma formunda otomatik doldurma özelliğini etkinleştirmek için autocomplete="current-password"
(bunun
kayıt formunu kullanabilirsiniz.
4. adım: Kullanıcıların güvenli şifreler girmelerine yardımcı olun
Şu anki formu kullanırken şifre girişiyle ilgili bir sorun fark ettiniz mi?
İki sorun var: * Şifre değerinde kısıtlama olup olmadığını öğrenmenin bir yolu yoktur. * Doğru anlayıp anlamadığınızı kontrol etmek için şifreyi göremiyorsunuz.
Kullanıcıları tahmin yürütmek zorunda bırakmayın!
index.html
sitesinin ş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 girmesine yardımcı olacak yeni özellikler eklenir:
- Ş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 eklenecektir.)
- Ş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ı okuyun.
Ş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 tüm JavaScript'i 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 olduğunu ve emin olun.)
Simge, mesaj göndermekten daha mı iyi sonuç verir? şifre görüntüsüne geçilsin mi? İndirim Kullanılabilirlik Testi'ni deneyin küçük bir arkadaş grubu veya iş arkadaşıyla bağ kurabilirsiniz.
Ekran okuyucuların formlarla çalışma şeklini deneyimlemek için ChromeVox uzantısını yükleyin ve formda gezinin. Formu yalnızca ChromeVox 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 yakalamak için şifre kontrol hizmeti kullanabilirsiniz (ve kullanmanız gerekir). Mevcut bir hizmeti kullanabilir veya hizmeti kendi sunucularınızda kendiniz çalıştırabilirsiniz. Yenilikleri inceleyin. Şifre ekleyin kontrol edebilirsiniz.
Hizmet Şartları ve gizlilik politikası belgelerinizin bağlantısı: verilerini koruyabilmek.
Stil ve markalama: Bunların sitenizin geri kalanıyla eşleştiğinden emin olun. Ad ve adres girerken Kullanıcılar ödeme yaparken kendilerini rahat hissetmeli, hâlâ doğru yerde olduklarından emin olmalıdır.
Analytics ve Gerçek Kullanıcı İzleme: Form tasarımınızın performansı ile kullanılabilirliğinin gerçek kullanıcılar için test edilip izlenebilmesini sağlar.