Hangi form alanlarını kullanabilirim?
Mümkün olan en iyi kullanıcı deneyimini sağlamak için kullanıcının girdiği verilere en uygun öğeyi ve öğe type kullandığınızdan emin olun.
Kullanıcıların metin doldurmasına yardımcı olma
Kullanıcılara metin eklemek için bir form alanı sağlamak istiyorsanız <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 sayede birden fazla satır metin girilebilir. Öğe kaydırılabilir ve yeniden boyutlandırılabilir olduğundan kullanıcının girdiği metni görmesi de kolaylaşır.
Kullanıcıların verileri doğru biçimde girmesini sağlayın
Kullanıcıların telefon numarası doldurmasına yardımcı olmak ister misiniz?
<input> için type özelliğini type="tel" olarak değiştirin.
Mobil cihaz kullananlara, telefon numarasını daha hızlı ve kolay bir şekilde girmelerini sağlayan uyarlanmış bir ekran klavyesi gösterilir.
E-posta adresi için type="email" değerini 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ğere sahip olup olmadığını ve geçerli olup olmadığını (bu durumda, doğru biçimlendirilmiş bir e-posta adresi olup olmadığını) kontrol eder.
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 seçenek belirlemesine yardımcı olma
Kullanıcıların olası bir seçeneği belirleyebilmesi veya seçeneğin işaretini kaldırabilmesi için type="checkbox" simgesini kullanın.
Birden fazla seçenek sunmak istiyor musunuz?
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 durumunda olası çözümlere göz atalım.
type="radio" ve aynı name değeriyle 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 de <select> öğesini kullanmaktır.
Kullanıcılar, mevcut seçeneklerin listesinde gezinerek bir seçenek belirleyebilir.
Sayı aralığı seçme gibi bazı kullanım alanları için range türündeki <input> iyi bir seçenek olabilir.
Birden fazla seçenek sunmanız gerekiyor mu?
multiple özelliğine sahip bir <select> öğesi veya checkbox türündeki birden fazla <input> öğesi kullanın.
<datalist> öğesiyle birlikte <input> de kullanabilirsiniz.
Bu, bir metin alanı ve <option> öğelerinin listesini içerir.
Kullanıcıların farklı veri türlerini doldurabilmesini sağlayın
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 color türüne sahip bir <input> vardır ve bunun dışında çeşitli başka türler de vardır. Kullanıcıların şifrelerini girebilmesi için <input> ile type="password"'yi kullanın. Girdiğiniz her karakter, şifrenin okunamamasını sağlamak için yıldız ("*") veya nokta ("•") ile gizlenir.
Form verilerine benzersiz bir güvenlik jetonu eklemek istiyor musunuz?
<input> sitesini type="hidden" ile kullanın.
hidden türündeki bir <input> değerinin değeri kullanıcılar tarafından görülemez veya değiştirilemez.
Kullanıcıların dosya yüklemesine ve göndermesine izin vermek için type="file" ile <input> kullanın.
Yerleşik öğe veya türlerin 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ü var. Hangisini seçmelisiniz?
Bazı kullanım alanlarında, uygun öğeyi ve türü (ör. <input type="date">) seçmek kolaydır. Diğerleri için duruma bağlıdır.
Örneğin, type="checkbox" veya <select> öğesiyle birden fazla <input> öğesi kullanabilirsiniz.
Liste kutuları ile 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.
Öğrendiklerinizi test etme
Form alanlarıyla ilgili bilginizi test edin
Form denetimiyle birden fazla dosya yükleyebilir miyim?
<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 girmeye uygun bir dokunmatik klavye gösterilir.type="password" kullanıldığında girilen her karakter yıldız işareti (*) veya nokta (•) ile gizlenir.type="password" için şifre girmek üzere özel bir arayüz gösterilir.