Adres formuyla ilgili en iyi uygulamalar codelab'i

Sam Dutton

Çeşitli adlar ve adres biçimleri için iyi çalışan bir formu nasıl tasarlayabilirsiniz? Küçük biçim Kullanıcıları rahatsız eder ve sitenizden ayrılmalarına veya satın alma işlemini tamamlamaktan vazgeçmelerine neden olabilir. veya kaydolabilirsiniz.

Bu codelab'de, çoğu kullanıcının en iyi şekilde yararlanabileceği, kullanımı kolay ve erişilebilir bir formu nasıl oluşturabileceğiniz anlatılmaktadır.

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

Codelab'in bu bölümüne boş bir form, yalnızca bir başlık ve düğme sahip olabilir. Ardından girişler eklemeye başlarsınız. (CSS ve biraz JavaScript kodu halihazırda included.)

  • Projeyi düzenlenebilir hale getirmek için Düzenlemek için Remiks'i 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 ve input öğelerini, label for özelliğini input adlı kişinin name veya id cihazı. Bir etikete dokunmak veya etiketi tıklamak, odağı ilgili girişe taşıyarak çok daha büyük hale gelir daha fazla hedef tıklamanızı sağlar. Bu, parmaklar, baş parmaklar ve fare tıklamaları için iyi sonuç verir! Ekran okuyucular etiket veya etiket girişi odaklanıldığında etiket metnini duyurur.

Peki ya name="name"? Verilerle ilişkilendirilmiş addır ('ad'!) bu girdiyi kullanır. name özelliği ekleme aynı zamanda, bu öğedeki verilere FormData API tarafından erişilebilir.

2. Adım: Kullanıcıların veri girmesine yardımcı olmak için özellikler ekleyin

Chrome'da Ad girişine dokunduğunuzda veya bu girişi tıkladığınızda ne olur? Otomatik doldurma seçeneği gösterilir. sağlandığı ve tahminlerin bu giriş için uygun olduğu kabul edilir: name ve id değerleri.

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

<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. Ne gibi farklılıklar görüyorsunuz?

Küçük bir değişiklik olduğunu göreceksiniz: autocomplete="name" ile birlikte öneriler artık özel değerleri (autocomplete="name" içeren form girişlerinde de kullanılır). Tarayıcı kimin uygun olabileceğini tahmin etmekle yetinmeyip kontrol sizdedir. Ayrıca, Yönet... seçeneğini de görürsünüz. tarayıcınız tarafından depolanan adları ve adresleri görüntüleme ve düzenleme seçeneğini kullanabilirsiniz.

Android telefondaki Chrome&#39;un, otomatik tamamlama değeri olan ve olmayan tek bir giriş içeren bir formu gösteren iki ekran görüntüsü. Bunlardan biri, tarayıcı kullanıcı arayüzü buluşsal öneri değerlerini gösterir; diğeri ise kullanıcı arayüzünü gösterir.
Tahmin edilen değerlerle otomatik doldurma için kullanıcı arayüzü, otomatik tamamlamaya kıyasla.
ziyaret edin.

