Adres formuyla ilgili en iyi uygulamalar codelab'i

Sam Dutton

Çeşitli ad ve adres biçimleri için iyi çalışan bir formu nasıl tasarlayabilirsiniz? Küçük form arızaları kullanıcıları rahatsız eder ve 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ıya uygun, kullanımı kolay ve erişilebilir bir formun nasıl oluşturulacağını öğrenebilirsiniz.

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

Codelab'in bu kısmına boş bir formla, yalnızca bir başlık ve düğmeyle başlayacaksınız. Ardından girdileri eklemeye başlayacaksınız. (CSS ve küçük bir JavaScript kodu zaten eklenmiştir.)

  • Projeyi düzenlenebilir hale getirmek için Düzenlenecek remiks'i tıklayın.

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

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

Bu tek bir ad alanı için karmaşık ve tekrar eden bir şey gibi görünse de zaten birçok işe yarıyor.

label öğesinin for özelliğini input name veya id öğesiyle eşleştirerek label öğesini input ile ilişkilendirdiniz. Bir etikete dokunulduğunda veya tıklandığında odak noktası girişe taşınır. Bu sayede, tek başına girişten çok daha büyük bir hedef elde edilir. Bu da parmaklar, baş parmaklar ve fare tıklamaları için iyidir. Ekran okuyucular, etikete veya etiketin girişine odaklanıldığında etiket metnini duyurur.

Peki ya name="name"? Bu, form gönderildiğinde sunucuya gönderilen bu girişteki verilerle ilişkili addır ("ad" olarak anılır). name özelliği eklemek, aynı zamanda bu öğedeki verilere FormData API tarafından erişilebileceği anlamına da gelir.

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

Chrome'da Ad girişine dokunduğunuzda veya tıkladığınızda ne olur? Tarayıcının depoladığı otomatik doldurma önerilerini ve name ile id değerleri göz önünde bulundurulduğunda, bu giriş için uygun olan tahminleri göreceksiniz.

Şimdi autocomplete="name" kodunu giriş kodunuza ekleyerek aşağıdaki gibi görünecektir:

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

Chrome'da sayfayı yeniden yükleyin ve Ad girişine dokunun veya tıklayın. Ne gibi farklar görüyorsunuz?

Küçük bir değişiklik olduğunu göreceksiniz: autocomplete="name" ile birlikte, öneriler artık daha önce autocomplete="name" içeren form girişlerinde kullanılan belirli değerler olacaktır. Tarayıcı sadece neyin uygun olabileceğini tahmin etmekle kalmaz: Kontrol sizdedir. 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 telefondaki Chrome&#39;un iki ekran görüntüsünde yer alan formda otomatik tamamlama değeri olan ve olmayan tek girişli bir form gösteriliyor. Biri tarayıcı kullanıcı arayüzü öneri değerlerini, diğeri ise depolanan otomatik tamamlama değerleri olduğunda kullanıcı arayüzünü gösterir.
Tahmin edilen değerlerle otomatik doldurmaya ve otomatik tamamlamaya kıyasla kullanıcı arayüzü.

