HTML öğesi özellikleri, <form> ve form kontrollerinizi iyileştirebilir.
Kullanıcıların form kontrollerini doldurmasına yardımcı olma
Kullanıcıların formları doldurmasını kolaylaştırmak için <input> öğeleriniz için uygun bir type özelliği kullanın.
Tarayıcılar, date türündeki bir <input> için tarih seçici gibi type için uygun bir kullanıcı arayüzü görüntüler.
Mobil cihazlardaki tarayıcılar, type="tel" için telefon numarası tuş takımı gibi, uyarlanmış bir dokunmatik klavye görüntüler.
Bazı <input> türleri, bir öğenin formu gönderildiğinde ilgili öğenin doğrulama kurallarını da değiştirir.
Örneğin, <input type="url"> yalnızca boş olmaması ve değer bir URL olması durumunda geçerlidir.
Kullanıcıların veri girdiğinden emin olun
Dokunmatik cihazlarda uygun bir dokunmatik klavye sağlamak için farklı özellikler vardır.
İlk seçenek, yukarıda belirtildiği gibi type özelliğini kullanmaktır.
Android ve iOS'te desteklenen diğer bir seçenek de inputmode özelliğidir.
type özelliğinin aksine inputmode özelliği, öğenin kendi davranışını değil yalnızca sağlanan dokunmatik klavyeyi değiştirir. <input> varsayılan kullanıcı arayüzünü ve varsayılan doğrulama kurallarını korumak, ancak yine de optimize edilmiş bir
ekran klavyesi istiyorsanız inputmode kullanmak iyi bir seçenektir.
Dokunmatik klavyelerdeki Enter tuşunu enterkeyhint özelliğiyle değiştirebilirsiniz.
Örneğin, enterkeyhint="next" veya enterkeyhint="done", düğme etiketini uygun bir simgeyle değiştirir.
Bu sayede kullanıcılar mevcut formu gönderirken ne olacağını daha iyi anlayabilir.
Kullanıcıların form gönderebildiğinden emin olun
Diyelim ki bir <form> doldurdunuz, Gönder düğmesini tıkladığınız zaman hiçbir şey olmuyor.
Sorun, düğmenin disabled özelliğiyle devre dışı bırakılmış olması olabilir.
Form geçerli olana kadar Gönder düğmesi devre dışı bırakmak için sıklıkla kullanılan bir kalıptır.
Teoride bu mantık mantıklıdır ancak eksiksiz ve geçerli kullanıcı girişini beklerken Gönder düğmesini devre dışı bırakmamalısınız. Bunun yerine, girilen geçersiz verileri vurgulayın ve kullanıcı formu gönderdiğinde sorunlu alanları vurgulayın.
Bununla birlikte, form başarıyla gönderildikten sonra ancak henüz işlenmezse Gönder düğmesini devre dışı bırakmak isteyebilirsiniz. Devre dışı bırakılan düğmeler hakkında daha fazla bilgi edinin.
Önceden girdikleri verileri göstererek kullanıcılara yardımcı olun
Birden fazla adımdan oluşan bir ödeme formunuzun olduğunu düşünün.
Kullanıcı önceki bir adıma döndüğünde daha önce girilen değerlerin hâlâ mevcut olmasını nasıl sağlıyorsunuz?
Tamamlanan değerleri göstermek için value özelliğini kullanın.
<label for="name">Name</label>
<input value="Hilda" name="name" id="name" type="text">
JavaScript'te bir form denetiminin değerini almanın birden çok yolu vardır.
value özelliğini kullanabilir veya değere getAttribute('value') üzerinden erişebilirsiniz.
Büyük bir fark vardır: value özelliği her zaman geçerli değeri döndürür ve getAttribute() kullanımı her zaman ilk değeri döndürür.
Deneyin.
Ad alanının metnini değiştirin ve konsolu izleyin.
value özelliğinin görünür durumdaki metni, getAttribute('value') özelliğinin her zaman ilk değeri döndürdüğüne dikkat edin.
DOM özellikleri ile DOM özellikleri arasındaki fark hakkında daha fazla bilgi edinin.
checkbox veya radio türündeki <input> öğeleri için checked özelliğini kullanın.
Kullanıcı bir seçenek işaretlediyse ekleyin, aksi takdirde kaldırın.
Kullanıcıların beklenen biçimi anladığından emin olma
placeholder özelliğinin değeri, ne tür bilgilerin beklendiğine dair bir ipucudur.
<label for="name">Name</label>
<input type="text" name="name" id="name" placeholder="Karin">
Bu durum, bir form kontrolünün önceden doldurulmuş görünmesi neden makul görünmediği için kullanıcıların kafasını karıştırabilir. Ayrıca, bir yer tutucu eklemek hangi form alanlarının doldurulması gerektiğini görmeyi zorlaştırabilir. Ayrıca, yer tutucu metnin varsayılan stilinin okunması zor olabilir.
Genel olarak, placeholder özelliğini kullanırken dikkatli olun ve form kontrolünü açıklamak için hiçbir zaman placeholder özelliğini kullanmayın.
Bunun yerine <label> öğesini kullanın.
placeholder özelliğinden neden kaçınmanız gerektiği hakkında daha fazla bilgi edinin.
Kullanıcılara ne tür bilgilerin beklendiği konusunda ipucu vermenin daha iyi bir yolu, açıklama veya örnek eklemek için form kontrolünün altına fazladan bir HTML öğesi kullanmaktır.
Form kontrollerinin doğrulama için hazır olduğundan emin olun
Yerleşik doğrulamayı etkinleştirmek için kullanılabilecek çeşitli HTML özellikleri vardır.
Boş alanların gönderilmesini engellemek için required özelliğini kullanın.
type özelliğiyle ek doğrulamalar zorunlu kılınabilir.
Örneğin, type="url" için zorunlu bir <input> değerinin değeri bir URL olmalıdır.
Kullanıcının minimum sayıda karakter girdiğinden emin olmak için minlength özelliğini kullanın.
Maksimum karakter sayısından daha fazla değere sahip değerlere izin vermemek için maxlength özelliğini kullanın.
<input type="number"> gibi sayısal giriş türleri için bunun yerine min ve max özelliğini kullanın.
Doğrulama hakkında daha fazla bilgi edinin: Kullanıcıların formlara doğru verileri girmelerine yardımcı olun.
Öğrendiklerinizi sınayın
Form özellikleri hakkındaki bilginizi test etme
Dokunmatik klavyede Enter tuşunun etiketini değiştirmek için hangi özelliği kullanabilirsiniz?
enterkeyenterkeyhintenterkeytextenterkeylabelvalue özelliği ile getAttribute('value') arasındaki fark nedir?
value özelliği geçerli değeri, getAttribute('value') ise ilk değeri döndürür.value özelliği ilk değeri, getAttribute('value') ise geçerli değeri döndürür.value özelliği, anahtarı ve değeri döndürür, getAttribute('value') yalnızca değeri döndürür.