Html Form Oluşturma

Merhaba Arkadaşlar,
Bu makalede Html etiketlerini kullanarak form oluşturmayı öğreneceğiz.Öncelikle form nedir bundan bahsedelim.Web sitelerinde gezinirken hemen hemen her sitede form kullanıldığını görüyoruz.En basit sitelerde bile iletişim sayfası veya site içi arama kutuları bulunuyor.Büyük çaplı bir Eticaret sitesini düşündüğümüzde, ürünü almak istiyorsak bizden bir form’a bazı bilgiler girmemizi isterler.Bu şekilde kullanıcıdan bilgi girişi gerektiği durumlarda hep form’ları kullanıyoruz.Bu makalede form oluşturup bu form içerisinde kullanabileceğimiz html etiketlerini inceleyeceğiz.Yani sadece tasarım kısmıyla ilgileneceğiz.Normalde oluşturduğumuz form’lara bilgiler girildikten sonra bu formun sunucuya gönderilmesi ve orada bu bilgilerin işlenip veritabanına kayıt edilmesi gibi durumlar vardır.Bunları yani backend ile ilgili dersleri ilerde anlatmayı düşünüyorum.Tekrar konumuza dönelim ve form oluşturma ile başlayalım.En basit haliyle formları şu şekilde yazabiliriz;

Form Attribute’ları

► action : Form içerisindeki bilgileri göndermek istediğimiz adresi (Url’i) belirtiriz.

► method : Get veya Post değeri verebiliriz.

     ♦ Get : Varsayılan değerdir.Bu değer kullanıldığında, gönderilen form bilgileri sayfa adresi alanında görünür olacaktır.Örneğin;

Bu yüzden önemli bilgileri gönderirken kullanmamanızı tavsiye ederim.Çünkü tüm bilgiler Url adresinde görünecektir.Kullanırken bilgilerin 3000 karakterden uzun olmamasına dikkat edin.Bir Url’in uzunluğu 3000 karakter ile sınırlıdır.Genelde güvenli olmayan veriler için kullanılır.Örneğin Google da search yaparken bu yöntem kullanılır.Google’a araba yazıp aratırsanız Url’de bu yöntemin kullanıldığını görürsünüz.

Get istekleri, önbelleğe alınabilir ve tarayıcı geçmişinde kalabilir.

     ♦ Post : Form bilgileri hassas veya kişisel bilgiler içeriyorsa mutlaka Post değerini kullanmalısınız.Bu yöntem form bilgilerini Url adresinde göstermez.Herhangi bir karakter sınırlaması yoktur.Büyük verileri gönderirken kullanılabilir.Post istekleri, hiçbir zaman önbelleğe alınmaz ve tarayıcı geçmişinde kalmaz.

► enctype : Gönderilen verilerin kodlamasını belirtir.3 değer alabilir;

     ♦ application/x-www-form-urlencoded : Varsayılan değerdir.

     ♦ multipart/form-data : Eğer form içerisinde resim vb.. gönderecekseniz bu değeri kullanmalısınız.

     ♦ text/plain

► autocomplete : Tarayıcının formu otomatik tamamlaması gerekip gerekmediği belirtilir.Varsayılan değeri on’dur.Bu şekilde iken örneğin form’a adınızı Ahmet olarak girdiniz diyelim.Daha sonra tekrar bu alana birisi adını girerken a’ya bastığı zaman tarayıcı Ahmet ismini öneri olarak sunar.Eğer bu değeri off yaparsak herhangi bir öneri durumu olmaz.

► novalidate : Tarayıcının form’daki bilgileri doğrulama zorunluluğunu iptal etmiş oluruz.Örneğin form’daki alanların doldurulmasının zorunlu olduğunu düşünün.Herhangi bir bilgi eksik olduğunda form gönderilmez ve bilgilerin tamamlanması istenir.Bu attribute’u kullandığımızda bilgiler eksik olsa bile form gönderilebilir.

Formlar ile Kullanılan Html Etiketleri

Dikkat : Konuya başlamadan şunu belirtelim.Form tasarlarken kullandığımız tüm html etiketlerine name değerlerini vermeyi unutmayın.Kullanılmadığında tasarım kısmında herhangi bir problem oluşturmaz ama bilgileri sunucu tarafına gönderdikten sonra bu bilgileri name değerlerine göre yakalayıp işlediğimiz için o kısımda mutlaka gerekiyor.

Şimdi tek tek bu etiketleri inceleyelim;

