Adres formuyla ilgili en iyi uygulamalar codelab'i

Sam Dutton

Çeşitli ad ve adres biçimleri için iyi çalışan bir form nasıl tasarlayabilirsiniz? Küçük form hataları kullanıcıları rahatsız eder ve sitenizden ayrılmalarına ya da satın alma veya kaydolma işlemlerini tamamlamaktan vazgeçmelerine neden olabilir.

Bu codelab'de, çoğu kullanıcı için iyi çalışan, kullanımı kolay ve erişilebilir bir formun nasıl oluşturulacağı gösterilmektedir.

1. adım: HTML öğelerinden ve özelliklerinden en iyi şekilde yararlanın

Codelab'in bu bölümüne, yalnızca bir başlık ve bir düğmenin bulunduğu boş bir formla başlayacaksınız. Ardından giriş eklemeye başlayın. (CSS ve biraz JavaScript zaten dahildir.)

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

  • Aşağıdaki kodu kullanarak <form> öğenize bir ad alanı ekleyin:

<section>
  <label for="name">Name</label>
  <input id="name" name="name">
</section>

Bu, yalnızca bir ad alanı için karmaşık ve tekrarlı görünebilir ancak çok şey yapmaktadır.

label'nin for özelliğini input'un name veya id özelliğiyle eşleştirerek label'yi input ile ilişkilendirdiniz. Bir etikete dokunulduğunda veya etiket tıklandığında, odak girişine taşınır. Bu da girişin kendisinden çok daha büyük bir hedef oluşturur. Bu, parmaklar, başparmaklar ve fare tıklamaları için iyidir. Ekran okuyucular, etiket veya etiketin girişi odaklandığında etiket metnini okur.

name="name" ne dersiniz? Bu, form gönderildiğinde sunucuya gönderilen bu girişteki verilerle ilişkili addır ("ad"). name özelliğinin eklenmesi, bu öğedeki verilere FormData API tarafından da erişilebileceği anlamına gelir.

2. adım: Kullanıcıların veri girmesine yardımcı olacak özellikler ekleyin

Chrome'da Ad girişine dokunduğunuzda veya bu girişi tıkladığınızda ne olur? Tarayıcının depoladığı otomatik doldurma önerilerini görürsünüz ve name ile id değerlerine göre bu giriş için uygun tahminler gösterilir.

Şimdi giriş kodunuza autocomplete="name" ekleyin. Böylece kodunuz şu şekilde görünür:

<section>
  <label for="name">Name</label>
  <input id="name" name="name" autocomplete="name">
</section>

Sayfayı Chrome'da yeniden yükleyin ve Ad girişine dokunun veya bu girişi tıklayın. Hangi farklılıkları görüyorsunuz?

Küçük bir değişiklik fark edeceksiniz: autocomplete="name" ile öneriler artık autocomplete="name" içeren form girişlerinde daha önce kullanılan belirli değerlerdir. Tarayıcı, uygun olabilecekleri tahmin etmekle kalmaz; kontrolü siz sağlarsınız. Tarayıcınızın depoladığı adları ve adresleri görüntülemek ve düzenlemek için Yönet… seçeneğini de görürsünüz.

Android telefonda Chrome&#39;un, tek girişli bir formu otomatik tamamlama değeriyle ve olmadan gösteren iki ekran görüntüsü. Biri, tarayıcı kullanıcı arayüzünü sezgisel olarak önerilen değerleri gösterirken diğeri, depolanmış otomatik tamamlama değerleri olduğunda kullanıcı arayüzünü gösterir.
Tahmin edilen değerlerle otomatik doldurma ve otomatik tamamlama için kullanıcı arayüzü.

Şimdi kısıtlama doğrulama özelliklerini (maxlength, pattern ve required) ekleyin. Böylece giriş kodunuz şu şekilde görünür:

<section>
  <label for="name">Name</label>
  <input id="name" name="name" autocomplete="name"
    maxlength="100" pattern="[\p{L} \-\.]+" required>
</section>

  • maxlength="100", tarayıcının 100 karakterden uzun girişlere izin vermeyeceği anlamına gelir.

  • pattern="[\p{L} \-\.]+", Unicode harf karakterlerine, kısa çizgilere ve noktalara (tam nokta) izin veren bir normal ifade kullanır. Yani Françoise veya Jörg gibi adlar "geçersiz" olarak sınıflandırılmaz. Yalnızca Latin alfabesindeki karakterlere izin veren \w değerini kullanırsanız bu durum geçerli değildir.

  • required, zorunlu anlamına gelir. Tarayıcı, bu alan için veri olmadan formun gönderilmesine izin vermez ve formu göndermeye çalıştığınızda uyarı verir ve girişi vurgular. Ek kod gerekmez.

Formun bu özelliklerle ve bu özellikler olmadan nasıl çalıştığını test etmek için veri girmeyi deneyin:

  • pattern özelliğine uymayan değerler girmeyi deneyin.
  • Formu boş bir girişle göndermeyi deneyin. Yerleşik tarayıcı işlevi, zorunlu alanın boş olduğu konusunda uyarıda bulunur ve o alana odaklanır.

3. Adım: Formunuza esnek bir adres alanı ekleyin

Adres alanı eklemek için formunuza aşağıdaki kodu ekleyin:

<section>
  <label for="address">Address</label>
  <textarea id="address" name="address" autocomplete="address"
    maxlength="300" required></textarea>
</section>

textarea, kullanıcılarınızın adreslerini girmelerinin en esnek yoludur ve kesme ve yapıştırma için mükemmeldir.

Gerçekten gerekli olmadığı sürece adres formunuzu sokak adı ve numarası gibi bileşenlere ayırmaktan kaçının. Kullanıcıları, adreslerini anlamlı olmayan alanlara sığdırmaya zorlamayın.

