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?
enterkey
enterkeyhint
enterkeytext
enterkeylabel
value
ö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.