Şimdi kısıtlı doğrulama özelliklerini ekleyin. maxlength, pattern ve required için 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 izin veren bir normal ifade kullanır. kısa çizgi ve nokta (tam durak) içermelidir. Yani, Françoise veya Jörg gibi adlar "geçersiz". Ancak [yalnızca\w Latin alfabesi.

  • required, zorunlu... anlamına gelir. Tarayıcı, form için veri olmadan formun gönderilmesine izin vermez: bu alana girer ve göndermeyi denerseniz uyarır ve girişi vurgular. Ekstra kod yok gerekli!

ziyaret edin.

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. Tarayıcı işlevine yönelik yerleşik bir uyarı göreceksiniz: boş bırakın ve odağı bu alana bırakın.

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 yöntemdir ve hem kesme ve yapıştırma gibi işlemlerdir.

Adres formunuzu sokak adı ve numarası gibi bileşenlere bölmemelisiniz. gerekir. Kullanıcıları adreslerini anlamsız alanlara sığdırmaya zorlamayın.

Şimdi posta kodu ve Ülke veya bölge alanları ekleyin. Kolaylık sağlaması açısından buraya yalnızca ilk beş ülke dahil edilmiş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 Kaynak Kitap'ta şu bilgiler yer alır: 194 farklı ülke için geçerli adres biçimlerini de kullanabilirsiniz.) Ülke veya Bölge Ülke yerine kullanılır, çünkü tam listedeki bazı seçenekler ( Birleşik Krallık) tek ülke değildir (autocomplete değerine rağmen).

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

Oldukça işlevsel bir adres formu oluşturdunuz. Ancak siteniz birden fazla adres gerektiriyorsa ne yapabilirsiniz? (ör. gönderim ve faturalandırma için) Müşterilerin giriş yapabilmesi için formunuzu güncellemeyi deneyin ve fatura adresleriniz. Veri girişini mümkün olduğunca hızlı ve kolay hale getirmek için özellikle de iki adres aynıysa ne olur? Bu codelab'de yer alan makalede, birden fazla adresi işleme teknikleri hakkında daha fazla bilgi edinin. 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 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: Sayıyı parçalara bölmeyin. Böylece ekipteki herkes kullanıcıların veri girmesini veya kopyalayıp yapıştırmasını, 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 erişmesini sağlar.
  • enterkeyhint="done", mobil klavyenin Enter tuş etiketini, bu sonuncu olduğunu gösterecek şekilde ayarlar alanı ve form artık gönderilebilir (varsayılan next).
ziyaret edin.
Android&#39;de, 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".
ziyaret edin. ziyaret edin.

Adres formunuz aşağıdaki gibi görünecektir:

  • Formunuzu farklı cihazlarda deneyin. Hangi cihazları ve tarayıcıları hedefliyorsunuz? Google'ın nasıl geliştirirsiniz?

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

ziyaret edin.

Daha ileri gidiyoruz

  • Analytics ve Gerçek Kullanıcı İzleme: Form tasarımınızın performansı ile kullanılabilirliğinin gerçek kullanıcılar için test edilip izlenebilmesini sağlar, ve değişikliklerin başarılı olup olmadığını kontrol edebilirsiniz. Yük performansını ve diğer Web Verileri'ni izlemeniz gerekir. ve sayfa analizleri (kullanıcıların ne kadarının adres formunuzdan bu? Kullanıcılar adres formu sayfalarınızda ne kadar zaman geçiriyor?) ve etkileşim analizi (hangi sayfa bileşenlerle etkileşim kuruyor mu, etkileşime girmiyor mu?)

  • Kullanıcılarınız nerede bulunuyor? Adreslerini nasıl biçimlendirirler? Adres için hangi adları kullanıyorlar? veya posta kodu gibi bileşenleri mi var? Frank'in Posta Adresleri Konusunda Kompulsif Rehberi , 200'den fazla ülkede adres biçimlerini ayrıntılı olarak gösteren yararlı bağlantılar ve kapsamlı rehberlik sunmaktadır.

  • Ülke seçiciler, kötü kullanılabilirlik nedeniyle pek bilinmemektedir. Uzun bir öğe listesinde öğe seçmekten kaçınmak en iyisidir ve ISO 3166 ülke kodu standardı şu anda 249 ülkeyi listeler. <select> yerine Baymard Institute ülke seçicisi.

    Çok sayıda öğe içeren listeler için daha iyi bir seçici tasarlayabilir misiniz? Tasarımınızın her birinin çeşitli cihaz ve platformlardan erişilebilir mi? (<select> öğesi, bir ancak en azından hemen hemen tüm tarayıcılarda ve yardımcı cihazlarda kullanılabilir!)

    Blog yayını <input type="ülke" /> tartışır ülke seçicisini standart hale getirmenin karmaşıklığı. Ülke adlarını yerelleştirmek de sorunludur. Ülke Listeleri'nde aşağıdakiler için bir araç bulunur: ülke kodlarını ve adları birden fazla dilde birden fazla biçimde indirme.