Html Form Elemanları

Dreamweaver İçerisinde Form Kullanımı

Kavram kargaşası!

Makaleyi okuyan birçoğunuzun aklına form denildiğinde farklı şeyler geldiğini biliyorum. O yüzden bir iki açıklamaya deyinsek iyi olacak sanırım. Web sitelerinin "İletişim", "Email" ve "Contact Us" gibi kısımları altındaki iletişim formlarının şuan anda anlattığımız konu kapsamına girdiğini düşünebilirsiniz. Fakat biz çok daha geniş anlamda tüm form bileşenlerini ve bunların ne işe yaradıklarını inceleyeceğiz. Öte yandan yazının sonunda böyle bir uygulamanın da nasıl yapılacağını öğreneceğiz.

Birde Forum var tabi, o çok farklı bir konu :) Uzun uzadıya Forum nedir form ile arasında bir ilişki var mıdır, anlatmayacağım. Zira bunu siz de az çok kestirebilirsiniz.

Şimdi DW ile formları yakından incelemeye başlayabiliriz.

Form kavramı

Formlar HTML'in ayrılmaz ve vazgeçilmez parçalarından biridir. Bu yazıda işin biraz teorik kısmına deyineceğiz.

Formlar HTML kodlarında

tagları ile belirtilir. Bu iki tag arasına yazılan tüm form elemanları bu formun bir üyesidir ve bu form elementleri genelde kullanıcı odaklı veri girişleri için kullanılır. Zaten formun genel amacı da içindeki elemanlara girilen verileri ilgili noktaya (ACTION) iletmektir. Konuyu şematik olarak anlatmak gerekirse;





Formlar ve ziyaretçi ile sunucu arasındaki iletişimin işleyiş mantığı



Formların çalışma prensibi genel anlamda bu şekilde. Kullanıcı kendine sunulan formu doldurur ve formu web sunucuya gönderir. (Submit işlemi) Bu aşamadan sonra sunucuda bu formdan gelen veriyi karşılayan ve yakalayan bir program vardır. Bu program formun ACTION kısmında belirtilen ve kodlama dili sunucu taraflı bir dil olan (PHP, ASP, JSP ya da ColdFusion gibi) bir script'tir. Sunucu tarafından bu program ile işlenen ve gerekli yerlere ulaştırılan (veritabanı gibi) bilgiler işlendikten sonra kullanıcıya işlemin sonucu ile alakalı bir HTML çıktısı gösterilir.

FORM parametreleri

Form tagının başlıca parametreleri şunlardır:



Properties panelinden form alanı ile ilgili değişiklikleri yapabilirsiniz
NAME: Formun adını belirtir. Her HTML elemanı gibi her formun ve form elemanının da adı olmak zorundadır.

ID: Temel olarak NAME ile aynı işlevdedir. Fakat JavaScript erişimlerinde ID ile de forma erişmek mümkündür.

ACTION: Formun girdileri nereye yollayacağını belirtir. Bu genelde sunucu taraflı bir programlama dili (ASP, PHP, ASP.NET, JSP, veya ColdFusion gibi) ile yazılmış bir dosyadır.

METHOD: Girdilerin ACTION da belirtilen sayfaya nasıl yollanacağını belirtir. GET ve POST olmak üzere iki standart mevcuttur. GET; adres satırı üzerinden verileri iletir. POST ise kullanıcıya herhangi bir şey yansıtmadan doğrudan post değerler olarak iletir.

TARGET: Frameler konusunda buna uzun uzun deyinmiştik. Buradaki karşılığı da aynı zaten. Formun hangi frame'i hedef aldığını belirtir.

ENCTYPE: Form verilerinin nasıl bir formatta yollanacağını belirtir. Örneğin form kullanarak bir dosya yollama işlemi yapıyorsak ENCTYPE=""multipart/form-data" olarak belirtilmelidir.

Genel olarak Formlar için kullanılan parametreler bunlardı. Şimdi örnek bir Form kodu görelim:

Dreamweaver ile Form kullanımı

Formların genel mantığını kavradığımıza göre artık DW ile nasıl formları kullanacağımıza geçebiliriz. DW içerisinde formlar Insert (Object) panel altındaki "Forms" sekmesinde yer almaktadır.