Şimdi kısıtlama doğrulama özelliklerini maxlength, pattern ve required ekleyin. Böylece giriş kodunuz aşağıdaki gibi 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 karakterleri, tireler ve noktalara (tam duraklar) izin veren bir normal ifade kullanır. Bu, Françoise veya Jörg gibi adların "geçersiz" olarak sınıflandırılmadığı anlamına gelir. [Yalnızca Latin alfabesindeki karakterlere izin veren \w değerini kullanırsanız bu durum geçerli değildir.

  • required, zorunlu olduğu anlamına gelir. Tarayıcı, formun bu alan için veri olmadan gönderilmesine izin vermez ve göndermeyi denediğinizde girişi uyarır ve vurgular. Ekstra kod gerekmez.

Formun bu özelliklerle ve ö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 uyarısını ve bu alana odaklanılmasını sağlayan yerleşik tarayıcı işlevselliğini görürsünüz.

3. Adım: Formunuza esnek 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 girmeleri için en esnek yoldur ve kesme ve yapıştırma için idealdir.

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

Şimdi Posta kodu ve Ülke veya bölge alanlarını ekleyin. Kolay anlaşılması için burada yalnızca ilk beş ülke belirtilmiştir. Tam liste, doldurulmuş adres formunda bulunur.

<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 seçeneğinin isteğe bağlı olduğunu görürsünüz. Bunun nedeni, birçok ülkede posta kodu kullanılmamasıdır. (Küresel Kaynak Defteri, örnek adresler de dahil olmak üzere 194 farklı ülke için adres biçimleri hakkında bilgi sağlar.) Tam listedeki bazı seçenekler (örneğin, Birleşik Krallık) tek ülkeler olmadığından (autocomplete değerine rağmen) Country yerine Ülke veya bölge etiketi kullanılır.

4. Adım: Müşterilerin gönderim ve fatura adreslerini kolayca girmesini sağlayın

Son derece işlevsel bir adres formu oluşturdunuz ancak örneğin, siteniz gönderim ve faturalandırma için birden fazla adres gerektiriyorsa ne olur? Müşterilerin gönderim ve fatura adresleri girebilmesi için formunuzu güncellemeyi deneyin. Özellikle iki adres aynıysa veri girişini mümkün olduğunca hızlı ve kolay hale getirmek için ne yapabilirsiniz? Bu codelab'in yer aldığı makalede birden çok adresle ilgili işleme teknikleri açıklanmaktadır. Yaptığınız işlem ne olursa olsun, 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 aşağıdaki kodu forma 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 bölmeyin. Bu, kullanıcıların veri girmesini veya kopyalayıp yapıştırmasını kolaylaştırır, doğrulamayı kolaylaştırır 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 klavyeye sahip olmasını sağlar.
  • enterkeyhint="done", mobil klavye gir tuşu etiketini bunun son alan olduğunu ve formun artık gönderilebileceğini (varsayılan değer next) gösterecek şekilde ayarlar.
Android&#39;de bir formun enterkeyhint giriş özelliğinin Enter tuşu simgesi 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 artık şu şekilde görünmelidir:

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

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

Daha da ileri

  • Analiz ve Gerçek Kullanıcı İzleme: Form tasarımınızın performans ve kullanılabilirliğini, gerçek kullanıcılar için test edilip izlenmesini ve değişikliklerin başarılı olup olmadığını kontrol edilmesini sağlayın. Yükleme performansını ve diğer Web Verileri'nin yanı sıra sayfa analizlerini (kullanıcıların adres formunuzdan formu doldurmadan siteden hemen çıkıyor mu? Kullanıcılar adres formu sayfalarınızda ne kadar süre geçiriyor?) ve etkileşim analizlerini (kullanıcıların hangi sayfa bileşenleriyle etkileşimde bulunup bulunmadığı) izlemelisiniz.

  • Kullanıcılarınız hangi konumda bulunuyor? Adresini nasıl biçimlendiriyorlar? Posta kodu gibi adres bileşenleri için hangi adları kullanıyorlar? Frank'in Kompülsif Posta Adresleri Kılavuzu, 200'den fazla ülkedeki adres biçimlerini açıklayan faydalı bağlantılar ve kapsamlı yönergeler sağlar.

  • Ülke seçiciler, kötü kullanılabilirlik ile bilinir. Uzun bir öğe listesi için öğe seçmekten kaçınmak en iyisidir. ISO 3166 ülke kodu standardı ise şu anda 249 ülkeyi listeler. <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ıza çeşitli cihaz ve platformlarda erişilebilir olmasını nasıl sağlarsınız? (<select> öğesi, çok sayıda öğe için iyi sonuç vermez. Ancak en azından neredeyse tüm tarayıcılarda ve yardımcı cihazlarda kullanılabilir.)

    Blog yayınında <input type="country" /> bir ülke seçiciyi standartlaştırmanın karmaşıklığı ele alınmaktadır. Ülke adlarının yerelleştirilmesi de sorun yaratabilir. Ülke Listeleri, ülke kodlarını ve adlarını birden fazla dilde, farklı biçimde indirmeniz için bir araç içerir.