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ı

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:

Bu formun HTML kodları şöyledir:

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.

Submit (Gönder-Send)

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,

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.

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,

ya da

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)

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,

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.

Dosya Gönderme (File Attachments)

Form ile birlikte bir dosya göndermek için INPUT damgasında TYPE=file nitelemesi yapılır. Örneğin,

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:

<FORM ENCTYPE="multipart/form-data"
      ACTION="URL"
      METHOD=POST>
Gönderilecek Dosya_Adı:<BR>
  <INPUT NAME="message"
         TYPE="file"> <BR> <BR>
  <INPUT TYPE="submit"
         VALUE="Dosyayı URL ye Gönder">
</FORM>
 

Scribble

Karalama (Scribble on image)

kodlarının vereceği görüntü şöyle olur:

Oransal Veri Alanları (Range Fields)

Bazı hallerde, kullanıcıdan, sıralanan seçeneklerden birisini seçmesini istemek yerine, belirlenecek MIN...MAX değerler arasında bir değer seçmesi istenebilir. Bu durumda, INPUT damgasında TYPE=range nitelemesi yapılır. Örneğin,

kodlarının vereceği görüntü şöyle olur.

Açıklamalar

Range

Bir INPUT tipidir.

MIN, MAX

Seçimin yapılacağı aralığın en küçük ve en büyük değerleri. Örnekte [0...100] aralığı seçilmiştir.

VALUE

Ön-değer. Kullanıcı yeni seçim yapınca ön-değer yok olur. Örnekte ön-değer 25 olarak seçilmiştir.

STEP

Seçimin kaçar kaçar artıp azalacağını belirler. Örnekte step 5 olarak seçilmiştir.

Form Yaratma

Bir web sayfası için form yaratmak, kağıt üzerinde form düzenlemeye benzer. Örneğin, Nüfus Cüzdanı Sureti, Vergi Beyannamesi Formu, vb. formlarda istenen bilgiler kolay okunur bir tablo ya da liste halinde düzenlenir. Her bilgi için o bilginin sığacağı küçük kutucuklar yapılır. Hangi kutucuğa ne yazılacağı, kutucuğun yanında belirtilir. Web formları da buna benzer.

Bu derste bu işin nasıl yapıldığını öğreneceğiz.

Sunucu, gelen verileri bir program (CGI Script) aracılığı ile işler. Yukarıda söylendiği gibi, bu programın önceden, kullanıcılardan gelen verileri, öngörüldüğü biçimde işleyecek biçimde hazırlanmış olması gerekir.

CGI Script'in gelen verileri işleyebilmesi için, her bir veriyi ayrı ayrı tanıması gerekir. Bunun için, formdaki her veri alanını bir değişken olarak tanımlarız. Kullanıcının bu veri alanlarına girdiği veriler de bu değişkenlere atanan değerler olacaktır.

Bunun olabilmesi için, her veri alanına bir değişken_adı verilir. Bunu NAME parametresine verilen değerle yaparız. Örneğin, NAME="pkodu" nitelemesi, bu değişkeni (veri alanını) "pkodu" diye adlandırmaktadır.

Kullanıcı bu veri alanına, diyelim ki, 06530 değerini girmişse, CGI script bunu pkodu := 06530 biçiminde algılayacaktır.

Ancak, yukarıda söylediğimiz gibi, bir programlama dilinde yazılan sözkonusu program, bu dersin konusu değildir. O nedenle, onu CGI Script diye adlandırmakla yetiniyoruz.

Form yaratan damganın adı FORM dur. Bir formun öğeleri

<FORM> Damgasının Bazı Parametreleri:

ACTION

ACTION parametresine verilen değer (niteleme), forma yazılan verilerin işlenmek üzere gideceği programdır. Bu programın tam "URL" adresi, yazılmalıdır. Örneğin, ACTION="http://sunucu/../cgi-bin/script_adı"> Ayrıca, sunucudaki bu CGI scripti formla gelen verileri öngörülen biçimde işleyebilmelidir.

