WTK207U-WEB TABANLI KODLAMA
Ünite 5: Form Tasarımı ve Veri İletimi
Giriş
WEB, İnternet üzerinde en çok kullanılan servislerden biridir. WEB sayfaları aracılığıyla bilgiye erişimdeki ve iletişimdeki yenilikler hayatı neredeyse her alanda değiştirmektedir. Teknolojiyle birlikte yeni iş ortamları yaratılırken mevcut işlerin yapılmasında yeni şekiller ortaya çıkmaktadır. İnsanlar sosyal ağlara dâhil olarak farklı iletişim olanaklarına kavuşmakta, bilgisayarlar da kendi aralarında haberleşebilmektedir. Bunun yanında WEB’in tarihine bakıldığında WEB 1.0, WEB 2.0, WEB 3.0 … gibi bir sıradan söz edilebilir. İlk WEB sayfalarında bilgi girişi yapılabilecek arayüz elemanları ve teknolojileri olmadığından, İnternet kullanıcıları kendilerine sunulan bilgiye sadece bakabilmekteydiler. Siteler arasında gezinerek vakit geçirmek anlamına gelen WEB’de sörf tanımı da WEB 1.0 ile ortaya çıkan bir kavramdı. WEB 2.0, İnternet kullanıcılarının WEB sayfalarına bilgi girebildikleri yeni teknolojilerin ortaya çıkmasıyla anılmaya başlandı. Bu durum sosyal ağlar, yeni alışveriş, eğitim ve akla gelebilecek diğer sitelerin ortaya çıkmasını sağladı. Bugünün WEB anlayışında bilinen birçok sitenin içeriğini aslında kullanıcıların kendileri oluşturmaktadır. Başka bir deyişle aslında kullanıcılar olmasa bu siteler basit, belki de boş birer WEB sayfasından başka bir şey olmayacaktır. Yüklenen videolar, gönderilen mesajlar ve bilgi akışları aslında İnternet kullanıcılarının kendi ürünleridir. Teknik anlamda WEB sayfaları, sunucu ve istemci olarak anılan bilgisayarların birbirlerine veri akışı yapmalarıyla iş görmektedir. Şöyle ki; Bir kullanıcı, bilgisayarı başında bir WEB sayfasına erişmek istedi ğinde, kendi bilgisayarı istemci olarak, erişmek istediği WEB sitesinin bilgisayarına yani sunucuya İnternet üstünden erişim sağlar. Sunucu üzerinde barındırdığı WEB sitesini ziyaretçinin bilgisayarı olan istemciye gönderir. Böylelikle kullanıcı istediği WEB sayfasına girmiş olur. Bu klasik akış WEB 1.0’ın çalışma biçimini de ifade etmektedir. WEB sayfalarının temelini oluşturan HTML (HyperText Markup Language) üzerinde yapılan geliştirmeler ve iyileştirmeler ve yeni WEB teknolojileri bu süreci bir adım daha ileriye götürmüştür. WEB 2.0’da sadece WEB sayfaları değil, kullanıcıya ait bilgiler de bilgisayarlar arasında dolaşmaktadır. WEB sayfaları üzerinde daha fazla etkileşim olanağı, HTML formları sayesinde gerçekleşmiştir. Yukarıda sözü geçen kullanıcıların WEB içeriğini kendilerinin oluşturması kavramı bu formlar sayesinde gerçekleşmiştir. Örneğin sosyal ağda kişisel sayfaya resim ekleme, alışveriş sitesinde adres girme, ya da bir haber sitesindeki habere yorum yapma formlar aracılığıyla gerçekleşir.
Form Yapısı
Formlar genellikle kullanıcının bilgilerini ve seçimlerine ait verileri toplayan elemanlar ile bu verileri sunucuya gönderen düğmelerden oluşan bir bütün olarak düşünülebilir. Formlar içerisinde verilerin girildiği ya da seçimlerin yapıldığı araçlara form elemanları denir. Bir formun bir ya da birden fazla form elemanına ait verileri bir bütün olarak sunucuya gönderilebilir. Formlara ve
form elemanlarına ek işlevler kazandırmak ve sınırlamalar getirmek için özellik olarak adlandırılan kodlar kullanılır. Bir formun bir ya da birden fazla form elemanına ait verileri bir bütün olarak sunucuya gönderilebilir. Resim 5.1’de ad ve soyad bilgilerinin girilebildiği bir formun kodları yer almaktadır. Formları daha iyi anlayabilmek için bu örneğe göz atılabilir. Resim 5.1’deki kayıt formunda isim, soyisim girilebilen iki metin kutusu ve bir gönder düğmesi olmak üzere üç adet form elemanını oluşturan kodlar yer almaktadır. Kodlar tarayıcıda açıldığında Resim 5.2’de ekran görüntüsü elde edilmektedir. Kutucuklara girilen bilgiler Gönder düğmesiyle sunucuya gönderilmektedir. Bir siteye üye olmak istediğimiz zaman ad, soyad ve diğer bilgilerimizi bu tür formlara girerek siteye üye olmaktayız. Sayfa 107’de bulunan resim 5.1’deki birinci satırda görüldüğü üzere <form> etiketi içinde action, method ve target gibi kodların bulunduğu görülmektedir. Bu kodlara özellik denilmektedir. Özellikler formlara ve form elemanlarına ek işlevler kazandırmak ya da sınırlamalar getirmek için kullanılırlar. Form örneği formların genel yapısı hakkında bilgi vermektedir. Öyleyse bir formun genel yapısı Resim 5.3’te sunulduğu gibi özetlenebilir. Formlar <form> etiketiyle başlayıp klasik HTML kodlarında olduğu gibi </form> komutuyla sonlandırılır.
Form Özellikleri
Sayfa 108’de resim 5.3’te görüldüğü gibi <form> etiketi içine Tablo 1’de yer alan özellikler eklenebilir. Bu özelliklerin alabilecekleri değerler, kullanım biçimleri ve tanımları tabloda yer almaktadır. Ayrıca bazı özelliklerin hemen altında ve sonraki bölümlerde görüleceği üzere HTML5 ibaresi yer almaktadır. HTML5, o özelliğin HTML5 ile yeni gelen bir özellik olduğunu göstermektedir. WEB sayfası tasarımının temelini oluşturan HTML, zaman içinde geliştirilerek yeni özellikler kazanmaktadır. Bu özellikler gerek WEB sayfası tasarımcılarına gerekse WEB kullanıcılarına kolaylıklar sağlamaktadır. Son olarak olarak HTML5 sürümü kullanılmaktadır. İşlem sonucunu yeni bir pencerede açabilmek için target=”_blank” komutu <form> etiketi içine eklenmiştir. Formların en fazla kullanılan iki özelliği action ve method’dur. Action form verilerinin sunucuda nereye gönderileceğini, method ise verilerin sunucuya nasıl gönderileceğini belirler. CGI, ASP veya PHP gibi uygulamalar form verilerini işlemede kullanılır.
Form içerisinde başka elemanlar yer alıyorsa, onların değeri de bu şekilde adres satırında çiftler hâlinde gözükecektir. Post metodunda ise veriler adres satırında gözükmeden arka planda sunucuya gönderilir.
Get metodundaki gibi şifre türü verilerin adres satırında gözükmesi, güvenlik anlamında sorunlar yaratabilir. Ayrıca get metodunda form bilgilerini içeren adres gönderimi için belirli bir karakter sayısı sınırı vardır.
Name özelliği veri barındıran bütün form elemanlarında kullanılmalıdır. Bir form elemanındaki veriyi tutacak olan değişken adı name ile belirlenir.
Form Elemanları
Form elemanları genellikle <form>…</form> etiketleri arasında kalan alana girilen, kullanıcının veri girişi ya da seçim yaptığı birimlerdir. Örneğin bir siteye kayıt olurken mail adresimizi girdiğimiz metin kutusu veya öğrenim durumumuzu belirlediğimiz açılır listeler birer form elemanıdır. Web sayfalarında yer alabilecek önemli form elemanlarının listesi Tablo 5.2’de özetlenmiştir.
Input (Giriş)
Input elemanı genellikle etiketi içinde kullanılır ve birçok formatta veri girebilmesini sağlar. Veri girişi tipi type komutuyla belirlenir ve kapama etiketi kullanılmadan özellikler eklenir. Input elemanlarına, kullanılan veri tipine göre çeşitli özellikler yüklenebilir. İlgili input elemanında en fazla kullanılan özelliklerin nasıl kullanılacağı ve hangi değerleri alabileceği Tablo 5.3’te listelenmiştir. Ayrıca Tablo 1’de yer alan autocomplete ve name özelliği de Input elemanının bir özelliği olarak kullanılabilir. Yine Tablo 1 ‘deki action, enctype, method, validate ve target özelliklerinin başına form eki eklenerek formaction, formenctype, formmethod, formvalidate ve formtarget şeklinde kullanılabilir. Bu durumda form elemanına, ait olduğu formun özellikleri dışında kendi özellikleri eklenebilir.
Text (Metin Kutusu)
Tek satırlık metin girişi için kullanılır. Resim 5.7’de text için örnek kodlar yer almaktadır.
Password (Şifre)
Kullanıcının şifre girebilmesi için bir metin alanı oluşturur. Resim 5.9’da password için örnek kodlar yer almaktadır.
Tel (Telefon Numarası)
Kullanıcının bir telefon numarası girebilmesi için bir alan oluşturulur. Ancak bazı tarayıcılar bu özelliği desteklemez.
e-Mail (e-Posta)
Kullanıcının e-posta adresini girebilmesi için bir e-Posta alanı oluşturur. Resim 5.14’te e-Mail için örnek kodlar yer almaktadır.
Date (Tarih)
Kullanıcının tarih girebilmesi için bir alan oluşturur. Bununla birlikte Form Elemanları adlı bölümde listelenen diğer tarih ve zaman elemanları (datetime-local, month, week, time) benzer şekilde kullanıldığından kitapta bu elemanlara ayrıca yer verilmeyecektir. Resim 5.16’da date için örnek kodlar yer almaktadır.
URL (WEB Adresi)
Kullanıcının bir WEB adresi girebilmesi için alan oluşturur. Resim 5.18’de url için örnek kodlar yer almaktadır.
Checkbox (Onay Kutusu)
Kullanıcının işaretleyebilmesi için onay kutuları oluşturur. Resim 5.20’de checkbox için örnek kodlar yer almaktadır.
Radio (Radyo Düğmesi)
Kullanıcının seçim yapabilmesi için radyo düğmeleri oluşturur. Resim 5.22’de radio için örnek kodlar yer almaktadır.
Submit (Gönder Düğmesi)
Submit, bundan önceki form elemanları için verilen örneklerde görüldüğü gibi, genel olarak kullanıcının form verilerini sunucuya göndermesi için kullanılır. Resim 5.24’te submit için örnek kodlar yer almaktadır.
Image (Resimli Düğme)
Image aslında bir submit elemanıdır. Genel olarak kullanıcının form verilerini sunucuya göndermesi için kullanılır. Tek farkı gönder düğmesi yerine bir resim kullanılmasıdır. Resim 26’da image için örnek kodlar yer almaktadır.
Reset (Sıfırlama Düğmesi)
Reset genel olarak çok fazla veri girilmesi gereken formlarda önceden girilmiş verilerin tarayıcı üstünde silinmesi için kullanılır. Başka bir deyişle form elemanlarına veri girilmişse, form elemanlarını sayfa yüklendiğindeki değerlerine döndürür. Ancak submit gibi düğmelerle veriler sunucuya gönderilmediği sürece, bilgiler sadece tarayıcı üstünde ilk değerlerine döner. Resim 5.28’de reset için örnek kodlar yer almaktadır.
Button (Düğme)
Button ön tanımlı olmayan düğmeler oluşturur. Başka deyişle gerçekleştirecekleri eylem sayfa tasarımcısı tarafından belirlenir. Örneğin oluşturulan düğme sayfada bir javascript kodunu etkinleştirebilir. Resim 5.30’da button için örnek kodlar yer almaktadır.
File (Dosya Yükleme)
File, kullanıcının tarayıcıda dosya/dosyalar seçebilmesi için kullanılır. Seçim yapıldıktan sonra forma ait submit düğmesiyle dosya sunucuya gönderilebilir. Resim 5.32’de file için örnek kodlar yer almaktadır.
Hidden (Gizli)
Hidden, WEB sayfasındaki formlarda gerekli ancak kullanıcının görmemesi gereken ya da görmesinin bir anlam taşımadığı verileri gizlemek için kullanılır. Formda yer alan gizli veriler de sunucuya gönderilir. Bu elemanı kullanabilmek için javascript ve WEB programlamasındaki dillerden yararlanılmaktadır. Resim 5.34’te hidden için örnek kodlar yer almaktadır.
Color (Renk)
Color kullanıcının bir renk seçebilmesi için kullanılır. Seçilen renk, rengin sayısal ifadesi olarak sunucuya gönderilir. Resim 5.36’da color için örnek kodlar yer almaktadır.
Range (Aralıklı Kaydırma)
Kullanıcının sayı değeri belirleyebilmesi için bir kaydırma çubuğu oluşturur. Belirlenen değer bir form verisi olarak
sunucuya gönderilir. Resim 5.38’de range için örnek label elemanı için hazırlanmış örnek kod ve tarayıcıdaki kodlar yer almaktadır. görüntüsü, bu durumu daha iyi anlayabilmek için yardımcı olacaktır. Number (Sayı)
Kullanıcının değer belirleyebilmesi ya da girebilmesi için bir sayı alanı oluşturur. Bu alan içinde yukarı ve aşağı oklar bulunur. Böylelikle kullanıcı girdiği ya da sayfada beliren değeri yukarı veya aşağı değiştirebilir. Belirlenen değer bir form verisi olarak sunucuya gönderilir. Resim 5.40’ta number için örnek kodlar yer almaktadır.
Search (Arama)
Kullanıcının arama yapabileceği bir alan oluşturur. Aslında bu eleman İnternet üzerinden ya da diğer aramalar için gerekli özelliklere sahip değildir. Mevcut hâliyle yapabildiği tek şey, alana girilen değeri bir arama değeri olarak sunucuya göndermek, kullanıcı bilgisayarında gerekli WEB programlama dilleriyle çeşitli aramalar yaptırmaktır. Ayrıca x simgesiyle arama satırındaki mevcut değeri siler. Resim 5.42’de search için örnek kodlar yer almaktadır.
Button (Düğme)
Button daha önceki input bölümünde bahsedilen, <form> etiketi dışında da kullanılabilen genel amaçlı düğme türleri yaratır. Button için kullanılabilecek özellikler Tablo 4’te özetlenmiştir.
Fieldset ve Legend (Gruplayıcı ve Başlık)
Fieldset form elemanlarını görsel açıdan gruplamak için kullanılır. Fieldset içindeki elemanlar bir kutu içinde gözükürler. Legend ise gruplara başlık vermek için kullanılır. Resim 5.46’da fieldset ve legend için örnek kodlar yer almaktadır.
Select, Optgroup, Option (Açılır Liste, Gruplama Başlığı, Seçenek)
Select açılır liste oluşturmak, option açılır liste elemanlarını belirlemek, optgroup ise gerekli durumlarda bu elemanları gruplandırmak için kullanılır. Resim 5.48’de select, optgroup ve option için örnek kodlar yer almaktadır.
Textarea (Metin Alanı)
Textarea kullanıcının yazı yazabileceği çok satırlı metin kutuları oluşturur. Satır sayısı rows değişkeniyle belirlenir. Resim 5.50’de textarea için örnek kodlar yer almaktadır.
Datalist (Veri Listesi)
Datalist diğer elemanlar için listelenmiş veri sağlar. Bu yönüyle select elemanına benzer. Ancak kullanıcı liste elemanlarına doğrudan göremez. Input elemanı olan list gibi elemanlarla bu elemanlara ulaşılabilir ve kullanıcılara liste elemanları gösterilebilir. Resim 5.52’de datalist için örnek kodlar yer almaktadır.
Label Elemanı
Label elemanı diğer elemanları etiketlemek için kullanılır. Sadece ilişkilendirildiği form elemanıyla bir bütün olarak, o form elemanının özelliğini kazanır. Resim 5.54’deki