Kullanıcıların masaüstü ve mobil cihazlarda adres verilerini girmesini mümkün olduğunca kolaylaştıran bir form oluşturun. Formun otomatik doldurma, doğrulama ve veri girişi kısıtlamaları için yerleşik tarayıcı özelliklerinden en iyi şekilde yararlandığından emin olun.
Nasıl uygulanır?
Başarılı adres formları oluşturmayla ilgili en önemli yönergeler aşağıda açıklanmıştır.
Anlamlı ve geçerli HTML kullanma
Form oluşturmak için tasarlanmış öğelerden ve özelliklerden en iyi şekilde yararlanın:
<form>,<input>,<label>ve<button>type,autocompleteveinputmode
Bunlar, yerleşik tarayıcı işlevini etkinleştirir, erişilebilirliği iyileştirir ve işaretlemeye anlam katar.
Veri girişi için form alanlarını etiketlemek üzere <label> öğesini kullanın
<input>, <select> veya <textarea> etiketlemek için <label> kullanın. Etiketin for özelliğine girişin id özelliğiyle aynı değeri vererek etiketi bir girişle ilişkilendirin.
HTML özelliklerinden en iyi şekilde yararlanma
Mobil cihazlarda doğru klavyeyi sağlamak ve tarayıcı tarafından temel yerleşik doğrulamayı etkinleştirmek için uygun <input> öğe <type> özelliğini kullanarak kullanıcıların veri girmesini kolaylaştırın.
E-posta adresleri için her zaman type="email", telefon numaraları için ise type="tel" kullanın.
<!-- type="email"/"tel" gives mobile users the right keyboard and enables built-in validation -->
<input type="email" id="email" name="email" autocomplete="email" required>
<input type="tel" id="phone" name="phone" autocomplete="tel">
Erişilebilirliği iyileştirmek ve kullanıcıların verileri yeniden girmesini önlemek için her <input>, <select> ve <textarea> öğesinin uygun bir autocomplete özelliği OLMALIDIR.
Düğmeleri faydalı hale getirme
Düğmeler için <button> kullanın. <input type="submit"> öğesini de kullanabilirsiniz ancak div veya düğme işlevi gören başka bir rastgele öğe kullanmayın. Düğme öğeleri, erişilebilir davranış ve yerleşik form gönderme işlevi sağlar ve kolayca stillendirilebilir.
Her form gönderme düğmesine, ne yaptığını belirten bir değer verin. Ödeme işlemine giden her adımda, ilerleme durumunu gösteren ve bir sonraki adımı netleştiren açıklayıcı bir harekete geçirici mesaj kullanın. Örneğin, teslimat adresi formunuzdaki gönder düğmesini Devam veya Kaydet yerine Ödemeye Geç olarak etiketleyin.
Mümkün olduğunda tek bir ad girişi kullanın
Adları, soyadları, unvanları veya adın diğer kısımlarını ayrı ayrı saklamak için geçerli bir nedeniniz yoksa kullanıcılarınızın adlarını tek bir giriş kullanarak girmelerine izin verin. Tek bir ad girişi kullanmak formları daha az karmaşık hale getirir, kesme ve yapıştırma işlemlerini mümkün kılar ve otomatik doldurmayı kolaylaştırır.
Uluslararası adlara izin verin. Doğrulama için yalnızca Latin karakterleriyle eşleşen normal ifadeler kullanmaktan kaçının. Yalnızca Latin alfabesi seçeneği, adlarında veya adreslerinde Latin alfabesinde olmayan karakterler bulunan kullanıcıları hariç tutar. Bunun yerine Unicode harf eşleştirmeye izin verin ve arka ucunuzun Unicode'u hem giriş hem de çıkış olarak güvenli bir şekilde desteklediğinden emin olun. Normal ifadelerdeki Unicode, modern tarayıcılar tarafından iyi bir şekilde desteklenir.
Çeşitli adres biçimlerine izin verme
Adres formu oluştururken tek bir ülkede bile çeşitli adres biçimleri olabileceğini unutmayın. "Normal" adresler hakkında varsayımlarda bulunmayın.
Mümkünse açık adres için tek bir <textarea> öğesi kullanın.
<!-- textarea handles multi-line international address formats that split inputs can't accommodate -->
<textarea id="address" name="address" autocomplete="street-address" required></textarea>
Bu, çeşitli yerel ve uluslararası adres biçimleri için en esnek seçenektir.
Veri modeliniz ayrı adres satırları gerektiriyorsa otomatik doldurmanın çalışmaya devam etmesi için address-line1, address-line2 (ve gerekirse address-line3) autocomplete jetonlarıyla satır başına bir <input> kullanın. Açık adresi bu jetonların bulunmadığı girişlere bölmeyin ve yalnızca ilk satırı zorunlu kılın.
<!-- Alternative: one input per line, each with its own autocomplete token -->
<input type="text" id="address-line1" name="address-line1" autocomplete="address-line1" required>
<input type="text" id="address-line2" name="address-line2" autocomplete="address-line2">
Kullanıcıların veri alanlarını yanlışlıkla kaçırmasını önlemeye yardımcı olma
Zorunlu alanlara required özelliğini ekleyin.
<input type="text" id="city" name="city" autocomplete="address-level2" required>
Yedek stratejiler
Otomatik doldurma, progresif bir geliştirmedir. Otomatik doldurmayı desteklemeyen tarayıcılarda kullanıcıların adres bilgilerini manuel olarak girmesi gerekir. Semantik HTML kısıtlamaları (ör. type, inputmode ve required) standart form doğrulama olarak düzgün şekilde çalışmaya devam eder.