CGI (Common Gate Interface) scriptleri (programları) genellikle sunucu makinada cgi-bin adlı dizinde saklanır. Tabii, bu zorunlu değildir ve sistem yöneticisinin tercihine bağlıdır. Ama, genel bir uzlaşmayı sağlamak isteyenler bu kurala uyarlar.

METHOD

Formu yollamak için kullanılan http metodu. GET ve POST değerlerini alabilir. Default değeri GET dir.

ENCTYPE

Şifreleme yöntemini belirler.

Basit Formlar

Aşağıdaki form kullanıcının adını girebileceği 20 karakter uzunluğunda bir giriş alanı yaratmaktadır. <INPUT> giriş alanını yaratan damgadır.

 <FORM ACTION="URL">
 <INPUT TYPE="text" NAME="ad"
        SIZE=20 VALUE="Adınızı buraya yazınız.">
 </FORM>
 

CGI programını harekete geçirmek için, text alanına adınızı girip ENTER tuşuna basmanız yeterlidir. Formdaki veri alanına girilen ad, CGI scriptine aşağıdaki biçimde gider.

<INPUT> Damgasının Bazı Parametreleri:

TYPE

Veri alanı tipini tanımlar. Text, checkbox, reset, radio, submit, password, image, file, hidden, button, range, scribble gibi değerler alabilir. Default değeri "text" dir. Biraz sonra ayrıntıları açıklanacaktır.

NAME

Veri alanının adı. Programlama dilindeki değişken_adı yerine geçer. CGI scriptine gönderilecek veriyi tutacak değişkenin adıdır. Form yaratıcısı dilediği adı verebilir. Yukarıdaki örnekte NAME="ad" nitelemesi yapılmıştır. Dolayısıyla bu veri alanının adı "ad" olmuştur.

VALUE

Değişkene atanan ön-değer. Kullanıcı bu alana veri girince ön-değer yok olur. Yukarıdaki örnekte VALUE="Adınızı buraya yazınız" nitelemesi yapılmıştır. Ön-değer ataması zorunlu değildir; yani ön-değer konulmayacaksa VALUE parametresi kullanılmaz.

SIZE

Giriş alanının genişliğinin kolon (karakter sayısı) cinsinden ifadesi. Yukarıdaki örnekte SIZE=20 nitelemesi yapılmıştır.

CHECKED

Radio ya da checkbox seçeneğini ön-seçili kılmaya yarar.

DISABLED

Veri alanını kullanıcı girişine kapatır.

SRC

Image belirleyen "%URL" adresini belirler.

Escape Kodları

Gizli Veri Girişi

Şifre ve benzeri girdilerin gizli kalması istenir. Bu gizliliği TYPE="password" nitelemesiyle yapabiliriz:

 <FORM ACTION="URL">
 PIN numaranızı giriniz<BR>
 <INPUT TYPE="password" NAME="Password"
        SIZE=20 VALUE="">
 </FORM>
 

Uyarı: Bu yöntem tam güvenli değildir. Daha güvenli kılmak için, gizli kalması istenen veri önce şifrelenir (encrypted) sonra gönderilir. Ancak bu yöntemde de şifre kırıcıların başarı sağlayabildiğini bilmekte yarar vardır. Bu nedenle, internette güvenlik sorunu ciddi araştırmalara konu olmakta ve değişik yöntemler geliştirilmektedir.

Karma Öğeli Formlar

Farklı türden öğeler içeren daha karmaşık formlar düzenlemek mümkündür.

TYPE

text

<INPUT TYPE=text> nitelemesi, text girişi yapılacak bir veri alanı yaratır. Bu INPUT damgasının default halidir. Dolayısıyla, yukarıdaki kod <INPUT > koduna denktir. "text" tipi en çok 1024 karakter girişine izin verir. Daha çok karakter gerektiren girişler için TEXTAREA damgasını kullanırız. Bunu ileride ele alacağız.

submit

<INPUT TYPE=submit> nitelemesi formu sunucuya yollar.

reset

<INPUT TYPE=reset> nitelemesi formu sıfırlar.

radio

<INPUT TYPE=radio> nitelemesi radyo düğmesi gibi giriş alanı yaratır. Bunu biraz sonra ayrıntılarıyla inceleyeceğiz.

