Güvenli, erişilebilir ve kullanımı kolay oturum açma formları oluşturmak için platformlar arası tarayıcı özelliklerini kullanın.
Kullanıcıların sitenize giriş yapması gerekiyorsa oturum açma formu tasarımı kritik önem taşır. Bu durum özellikle kötü bağlantısı olan, mobil cihaz kullanan veya ya da stres altındasınız. Kötü tasarlanmış oturum açma formları, yüksek hemen çıkma oranları sağlar. Her hemen çıkma, kayıp ve rahatsız olmuş bir kullanıcı anlamına gelebilir fırsat.
Aşağıda, en iyi uygulamaların tümünü gösteren basit bir oturum açma formu örneği verilmiştir:
Yapılacaklar listesi
- Anlamlı HTML öğeleri kullanın:
<form>
,<input>
,<label>
ve<button>
. - Her girişi bir
<label>
ile etiketleyin. - Yerleşik tarayıcıya erişmek için öğe özelliklerini kullanın
özellikler:
type
,name
,autocomplete
,required
. name
veid
özellikleri için değişmeyen sabit değerler verin veya web sitesi dağıtımları arasında geçiş yapar.- Oturum açma işlemini kendi <form> dosyasına ekleyin öğesi.
- Form gönderme işleminin başarılı olduğundan emin olun.
- Şunlar için
autocomplete="new-password"
veid="new-password"
tuşlarını kullanın: şifre girişini kayıt formuna, yeni şifre için ise şifre sıfırlama formuna yazın. autocomplete="current-password"
veid="current-password"
öğelerini kullanın giriş şifresi girmeniz gerekir.- Şifreyi göster işlevini sağlayın.
aria-label
vearia-describedby
özelliklerini kullanın: şifre girişleri.- Girişleri iki katına çıkarmayın.
- Formları, mobil klavyenin girişleri veya klavyeyi kapatmayacağı şekilde tasarlayın düğmeleriyle kullanılabilir.
- Formların mobil cihazlarda kullanılabildiğinden emin olun: okunabilir metin, ve girişlerin ve düğmelerin dokunma hedefi olarak çalışacak kadar büyük olduğundan emin olun.
- Kaydolma ve oturum açma sayfalarınızda markayı ve stili koruyun.
- Laboratuvarda ve sahada test etme: Sayfa analizleri oluşturma, ve kullanıcı odaklı performans ölçümünü, size özel olarak devam ediyor.
- Tarayıcılar ve cihazlar arasında test edin: Formun davranışı değişiklik gösterir önemli ölçüde artış gösterdi.
Anlamlı HTML kullanın
İş için oluşturulan öğeleri kullanın: <form>
, <label>
ve <button>
. Bunlar,
yerleşik tarayıcı işlevlerini kullanabilir, erişilebilirliği iyileştirebilir ve
işaretleme.
<form>
hareketini kullanın
Girişleri bir <div>
içinde sarmalamak ve giriş verilerini işlemek isteyebilirsiniz.
JavaScript ile gönderim olabilir. Düz eski bir model kullanmak genellikle daha iyidir
<form>
öğesine dokunun. Bu, sitenizi ekran okuyucular ve diğer yardımcı kullanıcılar için erişilebilir hale getirir
bir dizi yerleşik tarayıcı özelliği sağlar, ayrıca tarayıcı oluşturma
tarayıcılarla oturum açmanızı sağlar ve tarayıcıdaki bağlantı,
JavaScript başarısız oluyor.
<label>
hareketini kullanın
Bir girişi etiketlemek için <label>
kullanın!
<label for="email">Email</label>
<input id="email" …>
İki neden:
- Bir etikete dokunmak veya etiketi tıklamak odağı ilgili etikete taşır. Bir etiketi
girişin
name
veyaid
değerleriyle etiketinfor
özelliği kullanılarak giriş yapılır. - Ekran okuyucular, etiket veya etiket girişi alındığında etiket metnini duyurur odaklanacağız.
Yer tutucuları giriş etiketleri olarak kullanmayın. Kullanıcılar, büyük önem taşıyan metin girmeye başladıklarında, özellikle de çok fazla dikkatimi dağıtıyor ("E-posta adresi mi, telefon numarası mı yoksa hesap mı giriyordum? kimliği mi?"). Yer tutucularla ilgili daha pek çok olası sorun vardır: Yer Tutucuyu Kullanma Attribute (Özellik) ve Form Alanlarındaki Yer Tutucular Aşağıdaki durumlarda zararlıdır: ikna edemedi.
Etiketlerinizi girişlerinizin üzerine yerleştirmeniz muhtemelen en iyisidir. Böylece kullanıcılar tasarımına sahip. Google AI'a göre araştırma, kullanıcılar tarafından daha hızlı tarama yapılmasını sağlar. Tam genişlikte etiketler ve girişler alırsınız ve etiketi ve giriş genişliğini etiket metnine sığacak şekilde ayarlamanız gerekmez.
![Mobil cihazda form girişi etiketinin konumunu gösteren ekran görüntüsü: girişin yanında ve girişin üzerinde.](https://web.dev/static/articles/sign-in-form-best-practices/image/screenshot-showing-form-i-8eaa2616f31e3.png?hl=tr)
Şu cihazda label-position arızasını kendi gözlerinizle görün.
<button>
hareketini kullanın
<button>
kullanın
kontrol edin! Düğme öğeleri erişilebilir davranış ve yerleşik form sağlar
kolayca şekillendirilebilir ve gönderim işlevlerine dahildir. Tek bir cümlenin içinde
<div>
veya düğme gibi görünen başka bir öğe kullanarak.
Gönder düğmesinin ne işe yaradığını belirttiğinden emin olun. Örnekler arasında Hesap oluşturma veya Gönder veya Başlat'ı değil, oturum açın.
Form gönderiminin başarılı olduğundan emin olun
Şifre yöneticilerinin bir formun gönderildiğini anlamalarına yardımcı olun. İki tür şu yolları izleyebilirsiniz:
- Farklı bir sayfaya gidin.
History.pushState()
veyaHistory.replaceState()
ile navigasyon emülasyonu şifre formunu kaldırın.
XMLHttpRequest
veya fetch
isteğiyle oturum açma işleminin başarılı olduğundan emin olun
yanıtta bildirilecek ve DOM'nin dışına da çıkarılarak işlenecektir.
kullanıcıya başarılı olduğu anlamına gelir.
Kullanıcı dokunduktan veya tıkladıktan sonra Oturum aç düğmesini devre dışı bırakmayı düşünün somut olarak ortaya koyar. Birçok kullanıcı düğmeleri birden çok kez tıklar hızlı ve duyarlı sitelerde bile kullanılabilir. Bu da etkileşimleri yavaşlatır eklenir.
Öte yandan, kullanıcı girişi beklerken form gönderimini devre dışı bırakmayın. Örneğin, Kullanıcılar müşterilerini girmediyse Oturum aç düğmesini devre dışı bırakma PIN'i seçin. Kullanıcılar formda bir şeyi gözden kaçırabilir ve daha sonra (devre dışı) Oturum aç düğmesi ve çalışmadığını düşünüyor. En azından, form göndermeyi devre dışı bırakmalı, kullanıcıya form gönderimi sırasında devre dışı düğmesini tıklayın.
Girişleri iki katına çıkarma
Bazı siteler, kullanıcıları iki kez e-posta adresi veya şifre girmeye zorlar. Bu, projenin birkaç kullanıcı için hata oluştu. Ancak tüm kullanıcılar için ek iş yüküne neden olur ve kullanıcının vazgeçme fiyat. İki kez sormak, tarayıcıların e-posta adreslerini otomatik olarak doldurduğu veya güçlü şifreler önerir. Kullanıcıların e-posta adreslerini onaylamalarını sağlamak daha iyidir (yine de bunu yapmanız gerekecektir) ve hesap bilgilerini sıfırlamalarını parolayı girin.
Öğe özelliklerinden en iyi şekilde yararlanma
Asıl önemli olan da burasıdır! Tarayıcılar, giriş öğesi özelliklerini kullanan birçok yararlı yerleşik özelliğe sahiptir.
Şifreleri gizli tutun, ancak isterlerse kullanıcıların bunları görmelerini sağlayın
Şifre girişlerinde, şifre metnini gizlemek vetype="password"
şifre için olduğunu anlar. (Tarayıcıların
giriş rollerini anlamak ve karar vermek için çeşitli teknikler
şifreleri kaydetmeyi teklif edip etmeyeceğini kontrol edin.)
Kullanıcıların şunları kontrol edebilmesi için Şifreyi göster açma/kapatma düğmesi eklemeniz gerekir: metin girmelidir ve Şifremi unuttum bağlantısını eklemeyi unutmayın. Görüntüleyin Şifre görüntülemeyi etkinleştir.
![Şifreyi göster simgesini gösteren Google oturum açma formu.](https://web.dev/static/articles/sign-in-form-best-practices/image/google-sign-form-showing-c9486bea5e685.png?hl=tr)
Mobil kullanıcılara doğru klavyeyi verin
Mobil kullanıcılara uygun bir klavye sunmak için <input type="email">
tarayıcı tarafından temel yerleşik e-posta adresi doğrulamasını etkinleştirin... JavaScript olmadan
gerekli!
E-posta adresi yerine telefon numarası kullanmanız gerekirse <input
type="tel">
uygulaması mobil cihazda telefon tuş takımını etkinleştirir. Ayrıca şunu da kullanabilirsiniz:
Gerektiğinde inputmode
özelliği: inputmode="numeric"
, PIN için idealdir
numaraları'na dokunun. Hakkında Bilmek İstediğiniz Her Şey
inputmode
daha fazla ayrıntı içeriyor.
Mobil klavyenin Oturum aç düğmesini engellemesini engelleme
Dikkatli olmazsanız formunuzun üzerini mobil klavyeler kapatabilir veya Oturum aç düğmesinin çalışmasını kısmen engelleyebilir. Kullanıcılar daha önce vazgeçebilir fark etmeye başladım.
![Android telefondaki bir oturum açma formunun iki ekran görüntüsü: Biri, Gönder düğmesinin telefon klavyesi tarafından nasıl engellendiğini gösteriyor.](https://web.dev/static/articles/sign-in-form-best-practices/image/two-screenshots-a-sign-084751e480027.png?hl=tr)
Mümkünse oturum açma sayfanızın üst kısmında yalnızca e-posta/telefon ve şifre girişlerini ve Oturum aç düğmesini görüntüleyerek bunu önleyin. Aşağıya diğer içerikleri ekleyin.
![Android telefondaki oturum açma formunun ekran görüntüsü: Telefon klavyesi, Oturum aç düğmesini kapatmıyor.](https://web.dev/static/articles/sign-in-form-best-practices/image/screenshot-a-sign-form-83485069857ef.png?hl=tr)
Çeşitli cihazlarda test edin
Hedef kitleniz için çeşitli cihazlarda test yapmanız ve gerekli ayarlamaları yapmanız gerekir. buna göre hazırlar. Tarayıcı Yığını, açık kaynak için ücretsiz test olanağı sunar gerçek zamanlı çalışan kontrol edin.
![iPhone 7, 8 ve 11'de oturum açma formunun ekran görüntüleri. iPhone 7 ve 8'de Oturum aç düğmesi telefon klavyesi tarafından gizleniyor, ancak iPhone 11'de bu durum geçerli değil.](https://web.dev/static/articles/sign-in-form-best-practices/image/screenshots-a-sign-form-7ab582516302b.png?hl=tr)
İki sayfa kullanmayı düşünün
Bazı siteler (Amazon ve eBay dahil), e-posta/telefon ve şifre eklemeniz gerekir. Bu yaklaşım aynı zamanda kullanıcıya tek seferde yalnızca bir görev verilir.
![Amazon web sitesindeki bir oturum açma formunun ekran görüntüsü: İki ayrı "sayfada" e-posta/telefon ve şifre.](https://web.dev/static/articles/sign-in-form-best-practices/image/screenshot-a-sign-form-ade5c293b1904.png?hl=tr)
İdeal olarak, bunun tek bir <form> ile uygulanması gerekir. JavaScript kullan başlangıçta yalnızca e-posta girişini görüntüleyin, ardından bunu gizleyin ve şifre girişini gösterin. Kullanıcıyı, e-posta adresini girmesi ile yeni bir sayfaya gitmesi için zorlamanız gerekiyorsa ikinci sayfadaki formda e-posta değerini kullanarak şifre yöneticilerinin doğru değeri depolamasını sağlar. Şifre Chromium'un Anladığı Form Stilleri kod örneğidir.
Kullanıcıların verileri tekrar girmesini önlemeye yardımcı olur
Tarayıcıların verileri doğru şekilde depolamasına ve girişleri otomatik olarak doldurmasına yardımcı olabilirsiniz. Böylece kullanıcılar bunu yapmayabilir. e-posta ve şifre değerlerini girmeniz gerekiyor. Bu, özellikle de Bu özellik, yüksek vazgeçme oranları alan e-posta girişleri için son derece önemlidir.
Bunun iki bölümü vardır:
autocomplete
,name
,id
vetype
özellikleri, tarayıcıların girişlerin rolünü değil, daha sonra otomatik doldurma için kullanılabilecek verileri depolamasını sağlar. Modern tarayıcılarda, verilerin otomatik doldurma için depolanmasına izin vermek amacıyla sabit birname
veyaid
değerine sahiptir (her sayfa yüklemesinde veya site dağıtımı) ve <form> içinde olması gerekir.submit
düğmesiyle.autocomplete
özelliği, saklı tutar.
E-posta girişleri için username
tanındığından autocomplete="username"
kullanın
modern tarayıcılarda şifre yöneticileri tarafından kullanılabilir. type="email"
adresini kullanmanız gerekse bile
id="email"
ve name="email"
alanlarını kullanmak da isteyebilirsiniz.
Şifre girişleri için tarayıcılara yardımcı olmak amacıyla uygun autocomplete
ve id
değerlerini kullanın
Yeni ve mevcut şifreleri birbirinden ayırt edebilirsiniz.
Yeni bir şifre için autocomplete="new-password"
ve id="new-password"
adreslerini kullanın
- Kayıt sırasında şifre girişi için
autocomplete="new-password"
veid="new-password"
kullanın şifre değiştirme formundaki yeni şifreyi kullanabilirsiniz.
Mevcut bir şifre için autocomplete="current-password"
ve id="current-password"
değerlerini kullanın
- Şifre girişi için
autocomplete="current-password"
veid="current-password"
kullanın şifre değiştirme formunda kullanıcının eski şifresinin girilmesini sağlayabilirsiniz. Bu sayede geçerli şifreyi kullanmasını istediğiniz bir tarayıcı kullanın.
Kayıt formu için:
<input type="password" autocomplete="new-password" id="new-password" …>
Oturum açmak için:
<input type="password" autocomplete="current-password" id="current-password" …>
Şifre yöneticilerini destekleme
Farklı tarayıcılar, e-posta otomatik doldurma ve şifre önerilerini kısmen işliyor farklı olsa da etkileri hemen aynıdır. Masaüstünde Safari 11 ve sonraki sürümlerde şifre yöneticisi ve ardından biyometri varsa kimlik doğrulama (parmak izi veya yüz tanıma) kullanılır.
![Masaüstünde Safari'de oturum açma işleminin üç aşamasının ekran görüntüleri: şifre yöneticisi, biyometrik kimlik doğrulama, otomatik doldurma.](https://web.dev/static/articles/sign-in-form-best-practices/image/screenshots-three-stages-b113ab6379e04.png?hl=tr)
Masaüstündeki Chrome, e-posta önerilerini görüntüler, şifre yöneticisini gösterir ve şifreyi otomatik olarak doldurur.
![Masaüstü bilgisayarlardaki Chrome'da oturum açma işleminin dört aşamasının ekran görüntüleri: e-posta tamamlama, e-posta önerisi, şifre yöneticisi, seçimde otomatik doldurma.](https://web.dev/static/articles/sign-in-form-best-practices/image/screenshots-four-stages-da9ebdff879c3.png?hl=tr)
Tarayıcı şifresi ve otomatik doldurma sistemleri basit değildir. Bu dönüşüm için algoritmalar Bu nedenle, tahmin yürütme, saklama ve görüntüleme yöntemleri standartlaştırılmamıştır. platformdan platforma. Örneğin, Hidde de Vries: "Firefox'un şifre yöneticisi, buluşsal yöntemlerini tarif sistemi."
Otomatik Doldurma: Web geliştiricilerin bilmesi gerekenler
şunları yapmayın:
name
ve autocomplete
kullanımıyla ilgili çok daha fazla bilgiye sahip. HTML
özellikler
59 olası değerin tümünü listeler.
Güçlü bir şifre önermek için tarayıcıyı etkinleştirin
Modern tarayıcılar, şifre yöneticisi kullanıcı arayüzünün ve giriş bilgilerinin ne zaman gösterileceğine güçlü bir şifre önerir.
Safari'nin masaüstünde bunu nasıl yaptığına bakalım.
![Masaüstündeki Firefox şifre yöneticisinin ekran görüntüsü.](https://web.dev/static/articles/sign-in-form-best-practices/image/screenshot-firefox-passw-00fc03de0450e.png?hl=tr)
(Güçlü bir benzersiz şifre önerisi, Safari'nin 12.0 sürümünden itibaren kullanılmaktadır.)
Yerleşik tarayıcı şifresi oluşturma araçları, kullanıcıların ve geliştiricilerin şifrenin ne olduğunu anlamaya çalışın düşünülebilir. Tarayıcılar, öğeleri güvenli bir şekilde depolayabildiği için ve gerektiği şekilde otomatik olarak doldurma özelliği sayesinde, kullanıcıların ezberlemeleri gerekmez. veya şifre girin. Kullanıcıları yerleşik tarayıcıdan yararlanmaya teşvik etme şifre oluşturma araçları aynı zamanda bu kişilerin benzersiz, güçlü bir şifre bir şifreyi daha sık kullanırsınız ve ihlal edilmiş olabilir.
Kullanıcıların yanlışlıkla eksik giriş yapmalarını önlemeye yardımcı olun
Hem e-posta hem de şifre alanlarına required
özelliğini ekleyin.
Modern tarayıcılar, eksik veriler için otomatik olarak istem verir ve odağı ayarlar.
JavaScript gerekmez!
![Masaüstü Firefox ve Android için Chrome'da "Lütfen bu alanı doldurun" ifadesinin gösterildiği ekran görüntüsü istemini girin.](https://web.dev/static/articles/sign-in-form-best-practices/image/screenshot-desktop-firef-eb20cb4ab2ed6.png?hl=tr)
Parmaklar ve parmaklar için tasarım
Giriş öğeleriyle ilgili hemen her şey için varsayılan tarayıcı boyutu ve düğmeler özellikle cep telefonunda çok küçük. Bu çok bariz bir şey gibi görünebilir, ancak oturum açma formlarıyla ilgili yaygın bir sorundur.
Girişlerin ve düğmelerin yeterince büyük olduğundan emin olun
Girişler ve düğmeler için varsayılan boyut ve dolgu, masaüstünde çok küçük ve daha da kötü hale getiriyor.
![Masaüstü için Chrome ve Android için Chrome'daki stilsiz formun ekran görüntüsü.](https://web.dev/static/articles/sign-in-form-best-practices/image/screenshot-unstyled-form-ddf413b33ec2b.png?hl=tr)
Android erişilebilirlik özelliklerine göre rehberlik dokunmatik ekran nesneleri için önerilen hedef boyut 7-10 mm'dir. Apple arayüzü yönergelere göre 48x48 piksel, W3C ise en az 44x44 CSS kullanılmasını önermektedir piksel. Bununla ilgili giriş öğelerine ve düğmelere (en az) yaklaşık 15 piksellik dolgu ekleyin. mobil cihazlarda yaklaşık 10 pikseldir. Bunu gerçek bir mobil cihazda deneyin ve gerçek parmak veya başparmaktır. Her bir öğenize kolayca dokunabilir, giriş ve düğmeler.
Dokunma hedefleri uygun boyutta değil Lighthouse denetimi, giriş öğelerini algılama sürecini otomatikleştirmenize yardımcı olabilir her şey çok küçük olabilir.
Beğenilere göre tasarlayın
Dokunma hedefi'ni arayın ve pek çok işaret resmi görürsünüz. Ancak gerçek dünyada kullanıcılar telefonlarla etkileşimde bulunmak için başparmaklarını kullanıyor. Beğenilerden büyük olanlar ve kontrol daha az hassastır. Bire bir görüşmeler yapmak, yeniden boyutlandırabilirsiniz.
Metni yeterince büyük yap
Boyut ve dolguda olduğu gibi, giriş öğeleri ve dolgu için varsayılan tarayıcı yazı tipi boyutu. düğme, özellikle mobil cihazlarda çok küçük.
![Masaüstü ve Android'deki Chrome'daki stilsiz formun ekran görüntüsü.](https://web.dev/static/articles/sign-in-form-best-practices/image/screenshot-unstyled-form-e9a00e9267421.png?hl=tr)
Farklı platformlardaki tarayıcılarda yazı tipleri farklı şekilde boyutlandırılır. Bu nedenle, her yerde iyi çalışan belirli bir yazı tipi boyutu belirleyin. Şu konuyla ilgili kısa bir anket: popüler web siteleri masaüstünde 13–16 piksel boyutlarında: , mobil cihazlarda metin kullanımı için iyi bir minimum değerdir.
Bu durumda mobil cihazlarda daha büyük bir piksel boyutu kullanmanız gerekir: Chrome'da 16px
oldukça okunaklı, ancak iyi bir görüşte bile okumak zor 16px
metin. Farklı öğeler için farklı yazı tipi piksel boyutları ayarlayabilirsiniz:
medya boyutlarını kullanan görüntü alanı boyutları
sorguları.
20px
, mobil cihazlarda kullanıma uygundur, ancak bunu arkadaşlarınızla veya
bir örnekle açıklayacağım.
Dokümanda okunabilir yazı tipi boyutları kullanılmıyor Lighthouse denetimi, fazlalık olan metinleri algılama sürecini otomatikleştirmenize yardımcı olabilir küçük olabilir.
Girişler arasında yeterli boşluk bırakın
Girişlerin dokunma hedefleriyle birlikte iyi çalışmasını sağlayacak kadar kenar boşluğu ekleyin. Başka bir deyişle, bir parmak boşluk kadar.
Girişlerinizin net bir şekilde göründüğünden emin olun
Girişlerin varsayılan kenarlık stili, bunların görülmesini zorlaştırır. Neredeyse bazı platformlarda görünmez.
Dolgunun yanı sıra, bir kenarlık ekleyin: Beyaz bir arka planda, genellikle
kullanmak için #ccc
veya daha koyu bir seçim yapın.
![Android'deki Chrome'da stilize edilmiş formun ekran görüntüsü.](https://web.dev/static/articles/sign-in-form-best-practices/image/screenshot-styled-form-e2baf84fd81fe.png?hl=tr)
Geçersiz giriş değerleri konusunda uyarı vermek için yerleşik tarayıcı özelliklerini kullanın
Tarayıcılar,
type
özelliği için de kullanılmaktadır. Tarayıcılar, geçersiz değere sahip bir form gönderdiğinizde
ve sorunlu girişe odaklanırsınız.
![Masaüstündeki Chrome'da, geçersiz e-posta değeri için tarayıcı istemi ve odağının gösterildiği oturum açma formunun ekran görüntüsü.](https://web.dev/static/articles/sign-in-form-best-practices/image/screenshot-a-sign-form-4a4d1d374a2a8.png?hl=tr)
Geçersiz verileri vurgulamak için :invalid
CSS seçiciyi kullanabilirsiniz. Tekliflerinizi otomatikleştirmek ve optimize etmek için
İçeriksiz girişleri seçmekten kaçınmak için :not(:placeholder-shown)
.
input[type=email]:not(:placeholder-shown):invalid {
color: red;
outline-color: red;
}
Geçersiz değerlere sahip girişleri vurgulamanın farklı yollarını deneyin.
Gerektiğinde JavaScript kullanın
Şifrenin gösterilmesini aç/kapat
Kullanıcıların şunları kontrol edebilmesi için Şifreyi göster açma/kapatma düğmesi eklemeniz gerekir: otomatik olarak oluşturulur. Kullanışlılık girdiği metni göremez. Şu anda bunu yapmanın yerleşik bir yolu Bu konuda da belirli hakkında daha fazla bilgi edinin. Bir sonraki JavaScript kullanmanız gerekir.
![Şifreyi göster düğmesi ve Şifremi unuttum bağlantısını gösteren Google oturum açma formu.](https://web.dev/static/articles/sign-in-form-best-practices/image/sign-in-form.png?hl=tr)
Aşağıdaki kodda Şifreyi göster işlevini eklemek için bir metin düğmesi kullanılmaktadır.
HTML:
<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="current-password" required>
</section>
Düğmeyi düz metin gibi görünecek şekilde CSS'yi burada bulabilirsiniz:
button#toggle-password {
background: none;
border: none;
cursor: pointer;
/* Media query isn't shown here. */
font-size: var(--mobile-font-size);
font-weight: 300;
padding: 0;
/* Display at the top right of the container */
position: absolute;
top: 0;
right: 0;
}
Şifreyi gösteren JavaScript:
const passwordInput = document.getElementById('password');
const togglePasswordButton = document.getElementById('toggle-password');
togglePasswordButton.addEventListener('click', togglePassword);
function togglePassword() {
if (passwordInput.type === 'password') {
passwordInput.type = 'text';
togglePasswordButton.textContent = 'Hide password';
togglePasswordButton.setAttribute('aria-label',
'Hide password.');
} else {
passwordInput.type = 'password';
togglePasswordButton.textContent = 'Show password';
togglePasswordButton.setAttribute('aria-label',
'Show password as plain text. ' +
'Warning: this will display your password on the screen.');
}
}
Sonuç şöyle olur:
![Mac'te ve iPhone 7'de Safari'de "Şifreyi göster" metnini içeren oturum açma formunun ekran görüntüleri.](https://web.dev/static/articles/sign-in-form-best-practices/image/screenshots-sign-form-61274420cf598.png?hl=tr)
Şifre girişlerini erişilebilir hale getirin
aria-describedby
öğesine
öğesidir. Ekran okuyucular etiket metnini,
giriş türünü (şifre) ve ardından açıklamayı girin.
<input type="password" aria-describedby="password-constraints" …>
<div id="password-constraints">Eight or more characters with a mix of letters, numbers and symbols.</div>
Şifreyi göster işlevini eklerken
şifrenin gösterileceği konusunda uyarıda bulunmak için aria-label
simgesini tıklayın. Aksi takdirde kullanıcılar
fark etmeden şifreleri açığa çıkarabilir.
<button id="toggle-password"
aria-label="Show password as plain text.
Warning: this will display your password on the screen.">
Show password
</button>
Her iki ARIA özelliğinin nasıl çalıştığını aşağıdaki Glitch'de görebilirsiniz:
Erişilebilir Formlar Oluşturma bölümünde, formları erişilebilir hale getirmenize yardımcı olacak daha fazla ipucu bulunmaktadır.
Gerçek zamanlı olarak ve gönderilmeden önce doğrula
HTML form öğeleri ve özelliklerinde temel doğrulama, Ancak kullanıcılar arama yaparken daha sağlam doğrulamalar yapmak için ne zaman veri girdikleri ve formun ne zaman gönderilmeye çalışıldığı.
Oturum açma formunun 5. Adımı codelab, Kısıtlama Doğrulama API (yani genel olarak destekleniyor) odak ve görüntüleme istemlerini ayarlamak için yerleşik tarayıcı kullanıcı arayüzünü kullanarak özel doğrulama.
Daha fazla bilgi edinin: Daha karmaşık gerçek zamanlı işlemler için JavaScript'i kullanın doğrulama başlıklı makaleyi inceleyin.
Analytics ve RUM
"Neyi ölçemezseniz geliştiremezsiniz" hem de özellikle yeni modellere ve oturum açma formlarını kullanabilirsiniz. Hedefler belirlemeniz, başarıyı ölçmeniz, sitenizi iyileştirmeniz tekrarla.
İndirim kullanılabilirliği iyi bir sonuç elde etmek için faydalı olabilir, ancak yine de gerçekten deneme yapmak için nasıl bir deneyim yaşamış olabileceğini anlamanızı sağlar:
- Sayfa analizi: kayıt ve oturum açma sayfası görüntülemeleri, hemen çıkma oranları, ve çıkarlar.
- Etkileşim analizi: hedef dönüşüm hunileri (burada kullanıcılar oturum açma veya oturum açma akışınızı terk ediyor?) ve etkinlikler (kullanıcılar formlarınızla etkileşimde bulunurken hangi işlemleri yapıyor?)
- Web sitesi performansı: kullanıcı odaklı metrikleri (kaydolma ve oturum açma bir nedenden dolayı yavaş oluşur. Varsa, nedeni nedir?).
A/B Testi uygulayarak, yönelik farklı yaklaşımları ve aşamalı sunumları gerçekleştirerek, bir kullanıcı alt kümesi üzerinde yapılan değişikliklerdir.
Genel yönergeler
İyi tasarlanmış bir kullanıcı arayüzü ve kullanıcı deneyimi, oturum açma formlarını terk etme oranını azaltabilir:
- Kullanıcıları oturum açmak için arama yapmaya zorlamayın. Oturum açma formunun bağlantısını en üste yerleştirin Oturum Aç, Hesap Oluştur gibi iyi anlaşılmış ifadeler kullanarak sayfanın veya Kaydolun.
- Odağınızı koruyun. Kayıt formları, kullanıcıların dikkatini dağıtarak özellikleri hakkında daha fazla bilgi edinin.
- Kaydolma sürecindeki karmaşıklığı en aza indirin. Diğer kullanıcı verilerini (ör. adresler veya kredi kartı bilgileri) yalnızca, verilen bilgilerin net bir fayda sağladığı durumlarda dışı verilerdir.
- Kullanıcılar kayıt formunuza başlamadan önce, kayıt formunuzun ne kadar değerli olduğunu daha iyi olur. Oturum açmanın avantajı nedir? Kullanıcılara somut bilgiler verin kaydolmayı tamamlamaları için teşvikler.
- Mümkünse, kullanıcıların kendilerini cep telefonu numarasıyla tanıtmasına izin verin .
- Kullanıcıların şifrelerini sıfırlamalarını kolaylaştırın ve Şifrenizi mi unuttunuz? şifre nedir? bağlantısı açıktır.
- Hizmet şartlarınızın ve gizlilik politikası dokümanlarınızın bağlantısı: en baştan itibaren kullanıcıların verilerini nasıl koruduğunu anlatır.
- Kaydolma işleminize şirketinizin veya kuruluşunuzun logosunu ve adını ekleyin ve ve dilin, yazı tiplerinin ve stillerin geri kalan sitenizi ziyaret edin. Bazı formlar diğerleriyle aynı siteye aitmiş gibi hissetmiyor (özellikle de URL'leri önemli ölçüde farklıysa).
Öğrenmeye devam edin
- Muhteşem Formlar Oluşturma
- Mobil Form Tasarımı İçin En İyi Uygulamalar
- Daha yetenekli form kontrolleri
- Erişilebilir Formlar Oluşturma
- Kimlik Bilgisi Yönetimi API'sini Kullanarak Oturum Açma Akışını Kolaylaştırma
- WebOTP API ile web'de telefon numaralarını doğrulama
Fotoğraf: Meghan Schiereck, Unsplash'te).