Mümkün olan en iyi kullanıcı deneyimini sunmak için kullanıcının girdiği verilerle en alakalı olan öğesini ve öğesini kullandığınızdan emin olun.type
Kullanıcıların metin doldurmasına yardımcı olma
Form alanı sağlamak için <input> öğesini kullanın. Tek kelimeler, kelime öbekleri ve kısa girişler için en iyi seçenek <input>'dir. Daha uzun metinler için <textarea> öğesini kullanın. Bu özellik, birden fazla metin satırına izin verir ve öğe kaydırılabilir ve yeniden boyutlandırılabilir olduğundan kullanıcının girdiği metni görmesini kolaylaştırır.
Kullanıcıların verileri doğru biçimde girmesini sağlama
Kullanıcıların telefon numarası girmesine yardımcı olmak ister misiniz?
<input> için type özelliğini type="tel" olarak değiştirin.
Mobil cihazlardaki kullanıcılar, telefon numarasını daha hızlı girebilmelerini sağlayan uyarlanmış bir dokunmatik klavye görür.
E-posta adresi için type="email" kullanın.
Yine uyarlanmış bir dokunmatik klavye gösterilir.
Form alanını zorunlu kılmak için required özelliğini kullanın.
Form gönderildiğinde tarayıcı, girişin bir değeri olup olmadığını ve geçerli olup olmadığını kontrol eder. Bu durumda, iyi biçimlendirilmiş bir e-posta adresi olup olmadığı kontrol edilir.
Farklı giriş türleri hakkında daha fazla bilgi edinin. Bunlar ayrıca yerleşik doğrulama özellikleri de sağlar.
Kullanıcıların tarihleri doldurmasına yardımcı olma
Bir sonraki seyahatinize ne zaman başlamak istiyorsunuz?
Kullanıcıların tarihleri doldurmasına yardımcı olmak için type="date" simgesini kullanın.
Bazı tarayıcılar, tarihi nasıl gireceğinizi gösteren yyyy-mm-dd gibi bir yer tutucu olarak biçimi gösterir.
Tüm modern tarayıcılar, tarih seçici şeklinde tarih seçmek için özel arayüzler sunar.
Kullanıcıların bir seçenek belirlemesine yardımcı olma
Kullanıcıların olası bir seçeneği belirleyebilmesini veya seçimini kaldırabilmesini sağlamak için type="checkbox" kullanın.
Birden fazla seçenek sunmak mı istiyorsunuz?
Kullanım alanınıza bağlı olarak çeşitli alternatifler vardır.
Öncelikle, kullanıcıların yalnızca tek bir seçenek belirleyebilmesi gerekiyorsa olası çözümlere göz atın.
type="radio" ve aynı name değerine sahip birden fazla <input> öğesi kullanabilirsiniz. Kullanıcılar tüm seçenekleri aynı anda görür ancak yalnızca birini seçebilir.
Diğer bir seçenek ise <select> öğesini kullanmaktır.
Kullanıcılar, mevcut seçenekler listesinde ilerleyip birini seçebilir.
Sayı aralığı seçme gibi bazı kullanım alanlarında <input> türünde range iyi bir seçenek olabilir.
Birden fazla seçenek belirleme imkanı sunmanız gerekiyor mu?
multiple özelliğine sahip bir <select> öğesi veya checkbox türünde birden fazla <input> öğesi kullanın.
<datalist> öğesiyle birlikte <input> de kullanabilirsiniz.
Bu, size bir metin alanı ve <option> öğelerinin listesini sunar.
Kullanıcıların farklı veri türlerini doldurabildiğinden emin olun
Belirli kullanım alanları için daha fazla giriş türü vardır.
Kullanıcılara desteklenen tarayıcılarda renk seçici sunmak için <input> türünde color vardır. Ayrıca, çeşitli başka türler de mevcuttur. Kullanıcıların şifrelerini girebilmelerini sağlamak için <input> ile type="password" kullanın. Girilen her karakter, okunmasını önlemek için yıldız işareti ("*") veya nokta ("•") ile gizlenir.
Form verilerine benzersiz bir güvenlik jetonu eklemek istiyor musunuz?
<input> uygulamasını type="hidden" ile birlikte kullanın.
hidden türündeki bir <input> öğesinin değeri kullanıcılar tarafından görülemez veya değiştirilemez.
Kullanıcıların dosya yükleyip göndermesini sağlamak için <input> ile type="file"'yi kullanın.
Yerleşik öğe veya türün uygun olmadığı özel bir kullanım alanınız varsa özel öğeler de tanımlayabilirsiniz.
Kullanıcıların formunuzu doldurmasına yardımcı olma
Birçok form öğesi ve türü vardır ancak hangisini seçmelisiniz?
Bazı kullanım alanlarında, uygun öğeyi ve türü seçmek kolaydır (ör. <input type="date">). Bazı durumlarda ise bu işlem mümkün değildir.
Örneğin, type="checkbox" ile birden fazla <input> öğesi veya <select> öğesi kullanabilirsiniz.
Liste kutuları ve açılır listeler arasında seçim yapma hakkında daha fazla bilgi edinin.
Genel olarak, en iyi form öğesini ve türünü bulmak için formunuzu gerçek kullanıcılarla test ettiğinizden emin olun.
Anlayıp anlamadığınızı kontrol etme
Form alanlarıyla ilgili bilginizi test edin
Form kontrolüyle birden fazla dosya yüklemek mümkün mü?
<input type="files"> kullanarak.<input type="file" multiple> kullanarak.<input type="multiple-files"> kullanarak.type="text" ile type="password" arasındaki fark nedir?
type="password" için şifre girerken uyarlanmış bir dokunmatik klavye gösterilir.type="password" kullanılırken girilen her karakter yıldız işareti (*) veya nokta (•) ile gizlenir.type="password" için şifre girme amacıyla özel bir arayüz gösterilir.