checkbox

<INPUT TYPE=checkbox> nitelemesi işaret kutucuğu gibi giriş alanı yaratır. Bunu da biraz sonra ayrıntılarıyla inceleyeceğiz.

Örnek:

Bu niteleme giriş türünün "submit" olduğu, değişken adının "button" olduğu ve düğme üzerine "Send" yaftasının konulacağını belirler. "botton" değeri ön-tanımlı bir değerdir ve resimde görüldüğü gibi kabartılı bir düğme yaratır. İsterseniz yafta olarak "Gönder", "Yolla" gibi Türkçe sözcükler koyabilirsiniz. MSIE5 "Sorguyu Gönder" deyimini default değer olarak yazmaktadır. Ama isterseniz VALUE parametresine değer vererek, bu yaftayı değiştirebilirsiniz.

Bir form birden çok "submit" düğme içerebilir:

Örnek:

 <FORM ACTION="URL">
 <INPUT TYPE="submit" NAME="button" VALUE=" A ">
 <INPUT TYPE="submit" NAME="button" VALUE=" B ">
 </FORM>
 

Bu düğmelerden birisine basılınca onunla ilgili veri gider. Örneğin, "A" düğmesine basılınca, CGI scriptine

button=+A+

yollanır.

TEXTAREA (Çok Satırlı Text Girişi)

INPUT damgası içindeki TYPE parametresinin default değerinin "text" olduğunu; yani <INPUT TYPE=text> nitelemesi ile <INPUT> nitelemesinin denk olduğunu söylemiştik. "text" tipi ençok 1024 karakter kabul eder. Bazı durumlarda bu alan yeterli olmayabilir. Bu durumlarda ya da girdinin sınırları belirlenmiş bir girdi alanında yapılmasının istendiği durumlarda, INPUT yerine <TEXTAREA> damgası kullanılır. Kullanıcı girişi bitirince, girdiyi CGI scriptine yollamak için gene <INPUT TYPE="submit"> nitelemesi kullanılır.

Örnek:

 <FORM ACTION="URL">
 <TEXTAREA NAME="feedback" ROWS=5 COLS=20>
Konuyla ilgili görüşlerim şöyledir:
...
...
 </TEXTAREA>
 <BR>
 <INPUT TYPE="submit" NAME="button"
        VALUE="Send">
 </FORM>
 

Uyarı:

Bu alana kullanıcı birden çok satır girebilir. Girişin bittiği </TEXTAREA> bitiş damgasıyla belirlenir.

<TEXTAREA> damgasının parametreleri:

ROWS=s

Textarea'nın s tane satırdan oluşacağını belirler. Örnekteki ROWS=5 nitelemesi TEXTAREA nın 5 satırdan oluşacağını söyler.

COLS=k

Textarea'nın k tane kolondan (k tane karakter genişliği) oluşacağını belirler. Örnekteki COLS=20 nitelemesi, giriş alanının 20 karakter genişliğinde olacağını söyler.

Örnek:

<TEXTAREA NAME="metin" ROWS=3 COLS=32> Lütfen görüşlerinizi buraya yazınız. </TEXTAREA>

kodu yazıldığında, kullanıcının önüne herbiri 32 karakter alabilen 3 satırlık bir text alanı gelir. Bu alanda Lütfen görüşlerinizi buraya yazınız. mesajı görünür. Ancak, bu yazı alanı 3x32=96 karakterle sınırlı değildir. Kullanıcı istediği uzunlukta bir metin girebilir. Yeni girişler oldukça, pencere kayarak yeni giriş alanı açar. Burada 3 satır ve 32 kolon nitelemesi, yalnızca, formda yazı alanı olarak belirecek pencerenin boyutlarını gösterir. Girilecek metnin uzunluğunu sınırlamaz.

Lütfen görüşlerinizi buraya yazınız.

Radyo Düğmeleri

Çoktan seçmeli bir test sorusunda olduğu gibi, bir konuyla ilgili mümkün seçeneklerden yalnız birisinin seçilmesi isteniyorsa Radyo Düğmeleri kullanılır. Örneğin, kullanıcıların meslekleri hakkında bilgi edinmek istiyorsanız, aşağıdakine benzer bir form yaratabilirsiniz:

