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.

 

 

  • HTML Input Value Kullanımı

    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.

  • HTML Input Readonly Kullanımı

    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.

  • HTML Input Disabled Kullanımı

    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.

  • HTML Input Size Kullanımı

    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.

  • HTML Input Maxlenght Kullanımı

    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.

  • HTML Input Autocomplate Kullanımı

    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.

  • HTML Input Autofocus Kullanımı

    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.

  • HTML Input Max ve Min Kullanımı

    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.

  • HTML Input Multiple Kullanımı

    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.

  • HTML Input Required Kullanımı

    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.

  • HTML Input Step Kullanımı

    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.

 

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.

Gökmen Efsun {efsungokmen}

Teknoloji dünyası sınırsız bir alandır. Bu alanda bilgi paylaştıkça çoğalır.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir