Hangi form alanlarını kullanabilirim?
Mümkün olan en iyi kullanıcı deneyimini sağlamak amacıyla kullanıcının girdiği verilere en uygun type öğesini ve öğesini kullandığınızdan emin olun.
Kullanıcıların metin doldurmasına yardımcı olma
Kullanıcılara metin eklemeleri için bir form alanı sağlamak üzere <input> öğesini kullanın.
Tek kelimeler ve kısa metinler için en iyi seçenektir.
Daha uzun metin için <textarea> öğesini kullanın.
Bu şekilde birden fazla metin satırı kullanılabilir. Ayrıca öğe kaydırılabilir ve yeniden boyutlandırılabilir olduğu için kullanıcının da girdiği metni görmesi kolaylaşır.
Kullanıcıların verileri doğru biçimde girdiğinden emin olun
Kullanıcıların bir telefon numarası doldurmasına yardımcı olmak istiyor musunuz?
<input> için type özelliğini type="tel" olarak değiştirin.
Mobil cihaz kullanıcılarının, telefon numarasını daha hızlı ve kolay bir şekilde girebilmelerini sağlayan, uyarlanmış bir dokunmatik klavye bulunmaktadır.
E-posta adresi için type="email" biçimini kullanın.
Yine, uyarlanmış bir dokunmatik klavye gösterilir.
Form alanını zorunlu hale getirmek için required özelliğini kullanın.
Form gönderildiğinde, tarayıcı, girişin bir değere sahip olup olmadığını ve geçerli olup olmadığını kontrol eder: Bu örnekte, girişin iyi biçimlendirilmiş bir e-posta adresi olup olmadığını kontrol eder.
Farklı giriş türleri hakkında daha fazla bilgi edinin. Ayrıca, yerleşik doğrulama özellikleri de sağlar.
Kullanıcıların tarihleri doldurmalarına yardımcı olun
Bir sonraki seyahatinize ne zaman başlamak istiyorsunuz?
Kullanıcıların tarihleri doldurmasına yardımcı olmak için type="date" özelliğini kullanın.
Bazı tarayıcılar biçimi, tarihin nasıl girileceğini gösteren yyyy-mm-dd gibi bir yer tutucu olarak gösterir.
Tüm modern tarayıcılar, tarihleri seçmek için tarih seçici biçiminde özel arayüzler sağlar.
Kullanıcıların bir seçenek belirlemesine yardımcı olma
Kullanıcıların olası bir seçeneği belirleyebildiğinden veya seçimi kaldırabildiğinden emin olmak için type="checkbox" kullanın.
Birden fazla seçenek mi sunmak istiyorsunuz?
Kullanım alanınıza bağlı olarak çeşitli alternatifler vardır.
Öncelikle, kullanıcıların yalnızca tek bir seçeneği belirleyebilmesi gerekiyorsa olası çözümlere bakalım.
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 bir seçenek belirleyebilir.
Diğer bir seçenek de <select> öğesini kullanmaktır.
Kullanıcılar mevcut seçenekler listesinde gezinip bir seçenek belirleyebilir.
Sayı aralığı seçme gibi bazı kullanım alanları için range türünde <input> 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 çok <input> öğesi kullanın.
<input> öğesini <datalist> öğesiyle birlikte de kullanabilirsiniz.
Bu size bir metin alanı ile <option> öğeleri listesinin bir kombinasyonunu sağlar.
Kullanıcıların farklı veri türlerini doldurabildiğinden emin olun
Belirli kullanım alanları için daha fazla giriş türü mevcuttur.
Desteklenen tarayıcılarda kullanıcılara renk seçici sağlamak için color türünde bir <input> türü ve başka çeşitli türler de vardır. Kullanıcıların şifrelerini girebilmeleri için type="password" ile <input> özelliğini kullanın. Şifrenin okunamaması için, girilen her karakter yıldız işareti ("*") veya nokta ("•") ile gizlenmiştir.
Form verilerine benzersiz bir güvenlik jetonu eklemek istiyor musunuz?
<input> uygulamasını type="hidden" ile kullanın.
hidden türündeki <input> 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 type="file" ile <input> kullanın.
Hiçbir yerleşik öğenin 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ı olun
Birçok form öğesi ve türü var ama hangisini seçmelisiniz?
Bazı kullanım alanlarında <input type="date"> gibi uygun öğenin ve türün seçilmesi kolaydır. Diğerleri için bu duruma göre değişir.
Örneğin, type="checkbox" veya bir <select> öğesiyle birden fazla <input> öğ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ü bulmak için formunuzu gerçek kullanıcılarla test ettiğinizden emin olun.
Öğrendiklerinizi sınayın
Form alanları hakkındaki bilginizi test etme
Form kontrolü ile birden fazla dosya yüklenebilir mi?
<input type="files"> kullanıyorum.<input type="file" multiple> kullanıyorum.<input type="multiple-files"> kullanıyorum.type="text" ile type="password" arasındaki fark nedir?
type="password" için, şifre girmek üzere uyarlanmış bir dokunmatik klavye gösteriliyor.type="password" kullanılırken, girilen her karakter yıldız işareti (*) veya nokta (•) ile gizlenir.type="password" için şifre girmek için özel bir arayüz gösteriliyor.