► <input> : En çok kullanılan form nesnesidir.Bu etiketin type attribute’una verilen farklı değerler ile birçok amaç için kullanılabilir.type attribute’una şu değerleri verebiliriz;

     ♦ text : Tek satırlık bir metin girişi için kullanılır.Varsayılan genişliği 20 karakter’dir.

     ♦ email : Geçerli bir email adresinin girilmesini zorunlu kılar.Örneğin email adresini yazarken @ karakteri yoksa hatalı mail adresi olduğu için uyarı verir.

     ♦ password : Bir şifre alanı tanımlar.Girilen değerler yuvarlak siyah daireler şeklinde görünür.

     ♦ button : Buton görünümlü bir input oluşturur.

     ♦ file : Bir dosya seçmemizi sağlar.

     ♦ checkbox : Kullacıya sunmuş olduğumuz seçeneklerden bir seçeneği seçmesini, birden fazla seçeneği aynı anda seçmesini veya hiçbirini seçmemesini istediğimiz durumlarda kullanırız.Örneğin kullanıcıya hobileriniz nelerdir diye sorduğumuzu düşünelim.Burda kullanıcı hiç birini seçmeyebilir, sadece birini seçebilir veya birden fazla seçeneği birlikte seçebilir.

     ♦ radio: Kullanıcıya birden çok seçenek içerisinde sadece birisini seçmesini istediğimiz durumlarda kullanırız.Örneğin kullanıcının cinsiyetini öğrenmek istediğimizde kullanılabilir.Burda dikkat etmemiz gereken yer, kaç tane radio button tanımlıyorsak hepsinin name attibute’una aynı değeri verip gruplamamız gerekiyor.Böylece kaç tane tanımlarsak tanımlayalım kullanıcı sadece birini seçebilir.

     ♦ submit : Form içerisindeki bilgileri sunucuya göndermek için kullanılır.Yani type’ı submit olan input’a tıklandığında içerisinde bulunduğu form’daki girilmiş tüm bilgileri action attribute’unda belirtmiş olduğumuz adrese gönderir.

     ♦ reset : Girilen tüm form bilgilerini varsayılan değerlerine döndürür.Yani formu temizler diyebiliriz. 

     ♦ color : Renk seçmemiz için bir palet oluşturur.   

     ♦ number : Sayısal bir değer girilmesini zorunlu kılar.min ve max attribute’ları ile sayısal değeri belirli bir aralıkta sınırlandırabilirsiniz.Örneğin;

     ♦ range: Bu değer input nesnesini media player’larda ses azaltıp çoğaltma aracı gibi yapar.Uygulama üzerinde daha anlaşılır olacaktır.

     ♦ url : Geçerli bir Url formatı girilmesini zorunlu kılar.

     ♦ date : Tarih seçmemiz için bir seçici oluşturur.min ve max attribute’ları ile tarih seçimini belirli bir aralıkta sınırlandırabilirsiniz.Örneğin;

     ♦ time : Saat seçmemizi sağlar.

     ♦ month : Yıl ve ay seçmemiz için bir seçici oluşturur.

     ♦ week : Yıl ve hafta seçmemiz için bir seçici oluşturur.

     ♦ search : Arama alanları için kullanılır.Normal bir metin alanı gibi davranır.Tek farkı bir içerik yazdıktan sonra sağ tarafında çarpı işareti oluşuyor.Ona basarak içeriği silebiliyoruz.Birde arama motorları için bu input’un bir arama kutusu olduğunu belirtmiş oluyoruz.

     ♦ hidden : Bu değeri genelde sunucu tarafındaki işlemlerimiz için kullanırız.Örneğin bir ürünün id’sini burda tutarız ve sunucu tarafında bu id’yi kullanırız.Bu değere sahip input tarayıcıda görüntülenmez.Kullanımı şu şekilde;

Şimdi öğrenmiş olduğumuz input type değerlerinin tamamıyla örnek bir form uygulaması yapalım.Form’un daha güzel görünmesi için birkaç Css kodu yazdım.Eğer Css bilmiyorsanız sadece html kodlarını inceleyebilirsiniz.Html kodlarımız şu şekilde;