Lütfen aşağıdakilerden birisini seçiniz:

<INPUT TYPE=radio NAME=meslek VALUE="egt"> Eğitim
<INPUT TYPE=radio NAME=meslek VALUE="sag"> Sağlık
<INPUT TYPE=radio NAME=meslek VALUE="san"> Sanat
<INPUT TYPE=radio NAME=meslek VALUE="tic" CHECKED> Ticaret
<INPUT TYPE=radio NAME=meslek VALUE="tur" > Turizm

Bunun görüntüsü şöyle olacaktır:

Lütfen aşağıdakilerden birisini seçiniz:

Eğitim
Sağlık
Sanat
Ticaret
Turizm

Açıklamalar:

• Buradan görüldüğü gibi, INPUT damgasının TYPE, NAME, VALUE ve CHECKED parametreleri vardır.
• TYPE=radio nitelemesi girdinin radyo düğmesi yöntemiyle olduğunu CGI scriptine bildirir.
• NAME=meslek nitelemesi, veri alanının (değişken) adının meslek diye anılacağını belirtir.
• VALUE="" nitelemeleri meslek değişkenine verilecek mümkün değerleri belirtir. Bu değerler ön-tanımlıdır. Listedekilerden başka değer alamaz.
• CHECKED parametresi, kullanıcıya fikir vermek ya da onu yönlendirmek için kullanılır. Bunun karşısındaki madde seçilmiş olarak görüntüye gelir. Ama kullanıcı başka bir maddeyi seçtiğinde bu seçim yok olur; kullanıcının son seçtiği madde etkin hale gelir.
• "radio" tipinde ancak bir seçenek etkin kılınabilir.

Örnek:

 <FORM ACTION="URL">
 <INPUT TYPE="radio" NAME="cinsiyet" VALUE="M">Erkek<BR>
 <INPUT TYPE="radio" NAME="cinsiyet" VALUE="W">Kadın<BR>
 <INPUT TYPE="submit" NAME="button" VALUE="Send">
 </FORM>
 

Örnek:

 <FORM ACTION="URL">
 Yaş grubu<BR>
 <INPUT TYPE="radio" NAME="age" VALUE="a">&lt;18<BR>
 <INPUT TYPE="radio" NAME="age" VALUE="b"
        CHECKED>18-65<BR>
 <INPUT TYPE="radio" NAME="age" VALUE="c">65+<BR>
 <INPUT TYPE="submit" NAME="button" VALUE="Send">
 </FORM>
 

Seçme Kutuları (Check boxes)

Bazan, birden çok seçeneğin seçilmesi istenebilir. Bu durumda, TYPE değeri olarak radio yerine checkbox kullanılır. Bunun kodları şöyledir:

<INPUT TYPE=checkbox NAME="değişken_adı" CHECKED>

Bir pazarlama şirketi, hangi yerli üretim otomobillerin tercih edildiğini (çok seçenekli olarak) araştıran bir anket formunu aşağıdaki gibi düzenleyebilir:

Aşağıdaki seçeneklerden size uygun olan(lar)ı seçiniz:

<INPUT TYPE=checkbox NAME=marka VALUE="fiat"> Tofaş
<INPUT TYPE=checkbox NAME=marka VALUE="ford" CHECKED> Ford
<INPUT TYPE=checkbox NAME=marka VALUE="hyundai"> Hundai
<INPUT TYPE=checkbox NAME=marka VALUE="opel" CHECKED> Opel
<INPUT TYPE=checkbox NAME=marka VALUE="renault"> Renault

Bunun görüntüsü şöyle olacaktır:

Dikkatle incelenince "radio" tipi ile "checkbox" tipi arasındaki farkı hemen görebiliriz.

• Birden çok seçim yapılabilir.
• CHECKED, NAME ve TYPE parametreleri kullanılmıştır. VALUE parametresi de kullanılabilir. Bunu sonraki örnekte göreceğiz.
• NAME="..." nitelemesi, girdi için mümkün seçenekleri belirlemektedir. Dolayısıyla, seçenek sayısı kadar değer alabilmektedir.
• CHECKED parametresinin işlevi önceki gibidir. Tek farkı birden çok seçenek için ön-seçim yapılabilir.
.

