Ödeme formuyla ilgili en iyi uygulamalar codelab'i

Sam Dutton

Bu codelab'de, güvenli, erişilebilir ve kullanımı kolay bir ödeme formunun nasıl oluşturulacağı gösterilmektedir.

1. adım: HTML'yi amacına uygun şekilde 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şlevlerini etkinleştirir, erişilebilirliği iyileştirir ve işaretlemenize anlam katar.

• Projeyi düzenlenebilir hale getirmek için Düzenlemek için remiks oluştur'u tıklayın.

index.html ürünündeki 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ı, karttaki ad, son kullanma tarihi ve güvenlik kodu için <input> öğe vardır. Bunların hepsi <section> öğeler içine yerleştirilmiştir ve her birinin bir etiketi vardır. Ödemeyi Tamamla düğmesi bir HTML <button> öğesidir. Bu codelab'in ilerleyen bölümlerinde, bu öğeleri kullanarak erişebileceğiniz tarayıcı özellikleri hakkında bilgi edineceksiniz.

Ödeme formunuzu önizlemek için Uygulamayı Görüntüle'yi tıklayın.

• Form, bu haliyle yeterince iyi çalışıyor mu?
• Daha iyi çalışmasını sağlamak için değiştirmek istediğiniz bir şey var mı?
• Mobil cihazlarda durum nedir?

Kaynak kodunuza dönmek için Kaynak Kodu Görüntüle'yi tıklayın.

2. adım: Mobil ve masaüstü için tasarım yapın

Eklediğiniz HTML geçerli ancak varsayılan tarayıcı stili, özellikle mobil cihazlarda formun kullanılmasını zorlaştırıyor. Bu da pek iyi görünmüyor.

Dolguyu, kenar boşluklarını ve yazı tipi boyutlarını ayarlayarak formlarınızın çeşitli cihazlarda iyi çalıştığından emin olmanız gerekir.

Aşağıdaki CSS'nin tamamını kopyalayıp kendi css/main.css dosyanıza yapıştırın.

Bu çok fazla CSS. Dikkat edilmesi gereken en önemli nokta, bedenlerde yapılan değişikliklerdir:

• padding ve margin 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 etiketler için display: block; kullanıldığını, böylece etiketlerin tek bir satıra sığdığını ve girişlerin tam genişlikte olabileceğini de fark edeceksiniz. Bu yaklaşımın avantajları Giriş formu en iyi uygulamaları bölümünde daha ayrıntılı olarak açıklanmaktadır.