İnput etiketinin type attribute’una verebileceğimiz değerleri öğrendik.Şimdi de bu etikete verebildiğimiz diğer attribute’ları inceleyelim;

     ♦ disabled : İnput’u pasif hale getirir.Pasif olan bir input kullanılamaz ve form gönderilirken bunun değeri gönderilmez.

     ♦ placeholder : Bu attribute’a verilen değer input içerisinde görünür.Ama input’a odaklanıldığında yani birşey yazarken o değer görünmez.Eğer input içindeki yazıları tekrar silersek yine placeholder değeri görünmeye başlar.

     ♦ multiple : Birden fazla seçim yapılmasını sağlar.Örneğin type’ı file olan input’a verdiğimizde birden fazla dosyayı seçebiliriz.Bu attribute’u vermediğimizde sadece bir dosya seçebiliyorduk.

     ♦ min ve max : Type’ı number, date vb.. olan input’larda minimum ve maximum değerler vermek için kullanılır.  

     ♦ maxlength : İnput’a yazılacak max karakter sayısını belirlememizi sağlar.

     ♦ pattern: Bu attribute ile input’lara girilen değerlerin belirli bir koşula göre olmasını sağlayabiliriz.Örneğin bir parolaya küçük harf, büyük harf, rakam girme zorunluluğu getirebiliriz.

     ♦ readonly : İnput’a bilgi girilemez, sadece okuma yapılabilir.

     ♦ required : Bu attribute’un verildiği input’lar doldurulmak zorundadır.Doldurulmadan form gönderilemez.

     ♦ size : İnput’un boyutunu karakter olarak belirlememizi sağlar.

     ♦ step : Örneğin type’ı number olan bir input olsun.Normalde bu input’da değerler 1’er artar ve azalır.Biz bu input’un step attribute’una 8 değerini verdiğimizi düşünelim.Artık 1’er değilde 8’er artıp azalacaktır.

     ♦ value : İnput’un başlangıç değerini belirtir.

     ♦ autocomplete : Tarayıcının input’u otomatik tamamlaması gerekip gerekmediği belirtilir.Varsayılan değeri on’dur.Bu şekilde iken örneğin input’a adınızı Ahmet olarak girdiniz diyelim.Daha sonra tekrar bu alana birisi adını girerken a’ya bastığı zaman tarayıcı Ahmet ismini öneri olarak sunar.Eğer bu değeri off yaparsak herhangi bir öneri durumu olmaz.

     ♦ checked : Type’ı checkbox ve radio olan inputlarda kullanılır.Bu inputlara checked attribute’unu verdiğimiz zaman seçili halde görünürler.

     ♦ accept : Belirli dosya türleri ile işlem yapmak için kullanılır.Örneğin type değeri file olan bir input olsun.Bu dosya seçici ile sadece resimlerin seçilmesini istiyorsak;

     <input type=”file” accept = “image/*” />

     şeklinde yazabiliriz.Böylece sadece resimler seçilebilir.Birden fazla değer verirken değerleri virgül ile ayırırız.Örneğin;

     <input type=”file” accept = “audio / *, video / *, image / *” />

     Dosya uzantılarına göre de sınırlama getirebiliriz.Örneğin sadece .jpg ve .doc uzantılı dosyalar olmasını istiyorsak şöyle yazabiliriz;

     <input type=”file” accept = “.jpg, .doc” />

     ♦ autofocus : Sayfa yüklendiğinde, bu attribute’un verildiği input’a odaklanma olur.

Şimdi bu attribute’ların bir kısmını uygulama üzerinde görelim.Html kodlarına bakıp uygulama üzerinde incelerseniz daha anlaşılır olacaktır.Html kodlarımız;

► <select> ve <option> : Açılır bir liste oluşturmak için kullanılır.Select etiketi içerisinde option etiketi ile liste elemanlarını tanımlarız.Örneğin illerden oluşan bir listemiz olsun ve kullanıcıya bu listeden bir ili seçtirdiğimizi düşünelim.Kodlarımız şu şekilde;

 

Gördüğünüz gibi açılır listemiz oluştu.Varsayılan olarak listenin ilk öğesi görünür durumda geliyor.Bunu değiştirmek isterseniz, option etiketinde selected attributu’nu yazmanız yeterli olacaktır.Örneğin İzmir öğesinin seçili gelmesini sağlayalım;

 

Normalde bu açılır listeden sadece bir öğeyi seçebiliyoruz.Bunu değiştirip birden fazla seçim yapılabilir hale getirmek için select etiketine multiple attribute’unu vermemiz gerekiyor.Örneğin;

Eğer açılır listeniz çok uzunsa liste öğelerini optgroup ile gruplayabilirsiniz.Grup başlıklarını bu etiketin label attribute’u ile veriyoruz.

 

Dikkat : Option etiketlerine vermiş olduğumuz value değerlerini istediğiniz gibi verebilirsiniz.Tasarımda herhangi bir değişikliğe neden olmaz.Bu değerleri sunucu tarafında kullanmak için veriyoruz.

► <textarea> : Normal input’lardan daha geniş metin alanları oluşturmak için kullanılır.Bu alana rows attribute’u ile yükseklik, cols attribute’u ile genişlik değerleri verebiliriz.Örneğin;

Oluşturulan metin alanının boyutunu sağ alt köşesinden tutup değiştirebiliriz.

► <button> : İnputlar ile butonların yapmış olduğu işlevleri zaten yapabiliyoruz.Görünüm olarakta herhangi bir farklılıkları bulunmuyor.Aradaki tek fark inputlarda bu etiket içerisine başka etiketler yerleştiremiyoruz.Ama button etiketini kullanırsak, içerisine farklı etiketlerde koyabiliriz.Button etiketinin type attribute’una button, reset ve submit değerlerini verebiliyoruz.

► <fieldset> ve <legend> : Fieldset ile form’da bulunan nesneleri gruplayabiliriz.Legend ile de bu gruplara başlık tanımlaması yapabiliriz.Örneğin;

 ► <datalist> : İnput ile oluşturulmuş bir metin alanına daha önce tanımladığımız bir listeden seçim yaparak metin girişini sağlayabiliriz.input etiketinin list attribute’una datalist’in id değerini veriyoruz.Datalist içerisinde de option ile liste öğelerini tanımlıyoruz.Kullanımı şu şekilde;

Dikkat : Html5 ile gelen yeni bir etiket olduğu için Safari tarayıcısı hala tam olarak desteklemiyor.

Yeni bir makalede görüşmek üzere.

Leave a Reply

TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +