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 arızaları kullanıcıları rahatsız eder ve kullanıcıların sitenizden ayrılmalarına veya satın alma ya da kaydolma işlemini 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 öğeleri 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ünse de zaten birçok şeyi kapsar.

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, etikete veya etiket girişine odaklanıldığında etiket metnini duyurur.

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?

autocomplete="name" ile birlikte, ö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. Ayrıca, tarayıcınız tarafından depolanan 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 özellikleri 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 durak) izin veren bir normal ifade kullanır. Bu, Françoise veya Jörg gibi adların "geçersiz" olarak sınıflandırılmamış olması anlamına gelir. 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. Zorunlu boş alan ve ayar odağının bu alana alındığıyla ilgili yerleşik tarayıcı işlevi uyarısını görürsünüz.

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 ihtiyacınız olmadığı sürece adres formunuzu sokak adı ve numarası gibi bileşenlere bölmemelisiniz. 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ı açısından burada yalnızca ilk beş ülke belirtilmiştir. Tam liste, doldurulmuş adres formunda yer alır.

<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 değerinin isteğe bağlı olduğunu görürsünüz. Bunun nedeni, birçok ülkede posta kodu kullanmaması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 (ör. Birleşik Krallık) 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. Özellikle iki adres aynıysa veri girişini nasıl mümkün olduğunca hızlı ve kolay yapabilirsiniz? 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: Bir 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 sayede, kullanıcıların veri girmesi veya kopyalayıp yapıştırma işlemleri kolaylaşır, doğrulama süreci kolaylaşır ve tarayıcıların otomatik doldurmasına olanak tanınır.

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".

Adres formunuz aşağıdaki gibi 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 ileri gidiyoruz

  • 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 edilip izlenmesini ve değişikliklerin başarılı olup olmadığını kontrol etmenizi sağlar. Yükleme performansını ve diğer Web Verileri'nin yanı sıra sayfa analizlerini (adres formunuzdan ne kadarının adres formunuzu doldurmadan geri döndüğü, kullanıcılar adres formu sayfalarınızda ne kadar süre harcıyor?) ve etkileşim analizlerini (kullanıcıların hangi sayfa bileşenleriyle etkileşim kurduğunu ve etmediğ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 öğede iyi performans göstermese de en azından neredeyse tüm tarayıcılarda ve yardımcı cihazlarda kullanılabilir.)

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