:invalid seçici, bir girişin geçersiz bir değere sahip olduğunu belirtmek için kullanılır. (Bu kodu codelab'in ilerleyen bölümlerinde kullanacaksınız.)

CSS, mobil cihazlara öncelik verir:

• Varsayılan CSS, 400px genişliğinden daha küçük görüntü alanları içindir.
• Medya sorguları, en az 400px genişliğindeki görüntü alanları için varsayılanı geçersiz kılmak ve ardından en az 500px genişliğindeki görüntü alanlarında tekrar varsayılan değeri geçersiz kılmak için kullanılır. Bu, küçük telefonlar, daha büyük ekranlı mobil cihazlar ve masaüstünde iyi çalışır.

Web için derleme yaparken farklı cihazlarda ve görüntü alanı boyutlarında test yapmanız gerekir. Bu durum özellikle formlar için geçerlidir. Küçük bir hata, formların kullanılamaz hale gelmesine neden olabilir. CSS kesme noktalarının içeriğinizle ve hedef cihazlarınızla iyi çalıştığından emin olmak için her zaman ayarlamanız gerekir.

• Formun tamamı görülebiliyor mu?
• Form girişleri yeterince büyük mü?
• Metnin tamamı okunabiliyor mu?
• Gerçek bir mobil cihaz kullanma ile formu Chrome Geliştirici Araçları'ndaki 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.
• URL'yi bilgisayarınızdan telefonunuza 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ı olmak için özellikler ekleyin

Tarayıcının giriş değerlerini depolamasını ve otomatik olarak 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 görünecek şekilde ö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. Cihaz ve platforma bağlı olarak, tarayıcıda kayıtlı ödeme yöntemlerini gösteren bir seçici (aşağıdaki gibi) görebilirsiniz.

Bir ödeme yöntemi seçip güvenlik kodunuzu girdikten sonra 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 onaylar.

Mobil cihazlarda, Kart numarası alanına dokunduğunuzda sayısal klavye de gösterilir. Bunun nedeni, inputmode="numeric" kullanmanızdır. Bu, sayısal alanlar için sayıları girmeyi kolaylaştırır, sayısal olmayan karakterlerin girilmesini imkansız hale getirir ve kullanıcıların girdikleri veri türünü hatırlamalarını sağlar.

Mevcut tüm autocomplete değerlerini ödeme formlarına doğru şekilde eklemek son derece önemlidir. Sitelerin, kartın geçerlilik bitiş tarihi ve diğer alanlar için autocomplete değerini atlaması oldukça yaygındır. Tek bir autofill değeri yanlış veya eksikse kullanıcıların kart verilerini manuel olarak girmek için gerçek kartlarını almaları gerekir. Bu durumda indirimi kaybedebilirsiniz. Ödeme formlarındaki otomatik doldurma özelliği düzgün çalışmazsa kullanıcılar, ödeme kartı bilgilerini telefonlarında veya bilgisayarlarında saklamaya karar verebilir. Bu da son derece güvenli değildir.

Ödeme formunu boş bir alanla göndermeyi deneyin. Tarayıcı, eksik verileri tamamlamanızı 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 kullanmanızdır. Aynı durum maxlength ve diğer doğrulama kısıtlamaları için de geçerlidir. JavaScript gerekmez.

Ödeme formunuz şu şekilde görünecektir:

• autocomplete değerlerini kaldırıp ödeme formunu doldurmayı deneyin. Ne tür zorluklarla karşılaşıyorsunuz?
• Online mağazalardaki ödeme formlarını deneyin. Nelerin iyi gittiğini ve nelerin yanlış gittiğini düşünün. Sık karşılaşılan sorunlar veya uymanız gereken en iyi uygulamalar var mı?

4. Adım: Form gönderildikten sonra ödeme düğmesini devre dışı bırakın

Kullanıcı gönder düğmesine dokunduktan veya düğmeyi tıkladıktan sonra düğmeyi devre dışı bırakabilirsiniz. Özellikle kullanıcı ödeme yaparken bu işlemi yapabilirsiniz. Birçok kullanıcı, düzgün çalışıyor olsalar bile düğmelere tekrar tekrar dokunur veya düğmeleri tıklar. Bu durum, ödeme işlemeyle ilgili sorunlara neden olabilir ve sunucu yükünü artırabilir.

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 ne olacağını görün.

Birkaç açıklama ve bir validate() işlevi ekleyerek kodunuzun bu noktada nasıl görüneceğini aşağıda görebilirsiniz:

• JavaScript'in, veri doğrulaması için yorumlanmış kod içerdiğini fark edeceksiniz. Bu kod, özel doğrulama eklemek için Constraint Validation API'yi (yaygın olarak desteklenir) kullanır. Odak ayarlamak ve istemleri görüntülemek için yerleşik tarayıcı kullanıcı arayüzüne erişir. Kodun yorumunu kaldırıp deneyin. someregex ve message için uygun değerler, someField için de bir değer ayarlamanız gerekir.

• Formlarınızı iyileştirmenin yollarını belirlemek için hangi analiz ve gerçek kullanıcı izleme verilerini izlersiniz?

Ödeme formunuz şu şekilde görünecektir:

• Formunuzu farklı cihazlarda deneyin. Hangi cihazları ve tarayıcıları hedefliyorsunuz? Form nasıl iyileştirilebilir?

Daha fazla bilgi

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ı ekleyin: Kullanıcılara verilerini nasıl koruduğunuzu açıkça belirtin.

• Stil ve marka öğeleri: Bunların sitenizin geri kalanıyla eşleştiğinden emin olun. Kullanıcılar, ad ve adres girip ödeme yaparken doğru yerde olduklarından emin olmalıdır.

• Analizler ve Gerçek Kullanıcı İzleme: 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ğlar.