Bu codelab'de güvenli, erişilebilir ve kullanımı kolay bir ödeme formunu nasıl oluşturacağınız anlatılmaktadır.
1. Adım: HTML'yi gerektiği gibi kullanın
İş için oluşturulan öğeleri kullanın:
<form>
<section>
<label>
<input>
,<select>
<textarea>
<button>
Göreceğiniz gibi bu öğeler yerleşik tarayıcı işlevselliğini etkinleştirir, erişilebilirliği iyileştirir ve işaretlemenize anlam katar.
- 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.
<form action="#" method="post">
<h1>Payment form</h1>
<section>
<label>Card number</label>
<input>
</section>
<section>
<label>Name on card</label>
<input>
</section>
<section id="cc-exp-csc">
<div>
<label>Expiry date</label>
<input>
</div>
<div>
<label>Security code</label>
<input>
<div class="explanation">Last 3 digits on back of card</div>
</div>
</section>
<button id="complete-payment">Complete payment</button>
</form>
Kart numarası, kart üzerindeki ad, son kullanma tarihi ve güvenlik kodu için <input>
öğe bulunur. Bunların tümü <section>
öğeleri içine yerleştirilmiş ve her biri bir etikete sahip. Ödemeyi Tamamla düğmesi HTML biçimindedir
<button>
. Bu codelab'in ilerleyen bölümlerinde bu öğeleri kullanarak erişebileceğiniz tarayıcı özellikleri hakkında bilgi edineceksiniz.
Ödeme şeklinizi önizlemek için Uygulamayı Göster'i tıklayın.
- Form şu anki haliyle yeterince iyi çalışıyor mu?
- Daha iyi çalışması için değiştirmek istediğiniz bir şey var mı?
- Peki ya mobil cihazlarda?
Kaynak kodunuza dönmek için Kaynağı Görüntüle'yi tıklayın.
2. Adım: Mobil ve masaüstü için tasarlayın
Eklediğiniz HTML geçerli, ancak varsayılan tarayıcı stili, özellikle mobilde formun kullanımını zorlaştırıyor. Ayrıca, çok da iyi görünmüyor.
Dolgu, kenar boşlukları ve yazı tipi boyutlarını ayarlayarak formlarınızın çeşitli cihazlarda sorunsuz bir şekilde çalışmasını sağlamanız gerekir.
Aşağıdaki CSS'nin tamamını kopyalayıp kendi css/main.css
dosyanıza yapıştırın.
Çok fazla CSS var! Dikkat edilmesi gereken temel noktalar boyutlardaki değişikliklerdir:
padding
vemargin
girişlere eklenir.font-size
ve diğer değerler, farklı görüntü alanı boyutları için farklıdır.
Hazır olduğunuzda, stil özellikleri ayarlanmış formu görmek için Uygulamayı Görüntüle'yi tıklayın. Ayrıca, kenarlıkların ayarlandığını ve etiketlerde kendi başlarına bir çizgi üzerinde ilerlemeleri için display: block;
değerinin kullanıldığını ve girişlerin tam genişlikte olabileceğini de fark edeceksiniz. Oturum açma formu en iyi uygulamaları, bu yaklaşımın avantajlarını daha ayrıntılı bir şekilde açıklar.
:invalid
seçici, bir giriş geçersiz bir değere sahip olduğunda bunu göstermek için kullanılır. (Bunu daha sonra codelab'de
kullanacaksınız.)
CSS mobil önceliklidir:
- Varsayılan CSS, genişliği
400px
altında olan görüntü alanları içindir. - Medya sorguları, en az
400px
genişliğindeki görüntü alanları ve ardından en az500px
genişliğindeki görüntü alanları için varsayılan değeri geçersiz kılmak için kullanılır. Bu özelliğin küçük telefonlarda, büyük ekranlı mobil cihazlarda ve masaüstü bilgisayarlarda sorunsuz çalışması beklenir.
Web için geliştirme yaparken farklı cihazlarda ve görüntü alanı boyutlarında test yapmanız gerekir. Bu, özellikle formlar için doğrudur, çünkü küçük bir hata onları kullanılamaz hale getirebilir. CSS ayrılma noktalarını, içeriğiniz ve hedef cihazlarınızla iyi çalışacak şekilde her zaman ayarlamanız gerekir.
- Formun tamamı görülebiliyor mu?
- Form girişleri yeterince büyük mü?
- Tüm metin okunabiliyor mu?
- Gerçek bir mobil cihaz kullanma ile formu Chrome Geliştirici Araçları'nda Cihaz Modu'nda görüntüleme arasında herhangi bir fark fark ettiniz mi?
- Kesme noktalarını ayarlamanız gerekti mi?
Formunuzu farklı cihazlarda test etmenin birkaç yolu 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.
3. Adım: Kullanıcıların veri girmesine yardımcı olacak özellikler ekleyin
Tarayıcının giriş değerlerini saklayıp otomatik doldurmasını sağlayın ve güvenli yerleşik ödeme ve doğrulama özelliklerine erişim sağlayın.
index.html
dosyanızdaki forma aşağıdaki gibi özellikler ekleyin:
<form action="#" method="post">
<h1>Payment form</h1>
<section>
<label for="cc-number">Card number</label>
<input id="cc-number" name="cc-number" autocomplete="cc-number" inputmode="numeric" pattern="[\d ]{10,30}" required>
</section>
<section>
<label for="cc-name">Name on card</label>
<input id="cc-name" name="cc-name" autocomplete="cc-name" pattern="[\p{L} \-\.]+" required>
</section>
<section id="cc-exp-csc">
<div>
<label for="cc-exp">Expiry date</label>
<input id="cc-exp" name="cc-exp" autocomplete="cc-exp" placeholder="MM/YY" maxlength="5" required>
</div>
<div>
<label for="cc-csc">Security code</label>
<input id="cc-csc" name="cc-csc" autocomplete="cc-csc" inputmode="numeric" maxlength="3" required>
<div class="explanation">Back of card, last 3 digits</div>
</div>
</section>
<button id="complete-payment">Complete payment</button>
</form>
Uygulamanızı tekrar görüntüleyin ve ardından Kart numarası alanına dokunun veya bu alanı tıklayın. Cihaza ve platforma bağlı olarak, tarayıcı için depolanan ödeme yöntemlerini gösteren, aşağıdakine benzer bir seçici görebilirsiniz.
![Android telefondaki Chrome'da bir ödeme formunun iki ekran görüntüsü. Biri yerleşik tarayıcı ödeme kartı seçiciyi, diğeri ise yer tutucu otomatik olarak doldurulan değerleri gösterir.](https://web.dev/static/articles/codelab-payment-form-best-practices/image/two-screenshots-a-paymen-0c2e6e2be4f9d.png?authuser=5&hl=tr)
Bir ödeme yöntemi seçip güvenlik kodunuzu girdiğinizde tarayıcı, forma eklediğiniz ödeme kartı autocomplete
değerlerini kullanarak formu otomatik olarak doldurur:
cc-number
cc-name
cc-exp
cc-csc
Birçok tarayıcı, kredi kartı numaralarının ve güvenlik kodlarının geçerliliğini de kontrol edip doğrular.
Mobil cihazlarda, Kart numarası alanına dokunur dokunmaz bir sayısal klavyenin olduğunu görürsünüz. Bunun nedeni inputmode="numeric"
hizmetini kullanmış olmanızdır. Sayısal alanlara sayı girmeyi kolaylaştırır ve sayısal olmayan karakterler girilmesini imkansız kılar. Ayrıca kullanıcıların girdikleri veri türünü hatırlamalarını sağlar.
Ödeme formlarına mevcut tüm autocomplete
değerlerinin doğru şekilde eklenmesi son derece önemlidir. Sitelerin, kart son kullanma tarihi ve diğer alanlar için autocomplete
değerini atlamasına sıklıkla rastlanır. Tek bir autofill
değeri yanlış veya eksikse kullanıcıların kart verilerini manuel olarak girebilmeleri için gerçek kartlarını almaları gerekir ve indirimi kaybedebilirsiniz. Ödeme formlarında otomatik doldurma özelliği düzgün çalışmazsa kullanıcılar, ödeme kartı ayrıntılarının kaydını telefon veya bilgisayarlarında da tutmaya karar verebilir, bu da son derece güvensiz bir yöntemdir.
Ödeme formunu boş bir alanla göndermeyi deneyin. Tarayıcı, eksik verileri
tamamlamak ister. Şimdi Kart numarası alanındaki değere bir harf ekleyin ve formu göndermeyi deneyin. Tarayıcı, değerin geçersiz olduğu konusunda uyarır. Bunun nedeni, bir alan için geçerli değerleri belirtmek üzere pattern
özelliğini kullanmış olmanızdır. Aynı durum maxlength
ve diğer doğrulama kısıtlamaları için de geçerlidir. JavaScript gerekmez.
Ödeme formunuz artık şu şekilde görünmelidir:
autocomplete
değerlerini kaldırıp ödeme formunu doldurmayı deneyin. Ne tür zorluklarla karşılaşıyorsunuz?- Online mağazalarda ödeme şekillerini deneyin. Neyin işe yaradığını ve neyin yanlış gittiğini düşünün. Takip etmeniz gereken yaygın sorunlar veya en iyi uygulamalar var mı?
4. Adım: Form gönderildikten sonra ödeme düğmesini devre dışı bırakın
Özellikle kullanıcı ödeme yaparken, kullanıcı düğmeye dokunduğunda veya tıkladığında gönder düğmesini devre dışı bırakmayı düşünmelisiniz. Düzgün çalışıyor olsalar bile birçok kullanıcı düğmelere tekrar tekrar dokunur veya tıklar. Bu, ödemenin işlenmesinde ve sunucu yüküne ekleme işleminde sorunlara neden olabilir.
js/main.js
dosyanıza aşağıdaki JavaScript'i ekleyin:
const form = document.querySelector('form');
const completePaymentButton = document.querySelector('button#complete-payment');
form.addEventListener('submit', handleFormSubmission);
function handleFormSubmission(event) {
event.preventDefault();
if (form.checkValidity() === false) {
// Handle invalid form data.
} else {
completePaymentButton.textContent = 'Making payment...';
completePaymentButton.disabled = 'true';
setTimeout(() => {alert('Made payment!');}, 500);
}
}
Ödeme formunu göndermeyi deneyin ve sonucu görün.
Birkaç yorum ve bir validate()
işlevi de ekleyerek kodunuzun bu noktada nasıl bakması gerektiğini aşağıda görebilirsiniz:
JavaScript'in, veri doğrulama için açıklama metni içeren bir kod içerdiğini fark edeceksiniz. Bu kod, özel doğrulama eklemek için Constraint Validation API'yi (kapsamlı şekilde desteklenir) kullanır. Odaklanma ve görüntüleme istemlerini ayarlamak için yerleşik tarayıcı kullanıcı arayüzüne erişir. Koddaki açıklamaları kaldırıp deneyin.
someregex
vemessage
için uygun değerleri vesomeField
için bir değer belirlemeniz gerekir.Formlarınızı iyileştirmenin yollarını belirlemek için hangi analizleri ve Gerçek Kullanıcı İzleme verilerini izlersiniz?
Tam ödeme formunuz şu şekilde görünmelidir:
- Formunuzu farklı cihazlarda deneyin. Hangi cihazları ve tarayıcıları hedefliyorsunuz? Form nasıl daha iyi hale getirilebilir?
Daha da ileri
Bu codelab'de yer almayan aşağıdaki önemli form özelliklerini göz önünde bulundurun:
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, adları ve adresleri girip ödeme yaparken rahat hissetmeli ve hâlâ doğru yerde olduklarından emin olmalıdır.
Analizler ve Gerçek Kullanıcı İzleme: Form tasarımınızın performans ve kullanılabilirliğinin gerçek kullanıcılar için test edilip izlenmesine olanak tanır.