HTML5 ile kullanıcıya dayalı bir form oluşturacağımız zaman ise input type için kullanacağımız bazı özellikler bulunmaktadır. Bu özellikleri kullanarak daha fazla bir kullanıcıya dayalı form oluşturabilmemiz mümkündür.
Kullanıcı dostu olarak oluşturduğumuz bu internet sitesi ile form içinde içerisine bazı özellikler kattığımızda tadından yenmeyecek bir duruma ve kullanıcının işini kolaylaştırma, daha hoş bir görünüm oluşturma adına her şeyi yapabilmemiz mümkündür. Örneğin isimin mail adresinin otomatik doldurulması bile kullanıcıya kolaylık sağlayıp işini kolaylaştıran bir işlemdir.
HTML Input Type Öznitelikleri
Yukarıda da bahsettiğimiz gibi kullanıcının bize bir form göndermesini istiyorsak ve isim mail gibi alanların otomatik olarak üzerine geldiğinde kullanıcının tarayıcısının çerezlerinden yararlanarak otomatik olarak doldurulması kullanıcıya kolaylık sağladığı gibi kullanıcı dostu da olacaktır. Bu ve bunun gibi özellikler sizin kodladığınız temayı, formu kullanıcı dostu yapacaktır. Dilerseniz şimdide diğer özelliklere bir göz atalım.
[accordion] [accordion_content title=”HTML Input Value Kullanımı” icon=”” active=”active”]Input ile oluşturacağımız bir metin kutusunda value değerini tanımlayarak artık onun başlangıç olarak tanımlamış olduğumuz bir değeri bulunmaktadır.
<input type="text" name="isim" value="Gökmen">
Yukarıda yer alan kod parçacığında ekrana yazdıracak olduğumuz metin kutusunun içi dolu olarak Gökmen değeri yazılı olacaktır. Eğer biz yazılı olarak gelmesini istemiyor örnek olarak bir değer ve gri gözüken bir şey yazdıracak isek önce ki derslerimizden de hatırlayacağınız gibi bu kısma isminizi girin gibi bir şey yazdıracaksak placeholder ‘ı kullanmak doğru ve yerinde olacaktır.[/accordion_content][accordion_content title=”HTML Input Readonly Kullanımı” icon=”” active=”active”]Eğer girilen değerin değiştirilemez olduğunu belli etmek istiyor isek kullanmamız gereken komut readonly olmalıdır. Bu sayede hiç bir şekilde metin kutusunda ki değer değişmeyecektir.
<input type="text" name="ad" value="Gökmen" readonly>
Yukarıda ise artık readonly yazarak biz bu Gökmen değerinin değişmemesini ve sürekli olarak kalmasını klavyeden girilen hiç bir değerin yazılı olan değerin değişmemesini sağlayacaktır.[/accordion_content][accordion_content title=”HTML Input Disabled Kullanımı” icon=”” active=”active”]HTML ile artık biz bir metin kutusunu tamamen kapatmak için ve gri gözükmesini sağlıyor isek kullanacağımız komut disabled olacaktır.
<input type="text" name="isim" value="Gökmen" disabled>
Yukarıda yer alan komut satırında ise artık bu alanın doldurulamaz olduğunu belli etmiş olursunuz.[/accordion_content][accordion_content title=”HTML Input Size Kullanımı” icon=”” active=”active”]Form içinde biz eğer bir karakterin boyutunu ayarlamak istiyorsak kullanacağımız komut size olacaktır. Zaten size ‘ın artık kullanımı bir çok farklı şey olarak biliyoruz. Input type için ise girilen metin kutusunda ki karakterin boyutunu ayarlamak istiyor isek :
<input type="text" name="ad" value="Gökmen" size="40">
Yukarıda gördüğünüz şekilde artık bu metin kutusunun karakter boyutunu 40 px olarak ayarlamış bulunuyoruz.[/accordion_content][accordion_content title=”HTML Input Maxlenght Kullanımı” icon=”” active=”active”]Eğer gireceğimiz metin kutusuna bir kullanıcıdan alabileceğimiz mesaj olabilir, isim olabilir ve belirli bir karakterin üstünde karakter girilmemesini istiyor isek kullanmamız gereken etiketi maxlenght kullanılacaktır.
<input type="text" name="mesaj" maxlenght="500">
Yukarıda yer alan kısımda ise artık kullanıcıdan alacağımız mesajın toplam karakter uzunluğunun 500 karakterden oluşması gerektiğini belirtmiş bulunuyoruz.[/accordion_content][accordion_content title=”HTML Input Autocomplate Kullanımı” icon=”” active=”active”]Bizim formda tarayıcı çerezlerinden yararlanarak bir çok alanın üzerine gelindiğinde tamamlanmasını istiyor isek bunu kullanmalıyız.
<input type="text" name="ad" placeholder="Gökmen" autocomplate="on">
Yukarıda yer alan şekilde artık isim ve diğer kısımları otomatik olarak tamamlama işlemini gerçekleştirebiliriz. Eğer form etiketinin içine yazsaydık formda ki tüm nesneleri otomatik olarak tamamlama işlemini gerçekleştirecektir. Otomatik tamamlama işlemini yaptırmak istemediğiniz nesnelerin otomatik tamamlama işlemini gerçekleştirmek istemediklerinizde off yapmanız yeterli olacaktır.[/accordion_content][accordion_content title=”HTML Input Autofocus Kullanımı” icon=”” active=”active”]Eğer forma gelir gelmez belli bir nesnenin otomatik olarak oraya odaklanmasını istiyorsanız autofocus özelliğini kullanmamız gerekmektedir.
<input type="text" name="ad" autofocus>
Yukarıda forma gelindiği zaman artık otomatik olarak ad olarak doldurulacak olan nesneye odaklanmış olacak ve klavyeden girilecek değerlerden sonrasında ise direkt olarak bu nesnenin içine yazmaya başlayacaktır.[/accordion_content][accordion_content title=”HTML Input Max ve Min Kullanımı” icon=”” active=”active”]Eğer kullanıcıdan bir tarih girmesini ve bu tarihin belli bir tarihten yukarı yada aşağı olmamasını istiyorsak yapmamız gereken tek şey max ve min değerini kullanmak olacaktır.
<input type="date" max="2018-04-09"> <input type="date" min="1999-04-09">
Yukarıda yer alan kod parçalarında ise yukarıda en fazla seçilebilecek tarih 2018 yılının dördüncü ayının dokuzuncu günü olacaktır. Bir altta yer alan kısımda ise en küçük seçilebilecek tarih 1999 yılının dördüncü ayının dokuzuncu günü ve bundan bir önce ki günün seçilemeyecek olmasıdır.[/accordion_content][accordion_content title=”HTML Input Multiple Kullanımı” icon=”” active=”active”]Eğer kullanıcıdan forma bir dosya, resim yüklenmesini isteniyor ise ve bu dosyaları yüklerken birden fazla değerin seçilmesini istiyorsak multiple komutunu kullanmamız gerekmektedir.
<input type="file" name"img" multiple>
Artık bu sayede dosya seç butonu açılacaktır ve kullanıcıların seçebilecekleri dosyaları birden fazla seçebilme imkanı sağlamış bulunacaksınız.[/accordion_content][accordion_content title=”HTML Input Required Kullanımı” icon=”” active=”active”]Eğer bir alanın doldurulmadan formun gönderilmesini istemiyorsanız yani bu alanını zorunlu olması gerektiğini belli etmek için ise artık bu kodu kullanmamız gerekecektir.
<input type="text" name="ad" placeholder="Gökmen" required>
Artık isim kısmı doldurulmadan form gönderilmeye çalışırsa “Lütfen gerekli alanları doldurun” şeklinde bir mesaj ile karşılarına gelecektir ve artık bu alan doldurulmadan form gönderilemeyecektir.[/accordion_content][accordion_content title=”HTML Input Step Kullanımı” icon=”” active=”active”]Eğer sayı girilecek bir alandan girilen bu sayıların yükseltme ve azaltma değerlerinde basıldığında belirli aralıklarla artmasını istiyorsak kullanacağımız komut step olacaktır.
<input type="number" name"sayi" step="3">
Formu çalıştırdığınızda artık karşınıza bir sayı girdiğinizde ve yükseltip azaltma değerlerine bastığınızda öncelikle 3 ‘e yakın olan sayıya çekecek ve ardından 3’er 3’er arttıracaktır.[/accordion_content] [/accordion]
Yukarıda yer alan şekilde artık HTML5 Input Type özellikleri sayesinde bir çok farklı şekilde ince dokunuşlar yapabilmeniz mümkündür. En çok kullanılanlar ise otomatik tamamlama ve odaklanma ‘nın olduğunu unutmamak gerekir. Eğer bir form yaptığınızda bile her detayına kadar muhteşem olmasını istiyor iseniz bu özelliklere dikkat etmeniz ve gerekeni gerektiği yerde kullanmanız yeterli olacaktır.