Html Dersleri (5.Bölüm)

Form Hazirlama


Formlar, kullanicidan bilgi girisi oldugu zaman bunlari okunmaya hazir duruma getirmeye yarar. Diger bir deyisle, kullanici ile programci arasinda bir köprü kurar. Programciya mail atmak, WWW üzerinden arastirma yapmak, belirli bir anahtar sözcügü kullanarak arama yapmak, ve hatta telefon bilgi bankalarina girmek form kullanarak halledilir.

Form konusunu anlayabilmek için, HTML programlamayi bilmek ve en azindan bir programlama diline ( tercihan shell, PERL veya C ) hakim olmak gereklidir.

Form hazirlamaya başlamadan önce bu uygulamamızı yapacağımız adımlar hakkında bilgilendirelim ve aklınızda herzaman kalsın.

. Programin, form hazirladigimizi bilmesi için, <form .. belirteci açilir. Bu belirtecin iki parametresi vardir bunlarıda sizlere aşağıda iki satır ile belirteceğim.

Method

"Method", kullanicinin girdigi bilgileri ne sekilde alacagimizi belirler. Bu konunun disinda kalmasina ragmen, POST metodunu kullanmanizi tavsiye ederim.

Action

Bu bölüme, alinan girdileri isleyecek programin ismi yazilir. Bu program ayri bir cgi-bin/ dizini altinda durmalidir.

Bir form başlangıcımızı yapabilmemiz için aşağıda verdiğim örnek gibi olabilir.

[HTMLhttp:] <form method="POST" action="http://compclup.ceng.metu.edu.tr/cgi-bin/postala" > [/html]

. Simdi kullanicinin girecegi bilgiler için forma birkaç bölüm ekleyebiliriz. Bunun için asagidaki parametreleri kullanan <INPUT .. > belirtecine gerek vardir.

Name

Kullanicinin klavyeden girdigi bilgilerin tutuldugu degisken burada tutulur.

Size

Bu sayi, ekranda kullaniciya ayrilan boslugun ne uzunlukta olacagini saptar.

Type

Anket tipi (burada anlatilmayacaktir)

Örnek bir girdiyi oluşturmak istiyorsak aşağıda verdiğim örnek bir program yazabiliriz.

HTML-Kodu:
<INPUT NAME="isim" SIZE=36>
Birden fazla satir kullanma durumunda, farkli bir opsiyonu, <TEXTAREA ...> </TEXTAREA> opsiyonunu seçmelisiniz.

Name

Yine ayni degisken ismi.

Rows

Bu sayi kullanicinin yazdigi alanin kaç satir olacagini belirler.

Cols

Bu sayi kullanicinin yazdigi alanin kaç sütun olacagini belirler.

HTML-Kodu:
<TEXTAREA NAME="body" rows=10 cols=60></TEXTAREA>
Yukaridaki alana küçük bir metin de yerlestirebilirsiniz.

HTML-Kodu:
<TEXTAREA name="body rows=10 cols=60> Bu metin, kullanicinin yazacagi alanda görüntülenir. </TEXTAREA>
Neredeyse bitti. Kullanicinin tüm bilgileri girdikten sonra formu ister yollamasi, isterse tekrar silmesi için ikon yaratan bir <input .. belirtecine gerek vardir. Bu belirtecin aldigi opsiyonları aşağıda belirttim.

Type

Kullanilan formun isleme sokulabilmesi için type degeri submit olmalidir. Baska bir opsiyon da kullanicinin girdigi tüm bilgileri silmektir. Bunun için type'dan sonra reset gelmelidir.

Value

Buton içine bir mesaj yazacaksaniz, bu opsiyonu kullanin. Kullaniciyi bilgilendirmek amaciyla herhangi bir metin yazilabilir.

Reset opsiyonu, formu tamamen temizlemez, sadece formdaki degerler eski hale dönerler.