Ardından Posta kodu ve Ülke veya bölge alanları ekleyin. Kolaylık sağlaması için buraya yalnızca ilk beş ülke dahil edilmiştir. Tam liste, tamamlanan adres formuna eklenir.

<section>
  <label for="postal-code">ZIP or postal code (optional)</label>
  <input id="postal-code" name="postal-code"
    autocomplete="postal-code" maxlength="20">
</section>

<section id="country-region">
  <label for="">Country or region</label>
  <select id="country" name="country" autocomplete="country"
    required>
      <option selected value="SPACER"> </option>
      <option value="AF">Afghanistan</option>
      <option value="AX">Åland Islands</option>
      <option value="AL">Albania</option>
      <option value="DZ">Algeria</option>
      <option value="AS">American Samoa</option>
  </select>
</section>

Posta kodu isteğe bağlıdır. Bunun nedeni, birçok ülkede posta kodlarının kullanılmamasıdır. (Global Sourcebook, örnek adresler dahil olmak üzere 194 farklı ülke için adres biçimleri hakkında bilgi sağlar.) Tam listedeki bazı seçenekler (Birleşik Krallık gibi) tek bir ülke olmadığından (autocomplete değerine rağmen) Ülke yerine Ülke veya bölge etiketi kullanılır.

4. Adım: Müşterilerin gönderim ve fatura adreslerini kolayca girmesine olanak tanıyın

Çok işlevli bir adres formu oluşturdunuz. Ancak siteniz için örneğin gönderim ve faturalandırma gibi birden fazla adres gerekiyorsa ne yapabilirsiniz? Müşterilerin gönderim ve fatura adreslerini girmesine olanak tanıyacak şekilde formunuzu güncellemeyi deneyin. Veri girişini, özellikle iki adres aynıysa olabildiğince hızlı ve kolay hale nasıl getirebilirsiniz? Bu codelab'e eşlik eden makalede, birden fazla adresi işleme teknikleri açıklanmaktadır. Ne yaparsanız yapın doğru autocomplete değerlerini kullandığınızdan emin olun.

5. adım: Telefon numarası alanı ekleyin

Telefon numarası girişi eklemek için forma aşağıdaki kodu ekleyin:

<section>
  <label for="tel">Telephone</label>
  <input id="tel" name="tel" autocomplete="tel" type="tel"
    maxlength="30" pattern="[\d \-\+]+" enterkeyhint="done"
    required>
</section>

Telefon numaraları için tek bir giriş kullanın: Numarayı parçalara ayırmayın. Bu, kullanıcıların veri girmesini veya kopyalayıp yapıştırmasını kolaylaştırır, doğrulamayı basitleştirir ve tarayıcıların otomatik doldurmasını sağlar.

Telefon numarası girmeyle ilgili kullanıcı deneyimini iyileştirebilecek iki özellik vardır:

  • type="tel", mobil kullanıcıların doğru klavyeyi kullanmasını sağlar.
  • enterkeyhint="done", mobil klavye giriş tuşu etiketini bu alanın son alan olduğunu ve formun gönderilebileceğini gösterecek şekilde ayarlar (varsayılan değer next).
Android&#39;deki bir formun, enterkeyhint giriş özelliğinin enter tuşu düğmesi simgesini nasıl değiştirdiğini gösteren iki ekran görüntüsü.
Enter düğmesi etiketini ayarlamak için enterkeyhint özelliğini kullanın: 'sonraki' ve 'bitti'.

Tam adres formunuz şu şekilde görünecektir:

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

Formunuzu farklı cihazlarda test etmenin birkaç yolu vardır:

Daha fazla bilgi

  • Analytics 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 ve değişikliklerin başarılı olup olmadığını kontrol etmenizi sağlar. Yükleme performansını ve diğer Web Vitals'ı, sayfa analizlerini (kullanıcılardan kaçının adres formunuzu doldurmadan hemen ayrıldığını? kullanıcıların adres formu sayfalarınızda ne kadar süre geçirdiğini?) ve etkileşim analizlerini (kullanıcıların hangi sayfa bileşenleriyle etkileşime geçtiğini veya geçmediğini?) izlemeniz gerekir.

  • Kullanıcılarınız nerede bulunuyor? Adreslerini nasıl biçimlendiriyorlar? Adres bileşenleri (ör. posta kodu) için hangi adları kullanıyorlar? Frank's Compulsive Guide to Postal Addresses (Frank'ın Posta Adresleri Rehberi) 200'den fazla ülkedeki adres biçimlerini ayrıntılı olarak açıklayan faydalı bağlantılar ve kapsamlı rehberlik sunar.

  • Ülke seçicileri kullanılabilirlik açısından kötü bir üne sahiptir. Uzun bir öğe listesi için belirli öğeleri kullanmaktan kaçının. ISO 3166 ülke kodu standardında şu anda 249 ülke listeleniyor. <select> yerine Baymard Institute ülke seçici gibi bir alternatifi kullanabilirsiniz.

    Çok sayıda öğe içeren listeler için daha iyi bir seçici tasarlayabilir misiniz? Tasarımınızın çeşitli cihaz ve platformlarda erişilebilir olmasını nasıl sağlarsınız? (<select> öğesi çok sayıda öğe için iyi çalışmaz ancak en azından neredeyse tüm tarayıcılarda ve yardımcı cihazlarda kullanılabilir.)

    <input type="country" /> blog yayınında, ülke seçiciyi standartlaştırmanın karmaşıklığı ele alınmaktadır. Ülke adlarının yerelleştirilmesi de sorun yaratabilir. Countries Lists'ta ülke kodlarını ve adlarını birden fazla dilde, birden fazla biçimde indirmenizi sağlayan bir araç bulunur.