Örnek:

 <FORM ACTION="URL">
 Program<BR>
 <INPUT TYPE="checkbox" NAME="prg"
        VALUE="Ada 95" CHECKED>Ada 95<BR>
 <INPUT TYPE="checkbox" NAME="prg"
        VALUE="C++" CHECKED>C++<BR>
 <INPUT TYPE="checkbox" NAME="prg"
        VALUE="COBOL">COBOL<BR>
 <INPUT TYPE="checkbox" NAME="prg"
        VALUE="JAVA" CHECKED>JAVA<BR>
 <INPUT TYPE="checkbox" NAME="prg"
        VALUE="PASCAL">PASCAL<BR>
 <INPUT TYPE="submit" NAME="button"
        VALUE="Send">
 </FORM>
 

Select [Açılan (Pop-Up) Menü]

Bazan açılan bir menüden seçim yaptırmak isteyebilirsiniz. Bu durumda, SELECT damgası kullanılır. <SELECT>...</SELECT> teknesi içinde verilecek seçenekler OPTION ile belirtilir.

Örnek:

 <FORM ACTION="URL">
Kayıt Ortamı<BR>
 <SELECT NAME="Media">
         <OPTION SELECTED> Disk
         <OPTION> Floppy Disk
         <OPTION> Teyp Şeridi
 </SELECT>
 <BR>
 <INPUT TYPE="submit" NAME="button"
        VALUE="Send">
 </FORM>
 

SELECT

<SELECT> damgasının NAME, SIZE, MULTIPLE, DISABLED, TABINDEX, ONFOCUS, ONBLUR, ONSELECT parametreleri vardır.

OPTION

<SELECT>...</SELECT> teknesi içinde verilecek seçenekler OPTION ile belirtilir.

HTML 3.0 sürümü, Radyo Düğmeleri ve Seçme Kutularını tek bir menüde yaratma olanağı getirmiştir. Bunun için SELECT-OPTION menüsü kullanılır. <SELECT NAME=""> ... </SELECT> teknesi içine yazılan OPTION lar "radio" düğmesi gibi işlev görür; yani OPTION ile belirtilen seçeneklerden yalnızca birisi seçilebilir.

<SELECT MULTIPLE NAME=""> ... </SELECT> teknesi içine yazılan OPTION lar checkbox" kutucuğu gibi işlev görür; yani OPTION ile belirtilen seçeneklerden istenildiği kadarı seçilebilir. Bunların nasıl olduğu aşağıdaki iki örnekten görülebilir.

SELECT ile tek-seçmeli

<form action="music">
<select name="music">
	<option value="rocknroll">Rock
	<option>Blues
	<option>Folk
	<option>Jazz
	<option>Classic
</select>
</form>

SELECT ile çok-seçmeli

<form action="music">
<select MULTIPLE name="music">
	<option value="rocknroll">Rock
	<option>Blues
	<option>Folk
	<option>Jazz
	<option>Classic
</select>
</form>

Silbaştan (Reset)

Örnek:

 <FORM ACTION="URL">
 I like to drink:<BR>
 <INPUT TYPE="checkbox" NAME="istek"
        VALUE="kahve" >Kahve<BR>
 <INPUT TYPE="checkbox" NAME="istek"
        VALUE="cay">Çay<BR>
 <INPUT TYPE="submit" NAME="button"
        VALUE="Send">
 <INPUT TYPE="reset" VALUE="Reset"><BR>	
 </FORM>
 

Gizli Veri Alanı

CGI scripti ile yapılan haberleşme istenirse kaydedilerek kullanılabilir. Örneğin, bir çok evreden oluşan bir oyun bitirilmeden oturuma ara verilip, gelecek oturumda kalındığı yerden devam edilmek isteniyorsa, form içinde gizli bir alan yaratılır. Bu alan, kullanıcının hangi evrede olduğunu kaydeder ve CGI ya bildirir. Yeni oturumda, CGI bu evreyi yeniden başlatır.

 <FORM ACTION="URL">
 Move<BR>
 <INPUT TYPE="hidden" NAME="game" VALUE="P123456">
 <INPUT TYPE="text" NAME="move" SIZE=2>
 </FORM>
 

