Bilmeniz gereken en kullanışlı 5 Girdi Öğesi Niteliği

Bir web sitesi kurarken öncelik vermeniz gereken şey kullanıcı deneyimidir. Girdi öğesi öznitelikleri Web geliştirme ile ilgileniyorsanız, girdi öğesi öznitelikleri terimine aşina olmalısınız.

Bu blogda, tam da bunu tartışacağız. Size giriş etiketini açıklayacağım ve 5 web geliştirme için kullanılan giriş özelliklerini bilmeli.

Giriş etiketi

Giriş HTML öğesi, kullanıcıdan veri almak için etkileşimli web tabanlı formlar oluşturmak için kullanışlı bir etikettir. Cihaza ve kullanıcı aracısına bağlı olarak, çok çeşitli girdi verisi kontrol widget'ları mevcuttur.

Giriş etiketi, çok sayıda giriş türü ve öznitelik kombinasyonu için çok güçlü ve karmaşıktır.

Bir girdi etiketi örneğini ele alalım. Burada, kullanıcının adının minimum 4 karakterini ve maksimum 8 karakterini doldurabileceği adı girmek için bir giriş etiketi aldık.

Aşağıda gösterilen resim, HTML kodunun bir düzenleyicide nasıl görüntüleneceğini gösterir.

Aşağıdaki resim, yukarıdaki çıktının bir tarayıcıda nasıl görüntüleneceğini gösterir.

Kullanıcıdan gelen verileri bu şekilde kabul edebilirsiniz. Birçok girdi etiketi türü vardır. Bunlardan birkaçı text, button, checkbox, radio, datetime-local, range, search. type özniteliğinin varsayılan değerinin "metin" olduğuna dikkat etmelisiniz.

Bir <input> davranışının type özniteliğinin değerine bağlı olarak önemli ölçüde değiştiğine dikkat etmek önemlidir; sonuç olarak, çeşitli türler kendi bireysel referans sayfalarında açıklanmıştır. Bu özellik sağlanmazsa, metin türü varsayılan değer olarak kullanılacaktır.

Giriş Özellikleri

<Input> öğesi, nitelikleri nedeniyle çok güçlüdür. type niteliği bundan çok önemlidir. Her <input> öğesi, türünden bağımsız olarak HTMLInputElement arabirimini temel aldığından, bunun nedeni, her ikisinin de hemen hemen aynı öznitelikler kümesini paylaşmasıdır. Bununla birlikte, gerçekte, belirli bir girdi türü alt kümesi türü üzerinde bir etkisi vardır. Ek olarak, bazı nitelikler bir girdi türünü etkiler ancak farklı niteliklere göre farklılık gösterebilir.

Burada, bir geliştiricinin çok iyi bilmesi gereken bazı temel Giriş türü niteliklerini listeledik:

• minimum uzunluk
• Maksimum uzunluk
• Engelli
• otomatik odaklama
• Yer tutucu

mini uzunluk

Bu öznitelik yalnızca giriş öğesindeki metin, arama, tel, URL, e-posta veya parola türüyle çalışır. Minlength niteliği, UTF-16 kod birimleri gibi giriş kutusuna girilecek minimum karakteri belirtir.

Bu, maksimum uzunluk içinde belirtilen değerden küçük veya ona eşit, negatif olmayan bir tamsayı değeri olmalıdır. Minuzunluğa bir değer verilmemişse veya geçersiz bir değer belirtilmişse, girişin minimum uzunluğu yoktur. Giriş kutusuna minimum uzunluktan daha az sayıda karakter girilmişse form gönderimi başarısız olur.

Aşağıdaki resim, HTML kodunun bir düzenleyicide nasıl görüntüleneceğini gösterir.

Aşağıdaki resim, yukarıdaki çıktının bir tarayıcıda nasıl görüntüleneceğini gösterir.

Maksimum uzunluk