Sizlere bir tipik örnek vermem gerekirse aşağıdaki gibi verebilirim.

HTML-Kodu:
<input type="submit" value="Bu formu gönder" > <input type="reset" value="Temizle" >
. Artik formun yazilimi bitmistir. Formun sonuna </FORM> belirteci konarak form kapatilir

HTML-Kodu:
<hr> <p> <form method="POST" action="http://fmtr.net/cgi-bin/deneme"><P> E-mail adresiniz : <INPUT NAME="email" SIZE=38>>/P><P> Isminiz : <INPUT NAME="name" SIZE=42><P> Buraya birseyler yazabilirsiniz: <P> <TEXTAREA name="body" rows=10 cols=50>Something>/TEXTAREA> <P> <input type="submit" value="Gönder"> <input type="reset" value="Temizle"></P> </FORM> <p> <hr>
Yukaridaki formu doldurup gönderin. Form, compclup.ceng.metu.edu.tr adresi üzerinde bir programi çalistiracaktir. Bu program degiskenlerin ismini ve aldiklari degerleri ekrana basacaktir.

Kullanicinin yazdigini okuyabilmek

Bundan sonra kullanicinin forma ne tür bilgiler girdigini bulmak kaldi. Form bilgilerini okuyabilmek için tercihan perl veya shell bilmek gerekir. Burada örnegi verilecek cgi-bin programlarini herhangi bir dilde yazabilirsiniz, buradaki örnekler, hemen herkesin asina oldugu shell script ile yazilacaktir.

Simdi asagidaki bilgilerin girilmesini isteyen bir form hazirlayalim ve .html formatinda yazalim.

. Haftanin bir günü (gün)
. Bir sifat (sifat)
. Bir fiil (fiil)

Yarattiginiz form, cgi-bin dizini altindaki (bu dizine yazma hakki elde etmeniz gereklidir) form.cgi programini çalistirsin.

Bir gün, iki insan ismi, bir sifat ve bir fiil giriniz

HTML-Kodu:
<html> <title> Form hazirlama </title> <h3> Bir gün, iki insan ismi, bir sifat ve bir fiil giriniz..</h3> <hr> <form method="POST" action="http://www.fmtr.net/cgi-bin/madlib.pl"> <UL> <LI> Haftanin bir günü <input name="gun"> <LI> Bir sifat <input name="sifat"> <LI> Bir fiil <input name="fiil"> </UL> <input type="submit" value="Formu postala"> <input type="reset" value="Ekrani temizle"> </form> </html>
Yukarida sadece çalistirilmayi bekleyen bir form hazirladik. Aslinda bu haliyle program çalismayacaktir, çünkü henüz cgi-bin altina yerlestirmemiz gereken shell programimizi (kodu) yazmadik. Yazacagimiz kodun amaci, kullanicinin girdigi bilgileri ekranda aynen göstermek.

Kod:
## # ayraç.sh # Bu program, çagirildigi zaman, ekrana $STRING_QUERY degiskeni # içindeki degerleri basar. Program, $QUERY_STRING içindeki degisken # sayisini 3 olarak kabul eder. ## #!/bin/bash echo "Content-type: text/plain" echo deger=`echo "$QUERY_STRING" | awk -F"&" '{ print $1 " " $2 " " $3 }'` echo $deger deger1=`echo "$deger" | awk '{ print $1 }'` deger2=`echo "$deger" | awk '{ print $2 }'` deger3=`echo "$deger" | awk '{ print $3 }'` sabit1=`echo "$deger1" | awk -F"=" '{print $2}'` sabit2=`echo "$deger2" | awk -F"=" '{print $2}'` sabit3=`echo "$deger3" | awk -F"=" '{print $2}'` echo $sabit1 $sabit2 $sabit3
Evet arkadaşlar form hazırlama konusunuda sizlere anlata bilmişsem ne mutlu bana hepinize kolay gelsin, başarılar dilerim.