Post

Uyarı:
Bu yalnızca Netscape 2.0 ve üstü tarayıcılarda çalışır.

Örnek:

Örnek:

 <FORM METHOD=post ACTION="mailto:tkaracay@baskent.edu.tr"
                   ENCTYPE="text/plain">
 <INPUT TYPE="text" NAME="ad"
        SIZE=20 VALUE="Adınızı yazınız">
 

Imap (Image Transferi -- Image Maps)

Imap (Image Transferi) kavramı, web sayfasında koordinatları önceden belirlenmiş bir bölgeye tıklandığında, ona ilişkilendirilen bir eylemin (ACTION) gerçekleşmesi olayıdır.

 <FORM ACTION="URL">
 <INPUT NAME="image" TYPE="IMAGE"
        SRC="../images/bulut.jpg" ALIGN=TOP>
 </FORM>
 

İstemci Tarafından Gerçekleştirilen Imap

Kullanıcı koordinatları belirlenmiş bir bölgeye tıklayınca, tarayıcı, o noktaya ilişkilendirilmiş URL adresine doğrudan istek gönderir. URL adresi istemci tarafından doğrudan seçildiğinden, bu yöntemde işlem daha hızlıdır.

Örnek:

Aşağıdaki örnekte resmin sol üst köşesine tıklandığında istemci tarafından imap gerçekleşir.

Görüntü	HTML Kodları
	<MAP NAME="Map_1"> <AREA SHAPE=RECT COORDS = "0,0,50,50" HREF="form_01.html#FORM-Check> </MAP> <IMG SRC="./images/daisies.jpg" ALT=Papatya USEMAP=#Map_1>

<MAP> damgasının parametreleri:

NAME

Map'in adı. Herhangi bir ad verilebilir. Eylemi çağrıştıran bir ad olması tercih edilmelidir.

<AREA> damgasının parametreleri:

SHAPE

Tıklandığında eylemin gerçekleşmesine neden olan bölgeye duyarlı bölge (hot spot) denilir. SHAPE parametresi duyarlı bölgenin biçimini belirler. SHAPE parametresinin değeri, dikdörtgen (RECT), çokgen (POLYGON) ve daire (CIRCLE) biçimlerinden birisi olarak seçilebilir. Açık değeri (RECT) dir.

COORDS

Duyarlı bölgenin sınırlarını belirler. Seçilen SHAPE değerine göre COORDS'un alacağı değerler şunlardır:

RECT için

Sol üst ve sağ alt köşelerinin koordinatları yazılır: x1,y1,x2,y2

POLYGON için

Çokgenin köşelerinin koordinatları yazılır.

CIRCLE için

Çemberin merkezinin koordinatları ve yarıçapı yazılır: x,y,r

<IMG> Damgasının Parametreleri

SRC

İmage'in URL adresi.

ALT

SRC açılamadığında görüntüye gelmesi istenen alternatif mesaj.

USEMAP

Imap'in adı. Bu addan önce kullanılan # simgesi zorunludur.

Bir Dosyayı İstemciden Sunucuya Gönderme

Form, kullanıcının istediği bir dosyayı sunucuya göndermesini sağlar.

Örnek:

Görüntü	HTML Kodları
Gönderilecek Dosya_Adı:	<FORM ENCTYPE="multipart/form-data" ACTION="URL" METHOD=POST> Gönderilecek Dosya_Adı:<BR> <INPUT NAME="message" TYPE="file"> <BR> <BR> <INPUT TYPE="submit" VALUE="Dosyayı Sunuya Gönder"> </FORM>

---

Frame desteklemeyen bir tarayıcı kullanıyorsanız bu sayfayı göremeyebilirsiniz. Netscape 2.0 / Internet Explorer 3.0 ve daha sonraki tarayıcılar Frame'i destekler.

© ttm etudio@etudio.biz
Teknoloji Tanıtım Merkezi, Ankara, TR