Insert panelde yer alan Forms sekmesi ile sayfanıza form elemanları ekleyebilirsiniz
Şimdi bu menü altındaki bileşenleri yakından tanıyalım:

Form: Yeni bir Form yaratır. DW içerisinde bir Formun etki alanı kırmızı ince bir çizgi ile belirtilir.

Text Field: Kayıt ya da üye girişi gibi işlemler sırasında veri girişi yapılan (ad, soyad, email, kullanıcı adı veya parola gibi) metin alanlarını formumuz içerisine eklememize olanak sağlar.

Hidden Field: Formlardaki gizli alanlardır. Bunlar kullanıcı tarafından görünmez fakat form içerisinde kullanıcıya yansımaması gereken bilgilerin iletilmesinde kullanılır.

Textarea: Biraz önce belirttiğimiz text field'ların çok satırlı ve daha çok bilgi alabilen türü. İşlev aynı diyebiliriz.

Check Box: Formlardaki inisiyatife bağlı opsiyonlarda işaretlenebilir (Tick) bileşenler yaratmamızı sağlar.

Radio Button: Çoktan seçmeli opsiyonlarda sadece bir cevabın seçilebileceği durumlar yaratmamızı sağlar. Böyle çok seçenekli bir uygulama yapmak için isimleri aynı değerleri farklı seçenekler eklenerek kullanıcının sadece bir tanesini seçmesi sağlanabilir.

Radio Group: Toplu olarak Radio button ekleme işlemini büyük ölçüde kolaylaştıran çok güzel bir araç.

List Menu: Dropdown menü olarak da bilinen çok opsiyonlu açılır menuler yapmamızı sağlar.

Jump Menu: bildiğimiz list menünün biraz daha gelişmiş hali. Yani amacı farklı aslında. Site içerisinde bazı sayfalara hızlı erişim sağlamak istiyorsanız bu Jump menü özelliğini kullanabilirsiniz.

Image Field: Standart butonlardan sıkılanlar için buton yerine resimde kullanabilecekleri güzel bir özellik.

File Field: Form aracılığıyla dosya yollama (Web Upload) işlemleri için kullanılan form bileşenidir.

Button: Bir formdaki girilen verilerin ACTION'da belirtilen sayfaya iletilmesini (submit) sağlayan yada forma girilen tüm verileri sıfırlayan (reset) gibi işlemleri üstlenen formların en önemli bileşenlerinden biri.

Label: Genelde Radio button ve Check Box'lar için olmak üzere tüm form elemanları için kullanılan etiket olayı.

Fieldset: Oldukça güzel fakat pek bilinmeyen bir özellik olan Fieldset eklememizi sağlar. Bunu sadece formlarda değil her yerde kullanabiliriz.

Bu düğmeleri kullanarak sayfanıza ihtiyacınıza göre form bileşenlerini ekleyebilirsiniz. Bir form elemanı eklemek için herhangi bir düğmeye tıkladığınızda DW bize ilgili form elemanı ile ilgili ilk ayarları yapabileceğimiz bir iletişim penceresi gösterecektir.



Eklediğiniz form elemanı ile ilgili erişilebilirlik seçenekleri
Bu pencere kullanımı Edit / Preferences menüsü ile açılan Preferences (Ayarlar) ekranından Accessibility sekmesinden devre dışı bırakılabilir.

Her objede olduğu bunlar için de ince ayarları Properties paneli üzerinden hallediyoruz. Örneğin bir Text field ekledikten sonra bu elemanı seçip Properties üzerinden bu field ile her türlü parametreye erişebilme şansına sahibiz. Söz gelimi "Type" olarak "Multi line" seçerseniz bu Text field bir Textarea, "Password" seçerseniz ise parola girmenize olanak sağlayan parola alanı halini alacaktır.



Properties paneli ile form elemanlarının özelliklerini değiştirebilir ve yönetebilirsiniz
Aynı şekilde herhangi bir form elemanını seçtiğinizde de Properties panelinde bu elemanla ilgili ayarları yapabilirsiniz.

For ve Foreach Döngüsü