Bu öznitelik ayrıca, giriş öğesindeki mini uzunluk gibi yalnızca metin, arama, tel, URL, e-posta veya parola türüyle çalışır. maxlength niteliği, UTF-16 kod birimleri gibi giriş kutusuna girilecek maksimum karakteri belirtir.

Bu, minimum uzunlukta belirtilen değerden büyük veya ona eşit, negatif olmayan bir tamsayı değeri olmalıdır. Maksimum uzunluğa bir değer verilmezse veya geçersiz bir değer belirtilirse, girişin maksimum uzunluğu yoktur.

Varsayılan olarak, tarayıcılar, belirtilen maksimum uzunluktan fazlaysa, kullanıcının giriş kutusuna karakter sayısını girmesini engeller.

Aşağıdaki resim, HTML kodunun bir düzenleyicide nasıl görüntüleneceğini gösterir.

Aşağıdaki resim, yukarıdaki çıktının bir tarayıcıda nasıl görüntüleneceğini gösterir.

Engelli

Bu bir boole özelliğidir. Bu öznitelik, kullanıcının girdiyle etkileşime girmemesi gerektiğini belirtir.

Devre dışı bırakılan girişler, kullanım için uygun olmadığına dair başka bir gösterge biçiminin kullanıldığı daha sönük bir renkte özellikle gösterilir. Devre dışı bırakılan öznitelik, tıklama olayını almaz ve devre dışı bırakılan formun değeri, formun gönderilmesiyle birlikte gönderilmez.

Aşağıdaki resim, HTML kodunun bir düzenleyicide nasıl görüntüleneceğini gösterir.

Aşağıdaki resim, yukarıdaki çıktının bir tarayıcıda nasıl görüntüleneceğini gösterir.

otomatik odaklama

Bu aynı zamanda devre dışı bırakılmış öznitelik gibi bir boole özniteliğidir. Bu, sayfa yükleme işlemini tamamladığında giriş kutusunun odaklandığını gösterir. Veya otomatik odak özelliğini içeren giriş öğesi görüntülendiğinde.

Otomatik odaklama özelliğini birden fazla öğe kazanmamıştır. Birden fazla eleman ile konursa, gizli girdiler odaklanamayacağından, özniteliği olan ilk eleman odaklanacaktır. Böylece otofokus özelliği gizli giriş türleri ile kullanılabilir.

Aşağıdaki resim, HTML kodunun bir düzenleyicide nasıl görüntüleneceğini gösterir.

Aşağıdaki resim, yukarıdaki çıktının bir tarayıcıda nasıl görüntüleneceğini gösterir.

Yer tutucu

Yer tutucu bir dize niteliğidir. Giriş alanına girilmesi gereken veriler hakkında fikir veren bir niteliktir.

Bir açıklama yerine giriş alanına girilecek veri türü hakkında ipucu veren bir kelime veya kısa bir cümle olmalıdır. Bu nedenle, örneğin, bir alanın bir kullanıcının adını yakalaması bekleniyorsa ve etiketi "First Name" ise, uygun bir yer tutucu "örneğin Bruce" olabilir.

Aşağıdaki resim, HTML kodunun bir düzenleyicide nasıl görüntüleneceğini gösterir.

Aşağıdaki resim, yukarıdaki çıktının bir tarayıcıda nasıl görüntüleneceğini gösterir.

toparlamak

Bu blogda, özellikle bir web geliştiricisiyseniz, bilmeniz gereken birkaç girdi öğesi özelliğiyle tanıştırdım. Bu öznitelikleri kullanarak, bir HTML formunda veya bir web sayfasında giriş öğesini farklı şekillerde kontrol edebilirsiniz.

HTML de dahil olmak üzere her geçen gün eklenen birçok yeni özellik olmasına rağmen, bunlar bilinmesi gereken özelliklerden birkaçıdır.

Umarım bu blog size yardımcı olmuştur! Web geliştirme veya web tasarım hizmetleri konusunda yardıma mı ihtiyacınız var? Bizimle iletişime geçmekten çekinmeyin!

Editör: Amrutha