Adres formuyla ilgili en iyi uygulamalar codelab'i

Sam Dutton

Bu codelab'i takip etmek için ikinci bir sekmede bu Glitch'i açın.

Ç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 sesli olarak 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?

Not: Chrome'da otomatik doldurma önerilerini nasıl sileceğinizi hiç merak ettiniz mi? * Windows: Shift + delete * Mac: Shift + fn + delete

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ığı ad ve adresleri görüntülemek ve düzenlemek için Yönet… seçeneğini de görürsünüz.

Tahmin edilen değerlerle otomatik doldurma ve otomatik tamamlama için kullanıcı arayüzü.

Not: input, select veya textarea için uygun bir otomatik tamamlama değeri varsa bunu kullanmanız gerekir.

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

Dikkat: Bu codelab'de yerelleştirme veya uluslararasılaştırma ele alınmamaktadır (😜). Kullanıcılarınızın bulunduğu yere bağlı olarak, adres bileşenleri için kullanılan farklı adları (ZIP, posta kodu, Eircode veya PIN) ve adres biçimlerini (aynı dil içinde bile) dikkate almanız gerekir. Sitenizin birden fazla yerel ayar için özelleştirilmesi gerekebilir ancak bu kod laboratuvarındaki adres formu esneklik için tasarlanmıştır ve çeşitli adresler için "yeterince iyi" çalışmalıdır.

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.

Not: Formunuzdaki adres verilerinin nasıl kullanıldığını göz önünde bulundurun. Ne için kullanılır? Veri gereksinimlerini ve bunları kimin belirlediğini anladığınızdan emin olun.

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 (ö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. 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).

Enter düğmesi etiketini ayarlamak için enterkeyhint özelliğini kullanın: "sonraki" ve "bitti".

type="number" kullanıldığında, sayıları artırmak için yukarı/aşağı ok eklenir. Bu, telefon, ödeme kartı veya hesap numarası gibi veriler için anlamlı değildir. Bunun yerine, telefon numaraları için type="tel" kullanmanız gerekir. Diğer numaralar için type="text" kullanın (veya varsayılan olarak text olduğu için özelliği kaldırın) ve mobil cihazlarda sayısal klavye almak için inputmode="numeric" ekleyin.

Not: Telefon numarası için tek bir giriş kullanmayla ilgili herhangi bir sorun görüyor musunuz? Telefon numarasının bölümlerini (ülke ve alan kodu) ayrı olarak mı saklıyorsunuz? Neden duruyorlar?

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:

• 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 hizmetten yararlanın.

Not: Form oluşturmaya başlamadan önce hangi verilerin gerekli olduğunu ve bu verilerin kesinlikle gerekli olup olmadığını anladığınızdan emin olun. İhtiyacınız olmayan verileri istemeyin. Form karmaşıklığını azaltmanın ve gizliliği iyileştirmenin en kolay yolu gereksiz alanları kaldırmaktır. Daha az veri depolamak, arka uç veri maliyetini ve sorumluluğunu da azaltır.

Daha ileri gitme

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