for ve foreach döngülerinin kullanımını sırasıyla inceleyelim.

for (i = 0; i < class="rem" style="color: rgb(0, 128, 0); ">// i değişkeni ile yapılacak işlemler  } 

i döngü değişkenine genellikle başlangıçta 0 atanır. Dolayısıyla bir dizinin indekslenmesi ile ilgili işlemlerde kolaylık sağlar.

Çoğu programcı while-do döngüsü kullanmaktansa for dögüsü kullanmayı tercih eder. Hatta bazı yerlerde while-do döngüsünü kullanmak daha uygun olduğu halde for döngüsü kullanırlar.

For döngüsünün de while döngüsünde olduğu gibi karmaşık kullanım şekilleri mevcuttur. Örneğin break ve exit cümlecikleri while döngüsündeki görevinin aynısını for döngüsünde de üstlenmektedir.

For kelimesinden sonra parantez açılmaldır. Parantez içerisine noktalı virgüller ile ayrılmış üç ifade yazılır. Bu ifadeler sırasıyla başlangıç değeri, koşul ve değişim değeridir.

Parantez içindeki üç ifadeden ilki ile döngünün başlangıç değerini belirtiriz. Genellikle tek bir değişken kullanılır, fakat isterseniz aşağıdaki gibi birden fazla değişken için başlangıç değeri atayabilirsiniz.

 for (i = 0, j = 17; …… ; ….) 

Parantez içindeki ikinci ifade ile koşul durumunu belirtiriz. Bu bölüm boolean türünde kontrol edilir. Şart sağlanmış ise false değeri dönecek ve döngüden çıkılmış olacaktır. Eğer koşul henüz gerçekleşmemiş ise true değerini alır ve döngü işlemeye devam eder.

for (i = 0; false; i++) {      // işleme alınmayacaktır. }

Parantez içindeki üçüncü ifade ile değişim miktarını belirtiriz. Başlangıç değerinde olduğu gibi birden fazla değişkenin değişimi eklenebilir.

for (i = 0, j = 100; i < class="rem" style="color: rgb(0, 128, 0); ">// i ve j değişkenleri kullanılabilir }

Bu üç ifade belirtilirken kullandığımız değişkenlerin başlangıç değerlerini daha önceden atayabiliriz. Aşağıdaki örnek bir önceki ile aynı sonucu verecektir.

j = 100;  for (i = 0; i < class="rem" style="color: rgb(0, 128, 0); ">// i ve j değişkenleri kullanılabilir      j -= 5; } 

İsterseniz bu üç ifade yerini boş bırakıp sadece noktalı virgülleri parantezle içerisinde bırakabilirsiniz.

for (;;) {      // herhangi bir işlem.. }

Bu şekilde sonsuz döngü oluşturabilirsiniz. While döngüsü ile ise sonsuz döngü aşağıdaki şekilde olacaktır.

while (true) {     // Herhangi bir işlem. }

Başlangıç değerini belirtirken kullandığımız i değişkeni program içerisinde daha önceden tanımlamadıysanız döngü içerisinde aşağıdaki şekilde belirtmelisiniz.

for (i = 0; i < class="rem" style="color: rgb(0, 128, 0); ">// i değişkeni ile yapılan işlemler }

Örneğin string bir dizi olan sdizi için döngü aşağıdaki şekilde olacaktır.

for (int i = 0; i <>
Bu döngüde tek bir ifade olduğundan süslü parantezleri kullanmayabilirsiniz.
Yukarıdaki örneklerde i değişkeninin değeri, eğer döngü herhangi bir sebeple yarıda sonlandırılmadıysa, döngü sonucunda hedef değerine eşit olur.
Eğer C veya C++ dillerini kullanan deneyimli bir programcıya 1 den 100 ’e kadar olan sayıları C# kodu ile ekrana yazdırmasını isterseniz, aşağıdaki şekilde bir sonuç alırsınız:
for (int i = 0; i <>
Bu program bloğunda i değişkeni 0 dan 99 ‘a kadar değerleri alıyor. Fakat ekran çıktımızda 1 den 100 ‘e kadar olan sayıları görüntülüyoruz. Üstad programcılar genellikle bu yöntemi kullanırlar. Daha akıllıca bir yazım şekli de şöyledir:
for (int i = 0; i < class="kwrd" style="color: rgb(0, 0, 255); ">for (int i = 0; i < class="kwrd" style="color: rgb(0, 0, 255); ">if (i % 3 == 2)         Console.WriteLine("{0,-20}", sdizi[i]);     else         Console.Write("{0,-20}", sdizi[i]);
Döngü içersinde tek bir ifade olduğundan süslü parantezleri kullanmadık. If cümleciği, ilk değerin 3 ‘e bölümünden elde edilen kalanın 2 ye eşit olup olmadığını kontrol ediyor. İ değeri yalnız 2,5,8,11 olduğunda bir sonraki satıra geçiyor ve kolonlarımız oluşuyor.
Genellikle bir dizinin elemanlarını karşılaştırmak için for döngüsü kullanırız. Örneğin 30 kişilik yakın arkadaşlarımızın isimlerinden oluşan bir dizimiz var. Kaç arkadaşımızın isminde E harfi yer aldığını hesaplamak istiyoruz:
char[] harfara = {'e', 'E'}; int eharfliler = 0;  for (int i = 0; i < class="kwrd" style="color: rgb(0, 0, 255); ">if (isimler[i].IndexOfAny(harfara) != -1)         eharfliler++;
Buradaki harfara dizisi char tipinde olup “E” ve “e” karakterlerini içermektedir. If bloğunda String sınıfının bir metodu olan IndexOfAny ile harfara dizisindeki elemanlar karşılaştırılıyor. Eğer isimde herhangi bir e karakteri yer almıyor ise IndexOfAny metodu -1 değerini döndürecektir. Eğer -1 değeri dönmez ise eharfliler değişkeni 1 arttırılıyor.
Eğer bu isimleri başka bir diziye kopyalamak isterseniz :
using System;  class harfarama {     static void Main()     {         string[] isimler =          {             "Ömer Faruk Demir","Ali Can","Elima Aydın", "Sefa Filiz", "Ebru Sevim"                     };         int eharfiler = 0;         char[] harfara = {'z', 'Z'};          // Öncelikle “e” veya “E” harfi olanların sayısını buluyoruz          for (int i = 0; i < class="kwrd" style="color: rgb(0, 0, 255); ">if (isimler[i].IndexOfAny(harfara) != -1)                 eharfliler++;          // yeni bir string dizi oluşturuyoruz          string[] eisimler = new string[eharfliler];          // Bir diziden diğer diziye kopyalama işlemini yapıyoruz          for (int i = 0, j = 0; i < class="kwrd" style="color: rgb(0, 0, 255); ">if (isimler[i].IndexOfAny(harfara) != -1)                 eisimler[j++] = isimler[i];                  // Yeni oluşan dizimizi ekrana yazdırıyoruz          for (int i = 0; i <>
Bu programda üç adet for döngüsü yer alıyor. İlk döngü yukarı da incelediğimizin aynısı, isimleri sayıyor. Program isminde E harfi olanların yer aldığı dizinin uzunluğunu hesaplıyor. İkinci döngü ile kopyalama işlemi gerçekleştiriliyor. Son döngü ile de yeni oluşan dizimiz ekrana yazdırmak için kullanılıyor.
Bir dizinin tüm elemanlarına erişmek için foreach döngüsü daha pratik olacaktır. Decimal tipte bir dizinin tüm elemanlarını foreach döngüsü kullanarak toplayalım:
decimal mtoplam = 0;  foreach (decimal m in mdizi) {         mtoplam += m }
foreach cümleciğinden sonra parantezler içerisine erişeceğimiz dizinin tipinde bir değişken tanımlıyoruz.Daha sonra dizimizin adını yazarak son elemana kadar döngünün sürdürülmesini sağlıyoruz. foreach döngüsünün bazı sınırlılıkları vardır. Örneğin döngü içerisinde dizinin herhangi bir elemanına ulaşamazsınız. foreach döngüsü yalnız döngülerde kullanılmaz. Örneğin string bir değişkenin elemanlarını (karakterlerini) ekrana yazdıralım:
foreach (char karakter in str)     Console.WriteLine(karakter);