HTML DERSleri - Formlar
Có thể bạn quan tâm
| Web Sayfasında Form Yaratma |
| İçindekiler |
 Form Nedir? | Radio Buttons | Gönder Düğmesine Resim Koyma |
| Form Yaratma | Checkbox | Saklı Form Öğeleri |
| Form Gönder | Textarea | Karma Öğeli Formlar |
| Basit Formlar | Pop Up List | Sunucuda Image Map |
| Reset | Select_Option | İstemcide Image Map |
| Password | Image Map | Dosya Gönderme |
| Mail | Range Fields | Escape Kodları |
|
Form Nedir? Etkileşimli Web sayfaları hazırlamanın yolu FORM kullanmaktan geçer. Web'in en kullanışlı niteliği ve belki de, internet üzerindeki öteki servislere göre daha yaygın olmasının nedeni formlardır.
e-bankacılık, e-sigortacılık, e-ticaret, e-eğitim,... gibi etkileşimli (interactive) her işte form kullanılır.
Formlar, kullanıcıdan veri (bilgi) almak için düzenlenir. Kullanıcının girdiği bilgiler sunucu makinada belirlenen bir dosyaya yazılır. Burada biriken verilerin işlenmesi gerekiyorsa, o işi yapacak bir programın ayrıca yazılması gerekir. HTML yalnızca, kullanıcının forma yazdığı verileri kaydeder; onları bir programlama dilinin yaptığı gibi işleyemez.
Kullanıcının form aracılığı ile sunucuya gönderdiği verileri işleyen programlar uygun bir programlama diliyle yazılabilir.
Bu dersin kapsamı dışında olduğu için o konuya girmeyeceğiz. Ama bu işi yapan programa CGI (Common Gate Interface) Script diyeceğiz.
Form < FORM > ... < /FORM > arasına yazılan objelerden oluşur. Bu objeler text, image, liste, tablo, giriş alanları (input fields), 'hypertext link' vb olabilir.
Örnek:
Aada Posta Kodu'nu derleyen bir form paras grlmektedir.Posta Kodu :
Bu formun HTML kodları şöyledir:
< FORM ACTION="http://angora.baskent.edu.tr/../cgi-bin/kodyaz" METHOD=get > Posta Kodu : < INPUT TYPE=text NAME="pkodu" SIZE="6" > Posta Kodu : < INPUT TYPE=submit > <INPUT TYPE=reset > </FORM>Bu kodların anlamını satır satır açıklayalım:
<FORM ACTION="http://angora.baskent.edu.tr/../cgi-bin/kodyaz"> nitelemesi, belirtilen URL adresindeki "kodyaz" programını(CGI script) çalıştırır. <INPUT TYPE=text NAME="pkodu" SIZE="6"> nitelemesi "pkodu" adıyla bir değişken (veri alanı) açar; veri alanı TEXT tipindedir ve 6 karakter uzunluğundadır. Bu veri alanının solundaki "Posta Kodu" kullanıcıya veri alanına girilecek verinin ne olduğunu bildirmek için konulan bir yaftadır. Sunucuya gitmez. <INPUT TYPE=submit> nitelemesi, forma yazılan verilerin sunucuya yollanmasını sağlar. <INPUT TYPE=reset> nitelemesi, formun ilk konumuna (silbaştan) dönmesini sağlar. Sorguyu Gönder (Submit) Kullanıcı formu doldurup bu düğmeye basınca, veri sunucuya gider. Sıfırla (Reset) Bu düğme forma yazılan verileri sıfırlar, formu ilk konumuna dödürür. Dolayısıyla, Submit düğmesinden önce Reset düğmesine basılırsa girilen veriler sunucuya gitmeden silinir. Submit düğmesine basıldıktan sonra Reset düğmesine basılırsa form sıfırlanır, ama girilen veriler sunucuya gitmiş olur.Formun Başlıca Öğeleri
Submit (Gönder-Send)
Bir INPUT tipidir. Bir forma girilen verileri ACTION ile belirtilen URL adresine gönderir. INPUT damgasında TYPE=submit nitelemesi yapılır. Örneğin, <input type="submit">kodlarının vereceği görüntü şöyle olur:
Türkçe MSIE5 tarayıcısı submit düğmesi üzerine Sorguyu Gönder yaftasını koyar. Başka tarayıcılar bu anlama gelen başka yaftalar koyar. Dilerseniz, bu yaftayı değiştirebilirsiniz. Yaftayı değiştirmek için, INPUT damgasında VALUE="yeni_yafta" nitelemesi yapılır. Örneğin,
<input type="submit" VALUE="Gönder">kodlarının vereceği görüntü şöyle olur:
Bazı durumlarda, farklı seçeneklerden birisini göndermek gerekebilir. Bunun için, farklı submit'leri farklı NAME ile adlandırmak ve VALUE yaftalarını kullanıcının farkı kolay kavrayacağı biçime çevirmek gerekir.
Örnek:
Varsayalım ki e-ticaret yapan bir firma ürünleri için web sayfasında sipariş etme ya da ürün hakkında bilgi isteme seçeneklerini sunmaktadır. Kullanıcı ürünü biliyor ve almaya kararlı ise sipariş verecektir. Ürünü bilmiyorsa, bilgi isteyecektir. Bunun için, aşağıdaki gibi iki submit tipi düzenlenebilir.
<input type="submit" NAME="sip" VALUE="Siparişi Gönder"> <input type="submit" NAME="bil" VALUE="Bilgi İste">
kodları aşağıdaki görüntüyü verir:
Farklı submit düğmeleriyle gönderilen mesajların farklı işlenmesi gerekir. Bunu yapmak CGI scriptinin işidir.
Gönder Düğmesine Resim Koyma
İsterseniz submit düğmesine VALUE ile yafta koymak yerine, gönderilecek yeri belirten uygun bir resim (image) koyabilirsiniz. Bunu yapmak için INPUT damgasında SRC="resim.gif" nitelemesini yapmak yeterlidir.
Örnek:
URL adresi "./images/home.gif" olan bir resmi submit düğmesi yerine koymak için,
<input type="submit" SRC="./images/home.gif" ALIGN=left>ya da
<input type="image" SRC="./images/home.gif" ALIGN=left>kodlarından birisini yazmak yetecektir. Çünkü, bazı tarayıcılar TYPE=submit nitelemesini, bazıları ise TYPE=image nitelemesini gerektirir. Bu kodlar submit düğmesi yerine aşağıdaki gibi bir görüntü verir. Tabii görüntü konulan resme bağlıdır.
Reset (Silbaştan-Sıfırla)
Bir INPUT tipidir. Bir forma girilen verileri siler ve formu default haline koyar. INPUT damgasında TYPE=reset nitelemesi yapılır. Örneğin, <INPUT TYPE="reset">kodlarının vereceği görüntü şöyle olur:
Türkçe MSIE5 tarayıcısı reset düğmesi üzerine Sıfırla yaftasını koyar. Başka tarayıcılar bu anlama gelen başka yaftalar koyar. Dilerseniz, bu yaftayı değiştirebilirsiniz. Yaftayı değiştirmek için, INPUT damgasında VALUE="yeni_yafta" nitelemesi yapılır. Örneğin,
<INPUT TYPE="reset" VALUE="Silbaştan">kodlarının vereceği görüntü şöyle olur:
Uyarı: Gönder düğmesine önce, reset düğmesine sonra basılırsa, forma girilen veriler ACTION ile belirtilen URL adresine yollanmış olur; form sonra sıfırlanır. Gönder düğmesine basılmadan önce reset düğmesine basılırsa, forma girilen veriler önce silinir, URL adresine boş form (ya da, varsa, default veriler) gider. Boş formu geri çevirip çevirmemek CGI scriptinin nasıl yazıldığına bağlıdır.
|
Form ile birlikte bir dosya göndermek için INPUT damgasında TYPE=file nitelemesi yapılır. Örneğin,
<INPUT TYPE=file ACCEPT="/etudio/*">kodlarının vereceği görüntü şöyle olur:
Gözat düğmesine tıklayınca, dosyayı seçmeyi sağlayan bir pencere gelir. Seçilip tıklanan dosya INPUT veri alanına girer. Bunu içeren form göderildiğinde, eklenen dosya da ACTION nitelemesinde belirlenen aynı URL adresine gider.gider.
Örnek: