Hangi form alanlarını kullanabilirim?
Mümkün olan en iyi kullanıcı deneyimini sağlamak için
kullanıcının girdiği veriler için en uygun type öğesini ve öğesini kullandığınızdan emin olun.
Kullanıcıların metin doldurmasına yardımcı olun
Kullanıcılara metin girebilecekleri bir form alanı sağlamak için <input> öğesini kullanın.
Tek kelimeler ve kısa metinler için en iyi seçenektir.
Daha uzun metinler için <textarea> öğesini kullanın.
Bu, birden fazla metin satırına olanak tanır.
Ayrıca, öğ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 girdiğinden emin olun
Kullanıcıların telefon numarasını doldurmalarına yardımcı olmak istiyor musunuz?
<input> için type özelliğini type="tel" olarak değiştirin.
Mobil cihazlardaki kullanıcılara uyarlanmış bir dokunmatik klavye vardır.
telefon numarasını daha hızlı ve kolay
bir şekilde girmelerini sağlamak.
E-posta adresi için type="email" 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ğer içerip içermediğini ve girişin geçerli olup olmadığını kontrol eder. Bu örnekte,
e-posta adresinin doğru biçimlendirilmiş bir e-posta adresi olduğundan emin olun.
Farklı giriş türleri hakkında daha fazla bilgi edinin. Bunlar, yerleşik doğrulama özellikleri de sağlar.
Kullanıcıların tarihleri doldurmalarına yardımcı olun
Bir sonraki gezinize ne zaman başlamak istiyorsunuz?
Kullanıcıların tarihleri doldurmasına yardımcı olmak için type="date" öğesini kullanın.
Bazı tarayıcılarda biçimi bir yer tutucu olarak (ör. yyyy-mm-dd,
nasıl girileceğini gösteriyor.
Tüm modern tarayıcılar, tarihleri tarih seçici biçiminde seçmek için özel arayüzler sağlar.
Kullanıcıların bir seçenek belirlemesine yardımcı olun
Kullanıcıların olası bir seçeneği belirleyebilmesini veya seçimini kaldırabilmesini sağlamak için type="checkbox" öğesini kullanın.
Birden fazla seçenek mi sunmak istiyorsunuz?
Kullanım alanınıza bağlı olarak çeşitli alternatifler vardır.
İlk olarak, kullanıcıların tek bir seçenek belirlemesi gerekiyorsa olası çözümlere göz atalım.
type="radio" ve aynı name değeriyle birden çok <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 de <select> öğesini kullanmaktır.
Kullanıcılar mevcut seçenekler listesine göz atıp birini tercih edebilir.
Sayı aralığı seçme gibi bazı kullanım alanlarında
range türünde <input> iyi bir seçenek olabilir.
Birden fazla seçenek belirleme olanağı sunmanız gerekiyor mu?
multiple özelliğine sahip bir <select> öğesi veya checkbox türünde birden çok <input> öğesi kullanın.
Ayrıca <datalist> öğesiyle birlikte <input> kullanabilirsiniz.
Bu, size bir metin alanı ve <option> öğelerinin bir listesini 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ü vardır.
Desteklenen tarayıcılarda kullanıcılara renk seçici sağlamak için color türünde bir <input> vardır.
ve başka türler de var. Kullanıcıların şifrelerini girebildiğinden emin olmak için <input> kullanın
type="password" ile. Girilen her karakter bir yıldız işareti ("*") veya nokta ("•") ile belirsizleştiriliyor.
şifresini girin.
Form verilerine benzersiz bir güvenlik jetonu eklemek ister misiniz?
<input> uygulamasını type="hidden" ile kullanın.
hidden türündeki bir <input> değeri kullanıcılar tarafından görülemez veya değiştirilemez.
Kullanıcıların dosya yükleyip gönderebilmesini sağlamak için <input> öğesini type="file" ile birlikte kullanın.
Özel bir kullanım alanınız varsa özel öğeler de tanımlayabilirsiniz. uygun bir yerleşik öğe veya türün olmadığı bir proje oluşturun.
Kullanıcıların formunuzu doldurmasına yardımcı olma
Birçok form öğesi ve türü vardır, ancak hangisini seçmeniz gerekir?
Bazı kullanım durumlarında uygun öğeyi ve türü seçmek kolaydır.
<input type="date"> gibi. Başkaları içinse durum 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ünü bulmak için formunuzu gerçek kullanıcılarla test edin.
Öğrendiklerinizi sınayın
Form alanları hakkındaki bilginizi test edin
Form denetimiyle birden fazla dosya yüklenebilir mi?
<input type="files"> kullanılıyor.<input type="file" multiple> kullanılıyor.<input type="multiple-files"> kullanılıyor.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 belirsizleştirilir.type="password" için şifre girmek üzere kullanılan özel bir arayüz gösteriliyor.