bölüm 6 - WordPress.com

Transkript

İleri Düzey Uygulamalar-ODTÜ-2000
BÖLÜM 6
İleri Düzey Uygulamalar
15. Tablolar
15.1 Tablo Oluşturma
Tablolar HTML diline 3.2 sürümü ile birlikte girmiştir ve yaygın olarak
kullanılmaktadır. Tablo kullanımı ile sayfada bilgiyi görüntülemek ve bazı tasarımları
yapmak daha kolay hale gelmiştir.
Tablolar herhangi bir Kelime İşlemci (word processor) programı veya Hesap Tablosu
(spreadsheet) programında kullandığımız tablo yapılarına çok benzer bir yapıdadır
ve aynı amaç için kullanılabilirler.
HTML dokümanlarında Tablo oluşturmak için ilgili belirteçleri kullanmanız
gerekmektedir. Dosya içerisinde tablo <TABLE> ... </TABLE> belirteçleri
kullanılarak yaratılmaktadır. Sayfa içerisinde kullanılışı;
<TABLE>
Tablo İçeriği
</TABLE>
şeklinde olmaktadır. Tablo içerisinde yer alan hücre ve satırları tanımlamak için ilgili
belirteçlerin kullanılması gerekmektedir.
<TABLE> belirtecinin en çok kullanılan özelliği BORDER (çerçeve) seçeneğidir. Bu
özellik ile tablonun çerçeve kalınlığı ayarlanabilmektedir.
15.2 Satır ve Hücreler
Bir tablo içerisine istenen bilgiler satır olarak girilir. Önce birinci satır oluşturulur,
içerisine bilgiler hücreler halinde girilir ve satır sonlandırılır, daha sonra diğer satıra
geçilir. Tablo içerisinde bir satır tanımı yapmak için <TR> belirteci kullanılır, bu
belirteç </TR> belirteci ile sonlandırılır.
Bir hücreden oluşan (bir satır ve bir sütun) tablo oluşturmak için dokümanımızda;
<TABLE>
<TR> 1.Satır </TR>
</TABLE>
60
Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümü
satırlarını
yazmamız
gerekir.
Bu
dosyanın
gözgezdiricideki görüntüsü Şekil 6.1’de verilmektedir.
Genel olarak satırlar içerisine bilgiler doğrudan <TR>
… </TR> belirteçleri arasına girilemez, bilgi girmek
için bilgi hücreleri <TD> … </TD> belirteçleri
kullanılır.
Bir
satırda
istenildiği
kadar
hücre
kullanılabilir, ancak her satırdaki hücre sayısının eşit
olmasına dikkat edilmelidir, aksi takdirde tabloda
oluşan sütünlar hizasız olarak yerleştirilecektir.
Şekil 6.1 Bir hücreli
tablo örneği
<TABLE>
<TR>
<TD> 1.hücre
<TD> 2.hücre
<TD> 3.hücre
</TR>
<TR>
<TD> 1.hücre
<TD> 2.hücre
<TD> 3.hücre
</TR>
</TABLE>
Şimdi iki satır ve altı hücreden oluşan bir tablo
yaratalım. Bunun için aşağıdaki bilgiyi yazmamız
gerekecektir.
</TD>
</TD>
</TD>
</TD>
</TD>
</TD>
Bu
bilgiyi
içeren
dosya
gözgezdiricide
incelendiğinde Şekil 6.2’deki gibi görülecektir.
Şekil 6.2 Bir tablo örneği
15.3 Tablo Hizalama
Tablolar normal olarak sayfada sola dayalı olarak ve yazıldıkları satırda
görüntülenirler. Ancak “ALIGN” (pozisyon) özelliğini kullanarak tablonun sayfanın
sağına veya soluna hizalanması sağlanabilir, ve aynı zamanda resimlerde olduğu
gibi çevresindeki yazının yerleşimide ayarlanabilir. Bir tabloyu sayfada ortalanmış
olarak görüntülemek için <CENTER> (ortala) özelliği kullanılabilir. Ortalanmış bir
tablo içeren HTML dosyasında şu bilgilerin bulunması gerekmektedir.
<CENTER>
<TABLE>
<TR>
<TD> 1.hücre
<TD> 2.hücre
<TD> 3.hücre
</TR>
<TR>
<TD> 1.hücre
<TD> 2.hücre
<TD> 3.hücre
</TD>
</TD>
</TD>
</TD>
<TD>
</TD>
Şekil 6.3 Ortalanmış tablo örneği
Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümü (Özden, Yiğit, Çengel, Allı)
61
</TR>
</TABLE>
</CENTER>
Eğer bu dosyaya gözgezdiricide bakacak olursak sayfa görüntüsü Şekil 6.3’deki gibi
olacaktır.
15.4 Hücre Hizalama
Hücrelerin içerisindeki yazıların veya resimlerin hizalanması tablonun içerisindeki
bilginin sunumu açısından önemlidir. Bu amaç için <TD> belirtecinde iki farklı
özellik mevcuttur: “ALIGN” ve “VALIGN”.
“ALIGN” özelliği hücre içerisindeki yazının sağa dayalı, sola dayalı veya ortalanmış
olarak görüntülenebilmesi amacı ile yatay hizalanmasında kullanılır. VALIGN özelliği
ise yazının hücre içerisinde dikey olarak üst, orta ve alt hizalanmasında kullanılır.
Her iki özellikte, TOP, BOTTOM ve MIDDLE değerlerini alabilir. TOP değeri
verildiğinde yazı hücrenin üstüne hizalanır, BOTTOM değeri verildiğinde altına,
MIDDLE değeri verildiğinde ise ortasına hizalanır. Bu özelliklerden hiç biri
kullanılmazsa gözgezdirici kendiliğinden yazıyı hücrenin içerisinde yatay ve dikey
olarak ortalayarak görüntüler. Şimdi değişik hücreler içerisinde farklı yerleşimlere
sahip bilgiler içeren bir tablo oluşturalım. Bunun için;
<TABLE BORDER=1>
<TR>
<TD VALIGN=BOTTOM> İlk hücre </TD>
<TD VALIGN=MIDDLE> İkinci hücre </TD>
<TD VALIGN=TOP> Üçüncü hücre </TD>
</TR>
<TR>
<TD VALIGN=TOP> Dördüncü hücre
</TD>
<TD VALIGN=MIDDLE> 5. hücre </TD>
<TD VALIGN=BOTTOM> 6. hücre </TD>
</TR>
</TABLE>
Şekil 6.4 Hizalı tablo örneği
satırlarını içeren bir sayfa yaratmamız
gerekmektedir. Bu dosya gözgezdiricide Şekil 6.4’deki gibi görülecektir. Tablo
oluşturulurken “BORDER=1” seçildiği için, oluşturulan tabloda hücre ve satırlar çizgi
ile ayrılmışlardır.
15.5 Satır veya Sütun Atlamaları
Standard tablolarda satır ve sütun sayıları eşit olarak kullanılmaktadır. Ancak, bir
hücrenin bir alt satırda iki hücrenin üzerinde bulunması gerekebilir. Bu tür
uygulamalarda tablo oluşturulurken gerekli düzenlemelerin yapılması gereklidir.
Örneğin;
62
<TABLE BORDER=1>
<TR>
<TD COLSPAN=2> örnek </TD>
<TD> normal </TD>
<TD> normal </TD>
</TR>
<TR>
<TD> normal </TD>
<TD> normal </TD>
<TD> normal </TD>
<TD> normal </TD>
</TR>
</TABLE>
Şekil 6.5 Sütun atlaması tablo
örneği
satırlarını içeren bir HTML dosyası gözgezdiricide Şekil 6.5’deki gibi görülecektir.
Bu örnekte “örnek” bilgisini içeren hücre iki hücrenin birleştirilmesi ile oluşmaktadır.
Bunun için “COLSPAN=2” (sütun genişliği) bilgisinin yazılması gerekmektedir.
COLSPAN hücreleri (sütunları) birleştirmekte kullanılırken ROWSPAN (satır
genişliği) ise satırların birleştirilmesi için kullanılabilir. Yukarıda verilen örneği biraz
değiştirerek yazacak olursak;
<TABLE BORDER=1>
<TR>
<TD ROWSPAN=2 COLSPAN=2> örnek </TD>
<TD> normal </TD>
<TD> normal </TD>
</TR>
<TR>
<TD> normal </TD>
<TD> normal </TD>
</TR>
<TR>
<TD> normal </TD>
<TD> normal </TD>
<TD> normal </TD>
<TD> normal </TD>
</TR>
Şekil 6.6 Satır atlaması tablo örneği
</TABLE>
bu dosyanın görünümü Şekil 6.6’daki gibi olacaktır.
15.6 Hücrelerin Renklendirilmesi
Bir tablodaki hücreleri farklı renklerde görüntülemek için “BGCOLOR” (arka alan
rengi) özelliği kullanılır. Altı farklı renge sahip hücrelerden oluşan bir tablo
oluşturmak için;
63
<TABLE BORDER=2>
<TR>
<TD BGCOLOR=blue> normal </TD>
<TD BGCOLOR=cyan> normal </TD>
<TD BGCOLOR=green> normal </TD>
</TR>
<TR>
<TD BGCOLOR=red> normal </TD>
<TD BGCOLOR=yellow> normal </TD>
<TD BGCOLOR=pink> normal </TD>
</TR>
Şekil 6.7 Hücre renklendirilmesi örneği
</TABLE>
bilgisini içeren bir dosya oluşturmak gerekecektir. Bu dosyanın görünümü ise Şekil
6.7’de verilmektedir.
16. Çerçeveler
Çerçeveler
(Frames)
günümüz
gözgezdiricilerinin
tamamında
görüntülenebilmektedir. HTML 3.2 ile birlikte kullanımı artmıştır. Çerçeve
oluşturmadan önce <A> belirtecine verilen bir özellikten bahsedilecektir. Normal
olarak <A> belirteci ile verilen bir bağın (link) içeriği, o an çalışılan gözgezdirici
penceresinde görüntülenecektir. Çerçevelerin kullanıldığı bir sayfada ise bağın
içeriği TARGET (hedef) özelliği sayesinde istenilen pencere içerisinde
görüntülenebilmektedir. Çerçeve kullanımı sayesinde gözgezdirici penceresi birden
fazla pencereye ayrılabilmektedir. Bu durumda aynı sayfa içerisinde birden fazla
HTML dosyası çağırıp görüntülemek mümkün olmaktadır.
16.1 Çerçeve Oluşturma
Çerçevelere sahip bir sayfa yaratmak için, öncelikle çerçevelerin özelliklerini
tanımlayan bir ana HTML dosyası hazırlanması gerekmektedir. Bu dokümanın
içerisinde sadece sayfada bulunacak çerçevelerin sayısı, boyutları ve içerisinde
görüntülenecek dokümanların isimleri tanımlanır. Bu tanımlamaları yapmak için
değişik belirteçler kullanılmaktadır. Şimdi sırası ile bu belirteçleri inceleyelim.
<FRAMESET> Belirteci
<FRAMESET> (pencere grubu) belirteci sayfadaki çerçeve sayısını ve bu
çerçevelerin büyüklüklerini tanımlamak amacıyla kullanılır. Çerçeveleri oluşturacak
ana sayfa;
<HTML>
<HEAD><TITLE> Örnek çerçeve tanımlaması </TITLE></HEAD>
<FRAMESET> Çerçeve tanımlamaları</FRAMESET>
</HTML>
bilgisi yer almalıdır. Burada dikkat edilmesi gereken en önemli nokta çerçeve
özelliklerinin
tanımlandığı
bu
tip
dokümanlarda
<BODY>
belirteci
kullanılmamaktadır. <BODY> belirteci yerine <FRAMESET> belirteci kullanılır. Diğer
bir önemli nokta ise, bu tip dokümanların içerisinde <FRAMESET> belirteci ile
64
yapılmış tanımlamalardan başka hiçbir HTML belirteci kullanılmamasıdır.
<FRAMESET> … </FRAMESET> belirteçleri arasında o sayfada bulunması gereken
ve oluşturulacak çerçevelerin sayısını belirtmek için COLS ve ROWS özellikleri
kullanılmaktadır.
COLS Özelliği
Cols özelliği <FRAMESET> belirtecinde kullanılması zorunlu iki özellikten birisidir.
Kullanım şekli aşağıdaki gibidir.
<FRAMESET COLS="1. sütun genişliği, 2. sütun genişliği …">
COLS özelliği kullanıldığında sayfada dikey olarak tanımlanan genişliklerde
çerçeveler oluşturulur. Sütunların genişlikleri pixel cinsinden veya yüzde cinsinden
belirtilebilir. Örneğin;
<FRAMESET COLS="100, 50%, *">
bilgisi üç tane sütun oluşumuna neden olur ve birinci sütun 100 pixel genişliğinde,
ikinci sütun sayfanın %50'si genişliğinde ve üçüncü sütun ise ("*" işareti) sayfada
kalan boşluğun tamamını kaplayacak boyuttadır. Bu sayfa 640x480 ekran
çözünürlüğüne sahip bir ekranda yorumlanacak olursa birinci çerçeve 100 pixel,
geriye kalan iki çerçeve ise sırası ile 320 ve 220 pixel genişliğinde olacaktır. "*"
işaretini kullanmak, değişik ekran çözünürlüğü ve boyutlarında çok yararlıdır, ekran
boyutları değişsede bu işaret sayesinde ikinci veya üçüncü sütun ekranda kalan
boşluğun tamamını alır.
ROWS Özelliği
Rows özelliğide, COLS özelliği ile aynı şekilde çalışmaktadır, tek fark ROWS özelliği
sayfada yatay çerçeveler (satır gibi) oluşturmaktadır.
Sayfada görüntülenecek olan çerçevelerin sayısı ve büyüklükleri belirlendikten sonra
her pencerenin içeriği <FRAME> belirteci ile belirlenmektedir.
16.2 <FRAME> Belirteci
Tanımlama yapılırken her bir çerçevenin içeriği için bir kaynak doküman <FRAME>
belirteci kullanılarak belirtilir. İçeriği;
<FRAMESET COLS="50%, *">
<FRAME SRC="pencere1.htm">
<FRAME SRC="pencere2.htm">
</FRAMESET>
olan
bir
ana
pencere
dosyası
gözgezdiricide
Şekil
6.8’deki
gibi
görülecektir. Eğer ‘pencere1.htm’ ve
‘pencere2.htm’
dosyaları
önceden
oluşturulmuşsa
gözgezdiricide
bu
sayfalar
gösterilecektir.
<FRAME>
belirteci ile SRC özelliğinden başka
kullanılabilecek diğer özellikler Tablo
6.1’de verilmektedir.
Şekil 6.8 Çerçeve örneği
65
16.3 Diğer Çerçeve Özellikleri
Tablo 6.1 Diğer Çerçeve Özellikleri
Özellik
Değer Açıklama
SCROLLING
AUTO
Eğer çerçevenin içerisindeki doküman çerçevenin
büyüklüğünden fazla yer kaplıyor ise gözgezdirici
kendiliğinden çerçevenin çevresine kaydırma çubukları
ekler.
SCROLLING
NO
Çerçevenin içerisindeki doküman çerçeveden daha büyük
olsada kaydırma çubukları eklenmez ve kullanıcı
çerçevenin dışında kalan kısmı göremez.
SCROLLING
YES
Bu durumda gerekli olsada olmasada kaydırma çubukları
eklenir.
NORESIZE
Kullanıcı çerçevelerin sınırlarını kullanarak çerçeve
boyutlarını değiştirebilir, bunu engellemek için NORESIZE
özelliği kullanılır.
MARGINWIDTH Pixels
Çerçevenin içerisindeki dokümanın üst ve altındaki
boşluğu ayarlamak için kullanılır.
MARGINHEIGHT Pixels
Çerçevenin içerisindeki dokümanın üst ve altındaki
boşluğu ayarlamak için kullanılıır.
16.4 <NOFRAME> Belirteci
Çerçevelerden oluşan bir sayfa, çerçeveleri desteklemeyen bir gözgezdirici
kullanılarak izlenmeye çalışılırsa, sayfada hiç bir şey görüntülenmez. Bu gibi
durumlarda çerçevelerden oluşan sayfanın, çerçeveleri desteklemeyen bir
gözgezdiricidede görüntülenmesi için <NOFRAME> belirteci kullanılır. Daha önce
bahsedildiği gibi çerçeve tanımlamalarının bulunduğu sayfa içerisine herhangi bir
şekilde resim ve yazı eklemek mümkün değildir, ancak bahsedilen problemi çözmek
için <NOFRAME> belirteci içerisine istenilen resim ve yazı eklenebilir. Bu resim ve
yazılar sadece çerçeveleri desteklemeyen gözgezdiricilerde görüntülenecektir.
FRAME ve NOFRAME belirteçlerini içeren bir sayfayı aşağıdaki gibi oluşturmak
mümkündür.
<HTML>
<HEAD>
<TITLE> Örnek Sayfa </TITLE>
</HEAD>
<FRAMESET>
Çerçeve tanımlamaları
<NOFRAME>
yazılar ve resimler
</NOFRAME>
</FRAMESET>
</HTML>
66
16.5 İç İçe <FRAMESET> Belirteçleri
İç içe <FRAMESET> belirteçleri kullanarak dikey ve yatay çerçeveler oluşturmak
mümkündür. Örneğin içeriği;
<FRAMESET ROWS="200,*">
<FRAMESET COLS="30%,*">
<FRAME SRC="test.html">
</FRAMESET>
</FRAMESET>
olan bir ana pencere dokümanı
gözgezdiricide incelendiğinde (Şekil
6.9) iki satır ve iki sütun olarak
görülecektir. Birinci satır 200 pixel,
ikinci satır ise görüntülenmenin
yapıldığı
bilgisayarın
ekran
çözünürlüğüne
bağlı
olarak
Şekil 6.9 İç içe çerçeve örneği
değişecektir. Birinci satırda yer alan
ilk hücre ekran genişliğinin %30’unda görüntülenirken, ikinci hücre ise ekran
çözünürlüğüne bağlı olarak geriye kalan alanı kullanacaktır.
16.6 Çerçevelerin İsimlendirilmeleri
Bazı dokümanları istenilen çerçeveler içerisinde görüntülemek için o çerçevelerin
isimleri olmak zorundadır (TARGET özelliğininde kullanılması için). Çerçevelere isim
vermek için <FRAME> belirtecinin NAME (isim) özelliği kullanılır.
<FRAME SRC="test.html" NAME="yenipencere">
<BASE> Belirteci
İçerisinde çerçeveler olan bir sayfadaki bağların tamamı yada çoğu aynı pencerede
görüntülenecek ise, TARGET özelliğini her bağ için ayrı ayrı vermek yerine <BASE>
belirteci kullanılarak, dokümanın tamamı için genel bir TARGET tanımlaması
yapılmış olur.
<BASE TARGET="yenipencere">
tanımlamasıyla açılacak olan her yeni bağ “yenipencere” adı verilen çerçevede
görüntülenecektir.
<BASE> belirteci dokümanın <HEAD> … </HEAD> kısmında yer alır. <BASE>
belirteci ile bir tanımlama yapıldıktan sonra, sayfada bazı bağların farklı
pencerelerde görüntülenmesi isteniyorsa, bağlar için TARGET özelliği kullanılır ve
gözgezdirici <BASE> belirtecindeki tanımlamayı kullanmaz.
Özel yönlendirmeler yapmak için kullanılan 4 standart hedef (target) ismi vardır:
_blank
Bağlanmış dokümanı göstermek için yeni ve isimsiz bir gözgezdirici
penceresi açar. Örnek: target=”_blank”
67
_self
Bağlanmış dokümanı aynı çerçeve veya pencere içerisine kaynak
doküman olarak açar. Örnek: target=”_self”
_parent
Bağlanmış dokümanı çerçeve hiyerarşisi içerisindeki bir üst çerçeve
içerisinde açar. Örnek: target=”_parent”
_top
Bağ içeren dokümanın en üstteki pencere içerisine yüklenmesini
sağlar. Örnek: target=”_top”
17. Resim Haritaları
17.1 Giriş
HTML dokümanlarında metin tabanlı bağlarda olduğu gibi herhangi bir resim veya
kullanılan resmin belirli bir bölgesinede aktif bağ oluşturmak mümkündür. Bu
durumda, resmin üzerinde yer alan bağ içeren alanlara tıklandığında, bir tek bağ
aktif hale gelir, bağın yönlendirildiği adrese bağlanılır ve ilgili doküman gözgezdirici
ekranında görüntülenir. Bir resim üzerinde farklı noktalara tıklandığında farklı
bağların aktif hale gelmesi için resim haritaları (image map) kullanılır. Resim
haritası, üzerinde farklı alanlarda farklı bağlar bulunan bir resimdir. Resim haritaları
üzerindeki bu alanlar, resmin koordinat bilgileri verilerek parçalara bölünmesi ve
her parçaya farklı bir bağ adresi verilmesi ile yapılabilir.
17.2 <MAP> ve <AREA> Belirteçleri
Resim haritası tanımlamaları <MAP>...</MAP> belirteçleri arasında yapılır. NAME
özelliğine verilen isim resim haritasının ismidir ve daha sonra kullanılacaktır.
Örnek:
<MAP NAME="map_ismi"> Koordinatlar ve linkler </MAP>
<MAP> belirteçleri arasında resim üzerindeki farklı bağlara
koordinatlarını tanımlamak için <AREA> belirteci kullanılır.
sahip
alanların
Örnek:
<AREA SHAPE="poly" COORDS="70,0, 0,37, 0,183, 27,192, 27,48, 103,9"
HREF="link.html">
SHAPE özelliği ile belirtilen şekil aktif bağ olacak şekildir, alabileceği değerler ise:
RECT (diktörtgen), POLY (poligon) ve CIRCLE (daire) değerleridir.
<AREA SHAPE="poly" COORDS="x1,y1, x2,y2, x3,y3, ... xn,yn" HREF="">
<AREA SHAPE="rect" COORDS="x1, y1, x2, y2" HREF="">
<AREA SHAPE="circle" COORDS="x,y,çap" HREF="">
Kullanımları yukarıdaki gibidir. Poligon şekli istenilen noktaların birleştirilmesinden
oluşur, dikdörtgen şekli sol üst ve sağ alt noktaları verilerek belirlenir, daire şekli
ise orta nokta ve yarı çap verilerek belirlenir.
68
İstenilen herhangi bir resim, koordinat bilgilerini veren bir program aracılığı ile
kullanıcı tarafından resim haritasına dönüştürülebilir. Windows ortamında Paint,
Photo Editor, Photo Shop vb. programlar resmin koordinat bilgilerini öğrenmek için
kullanılabilir.
Örneğin; Şekil 6.10’daki resmin orta bölümünde yer alan “Internet” yazısının olduğu
alana basıldığında “internet.htm” isimli dosyanın ekrana gelmesini sağlamak
istiyorsak sırası ile şu adımları gerçekleştirmemiz gerekmektedir:
Öncelikle resmin koordinatları bulup tanımlayabilmemiz için resmi bir resim editörü
programı içerisinde, bu örnekte Paint programı, görüntülememiz gerekmektedir.
Daha sonra fare yardımı ile ilgili alanın başlangıç (Şekil 6.10) ve bitiş (Şekil 6.11)
koordinatlarını görür ve not ederiz.
Şekil 6.10 Bağ tanımlanacak alanın başlangıç koordinatları
Şekil 6.11 Bağ tanımlanacak alanın bitiş koordinatları
69
Daha sonra bu koordinat bilgilerini (dikey ve yatay konumları) HTML kodu içerisinde
belirtiriz. Başlangıç koordinatları X,Y düzlemi üzerinde düşünülürse X1,Y1 ve bitiş
koordinatlarıda aynı şekilde X2,Y2 şeklinde ard arda verilmektedir. Bu örnek için kod
örneği aşağıda görülmektedir:
<AREA SHAPE="rect" COORDS="94,151,414,207" HREF="internet.htm">
Böylece üzerine tıklandığında “internet.htm” dosyasını çağıracak dikdörtgen bir alan
tanımlanmış olacaktır.
17.3 USEMAP Özelliği
Resim haritası hazırlandıktan sonra bu resim haritasını bir resim ile ilişkilendirmek
gerekmektedir, bunun için <IMG> belirtecinin USEMAP özelliği kullanılır.
<IMG SRC="resim.gif" USEMAP="#map_ismi">
Kodun tamamına bakacak olursak;
<img src="gif/internet.gif" usemap="#internet">
<map name="internet">
<area shape="rect" coords="29,23,130,97" href="telnet.html">
<area shape="rect" coords="216,27,299,97" href="e-mektup.html">
…
</map>
Öncelikle hangi resim
belirtmemiz gerekir.
dosyasını
hangi
alan
tanımına
göre
kullanacağımızı
<img src="gif/internet.gif" usemap="#internet">
Daha sonra ise alan tanımlarını koordinat bilgilerini veererek belirttiğimiz resim için
tanımlamamız gerekir.
<map name="internet">
<area shape="rect" coords="29,23,130,97" href="telnet.html">
<area shape="rect" coords="216,27,299,97" href="e-mektup.html">
…
</map>
Böylece “internet.gif” isimli resim dosyasını “#internet” olarak tanımlanmış
koordinatlara göre “href=” bölümünde belirttiğimiz dosyalara bağlamış oluruz.
18. Formlar
18.1 Giriş
Buraya kadar öğrendiğiniz bütün konular, elinizdeki bilgiyi sunmak için
kullanabileceğiniz belirteçlerden oluşmaktaydı. Bu bilgi metin, resim, resim haritası
ve benzeri şekillerde olabilir. Temel olarak siz bilgiyi uygun biçimde sunarsınız ve
kullanıcılar sadece pasif olarak bu bilgileri okuyabilirler. Doldurulabilen formlar ile
bu mantık değişmiştir. Formların kullanımı ile kullanıcıdan bilgi alınması mümkün
olabilmektedir. Formlar HTML 2.0 sürümünün bir parçası olup, neredeyse tüm
70
gözgezdiriciler tarafından desteklenmektedir. Şimdi istemci ve sunucu tarafından
formların nasıl işlendiğini ve formun nasıl çalıştığını anlatmaya başlayalım:
•
•
Temel form elemanları; metin kutuları (text fields), radyo tuşları (radio
buttons) ve kontrol kutuları (check boxes) ile, bilgileri göndermek için
(submit) ve formu temizlemek (reset) için kullanılan tuşlardan oluşmaktadır.
Diğer form elemanları; metin alanları (text areas), seçenek menüleri
(menu options) ve saklı alanlardır (hidden fields).
18.2 Formun Yapısı
Bir form oluşturmak genellikle iki bağımsız adımdan oluşmaktadır: 1. Formun
görünümünü oluşturmak. 2. Sunucu tarafında çalışacak ve form ile alınan bilgiyi
işleyecek programın yazılması (CGI, ASP yazılımı).
Bir form oluşturmak için <FORM> belirteci kullanılır. Açılış ve kapanış FORM
belirteçleri arasına bağımsız form elemanları ve HTML içeriği (paragraflar, başlıklar,
tablolar vb.) eklenerek formun görünümü oluşturulur. Bir HTML dokümanında
istediğiniz kadar form kullanabilirsiniz. Ancak formlar iç içe (nested) kullanılmazlar,
yani bir <FORM> belirtecini kapatmadan yeni bir <FORM> belirteci açılamaz. FORM
açılış belirteci, genellikle iki özellik içermektedir: METHOD ve ACTION. METHOD
özelliğinin değeri GET veya POST olabilir. Bu değerler ile, oluşturulan forma yazılan
verinin program tarafından işlenebilmesi için nasıl gönderileceği belirlenir. ACTION
özelliği, sunucu üzerinde veri ile işlem yapacak olan programı adreslemektedir.
ACTION özelliği yerel adres veya tüm bir URL adresi olabilir. Örneğin; aşağıdaki
<FORM> belirteci, "www.myserver.com" isimli sunucu üzerinden "cgi-bin"
dizininden "form-name" isimli programı çalıştırmaktadır:
<FORM METHOD=POST ACTION="http://www.myserver.com/cgi-bin/form-name">
...
</FORM>
Konuya basit bir örnek ile başlayalım. İçerisinde sadece kişisel bilgi olarak adınızı
soran bir HTML dosyası oluşturalım. Bu formda sizden yalnızca adınız sorulmaktadır.
Bu forma adınızı girmeli ve Gönder tuşuna basmalısınız. Gönder (Submit) tuşu
girmiş olduğunuz bilgileri işlenmesi için sunucuya gönderir. Daha sonra sunucuda
bulunan program çalışır ve veri ile ne yapılması isteniyorsa (veritabanına eklemek,
başka işlemler için başka kişilere göndermek vb.) o işlemi gerçekleştirilir.
Çoğu gözgezdirici Gönder (Submit) tuşuna basmak yerine, klavye üzerindeki Enter
tuşuna basarakda formun aktif olmasına olanak sağlayabilmektedir. Buraya kadar
anlattıklarımızı denemek için aşağıda verilen örneği gözgezdiricide incelediğinizde
Şekil 6.12’deki görüntü ile karşılaşacaksınız.
Şekil 6.12 Form örneği
71
<HTML>
<HEAD>
<TITLE>Isminizi yazin</TITLE>
</HEAD>
<BODY>
<H2>Siz kimsiniz?</H2>
<FORM METHOD=POST ACTION="http://www.mcp.com/cgi-bin/post-query">
</FORM>
</BODY>
</HTML>
Formun belirteçlerini eklerken <FORM> belirteci içerisinde formun görünümü
belirlenir. Bu işlem için diğer HTML belirteçlerini kullanmamız gerekir. Bu formdaki
ilk eleman isim girilebilmesi için oluşturulmuş metin kutusudur. Öncelikle diğer
HTML dokümanlarında yaptığınız gibi bir açıklama yazınız.
<P>Lütfen isminizi giriniz:
Daha sonra HTML koduna bilgisi alınacak olan metnin girilebilmesi için bir metin
kutusu tanımlayınız.
<P>Lütfen isminizi giriniz:<INPUT NAME="isim"></P>
<INPUT> belirteci bir form elemanıdır ve en az iki özelliği bulundurur: TYPE ve
NAME.
TYPE özelliği ile tanımlanabilen bir kaç seçenek vardır. Bunlar; metin girişi için
"text", radyo tuşları için "radio" ve kontrol kutuları için "check" seçenekleridir. Eğer
hiç bir seçenek belirtilmezse metin girişi olarak tanımlanır.
NAME özelliği belirtilen seçeneğe isim vermek için kullanılır. Formunuz sunucuya
gönderilirken, bilgileri işleyecek olan program bu bilgileri bir seri "isim ve değeri"
çiftleri şeklinde almaktadır. Buradaki değer (value) kullanıcı tarafından girilen bilgi,
isim (name) ise sizin o elemana vermiş olduğunuz isimdir. Her elemana anlamlı
isimler vererek, hangi değerin hangi elemana verilmiş değer olduğunu kolayca
anlayabilirsiniz. Bir elemana istediğiniz ismi verebilirsiniz, ama bu isimlerin mümkün
olduğunca açık olması daha sonraki işlemlerinizi kolaylaştıracaktır.
Şimdi son form elemanını ekleyelim: Gönder (Submit) tuşu.
<P><INPUT TYPE="submit"></P>
<INPUT> belirteci burada da kullanılmaktadır. TYPE özelliği kullanılarak, form için
bilgilerin gönderileceği tuş "submit" değeri verilerek oluşturulur. Yalnızca bir tane
Gönder tuşu kullanılacaksa bu tuşa isim vermeye gerek yoktur.
Formunuzda tek bir metin giriş alanı olsa bile Gönder tuşunu kullanmanız tavsiye
edilir. Bu tuşun kullanımı o kadar yaygındır ki, kullanıcılar bu tuşu görmedikleri
zaman şaşırabilirler.
Her belirteç biçimlendirme için elemanlar içerir. Form elemanları metinler ile aynı
özelliklere sahiptirler ve gözgezdiriciler tarafından aynı şekilde biçimlendirilirler.
<P> belirtecini kullanmazsanız bütün form elemanları aynı satırda görülecektir.
72
Şimdi bu forma bilgi girip Gönder tuşuna basıldığında, bilgiler sunucuya gönderilir
ve “post-query” isimli CGI programı çağırılır. Bu örnekte “post-query” programı
forma girilen orjinal verileri geri göndermek dışında başka işlem yapmamaktadır.
Buraya kadar, iki elemandan oluşan basit bir form yaratmış bulunuyoruz. Bu form
için HTML kodunun aldığı son durum aşağıda verilmektedir.
<HTML>
<HEAD>
<TITLE>Isminizi yazin</TITLE>
</HEAD>
<BODY>
<H2>Siz kimsiniz?</H2>
<FORM METHOD=POST ACTION="http://www.mcp.com/cgi-bin/post-query">
<P> Lütfen isminizi giriniz:<INPUT NAME="isim"></P>
<P><INPUT TYPE="submit"></P>
</FORM>
</BODY>
</HTML>
Sonucu görmek için gözgezdiricide bu dosya çağırıldığında oluşan ekran görüntüsü
Şekil 6.13’de verilmektedir.
18.3 Basit Form Görüntüsü
Bu bölümde <INPUT> belirteci ile birlikte kullanılabilen basit elemanları göreceğiz.
Bu bölümde anlatılacak elemanların her biri <FORM>...</FORM> belirteçleri
arasında kullanılmalıdır. Buradaki örneklerde formun işlevi (çağıracağı program)
olarak, “post-query” programını kullanmaya devam edeceğiz.
Gönder (Submit) Tuşu
Gönder tuşları (grafik olmayan gözgezdiricilerde bağ şeklinde görülecektir)
gözgezdiriciye forma girilen verileri sunucuya göndermesini söyler. Her form için en
az bir tane Gönder tuşu tanımlamalısınız. Gönder tuşu yaratmak için, <INPUT>
belirteci içerisinde TYPE özelliğini kullanmalı ve SUBMIT değerini vermelisiniz:
<INPUT TYPE="SUBMIT">
Tuşun üzerinde yazılacak olan metni VALUE özelliğini kullanarak değiştirebilirsiniz:
73
<INPUT TYPE="SUBMIT" VALUE="Gönder">
<INPUT> belirteci içerisinde NAME özelliğini kullanarak birden fazla Gönder tuşu
tanımlayabilirsiniz. Gönder tuşlarının NAME ve VALUE özellikleri işlenmek üzere
sunucuya gönderilir. Hangi gönder tuşuna basıldığını anlamak için CGI programı
içerisinde isim ve değer çiftlerini kontrol etmemiz gerekir.
Örneğin gönder
kullanabilirsiniz:
<INPUT
<INPUT
<INPUT
<INPUT
<INPUT
<INPUT
tuşlarını
TYPE="SUBMIT"
TYPE="SUBMIT"
TYPE="SUBMIT"
TYPE="SUBMIT"
TYPE="SUBMIT"
TYPE="SUBMIT"
bir
form
içerisinde
yönlendirme
yapmak
için
NAME="sol" VALUE="Sol">
NAME="sag" VALUE="Sag">
NAME="yukari" VALUE="Yukari">
NAME="asagi" VALUE="Asagi">
NAME="ileri" VALUE="Ileri">
NAME="geri" VALUE="Geri">
şeklinde yazılan bir dosyanın gözgezdiricideki görüntüsü Şekil 6.14’de verilmektedir.
Şekil 6.14 Tuş örneği
18.4 Metin Giriş Kutuları
Metin giriş kutuları kullanıcının tek satırdan oluşan bir kutuya metin girmesine
olanak tanır. Birden fazla satır gerektiği durumlarda metin alanı tanımlamak için
<TEXTAREA> (metin alanı) belirteci kullanılır.
Bir metin girişi kutusu yaratmak için <INPUT> belirteci içerisinde TYPE="text"
yazmanız gerekmektedir. TYPE özelliğinin varsayılan değeri “text” olduğu için
yazmadığınız durumda da bu özellik kullanılacaktır. Aynı zamanda NAME özelliğini
de kullanmalısınız. NAME özelliği bu kutunun ismini tanımlamak için kullanılır ve
veriler işlenmek üzere programa gönderildiğinde gereklidir.
<INPUT> belirteci içerisinde SIZE (boyut) ve MAXLENGTH (kullanılabilecek
karakter sayısı) özelliklerini de kullanabilirsiniz. SIZE özelliği ile metin giriş
kutusunun uzunluğu karakter cinsinden belirtilir, varsayılan değeri 20 karakterdir.
Kutucuk içerisine metin girildiği sürece yatay olarak kayacaktır. SIZE değerini, tüm
gözgezdirici ekranlarına sığmasını sağlamak için, 50 karakterden az tutmaya
çalışmalısınız.
<INPUT TYPE="text" NAME="uzunmetin" SIZE="50">
MAXLENGTH özelliği kullanılarak kullanıcının metin kutusuna girilebilecek karakter
sayısına sınır konularak, belirlenen karakter sayısı kadar karakter girilmesine izin
verilebilir. MAXLENGTH değerinin SIZE özelliğine verilen değerden küçük olması
durumunda, gözgezdiriciler bazen MAXLENGTH değerini kullanırlar.
74
Sıradan metin giriş kutularının yanı sıra, TYPE=password olarak tanımlanan şifre
(password) kutuları vardır. Şifre metin kutularının normal metin kutularından farkı,
girilen karakterlerin gözgezdirici tarafından gizlenmesidir (girilen karakterler yerine
genellikle “*” karakteri görülür).
<INPUT TYPE="PASSWORD" NAME="sifre">
Karakterler gözgezdirici tarafından gizlenmesine rağmen, şifre metin kutuları
güvenli değildir. Şifre, diğer metin bilgilerinin arasında sunucuya gönderilir,
herhangi biri tarafından rahatlıkla okunabilir. Buraya kadar anlatılanları örneklemek
için aşağıdaki bilgileri içeren bir dosya yaratalım.
Lütfen isminizi giriniz:<INPUT NAME="isim"><BR>
Yasinizi giriniz: <INPUT TYPE="TEXT" NAME="yas" SIZE="3"
MAXLENGTH="3"><BR>
Adresinizi giriniz: <INPUT TYPE="TEXT" NAME="adres" SIZE="40"><BR>
Bu dosya gözgezdiricide Şekil 6.15’deki gibi görülecektir.
Şekil 6.15 Metin kutusu örneği
18.5 Radyo Tuşları
Radyo tuşları, içlerinden sadece birinin seçilebileceği seçenekli listeler için kullanılır.
Bir listedeki bir radyo tuşunu seçilmesi, aynı listedeki diğer seçeneklerin hiçbirinin
seçilmediği anlamına gelmektedir.
Radyo tuşları TYPE özelliğine "radio" değeri verilerek yaratılır. Bir grupta yer alan
tüm radyo tuşlarına aynı isim (NAME) verilir. Ancak, bir grupta yer alan her radyo
tuşuna hangi seçeneğin seçildiğini anlayabilmek için farklı değer (VALUE)
verilmelidir. Örneğin;
<OL>
<LI><INPUT TYPE="radio" NAME="gida" VALUE="meyve" CHECKED>Meyve<BR>
<LI><INPUT TYPE="radio" NAME="gida" VALUE="sebze">Sebze<BR>
<LI><INPUT TYPE="radio" NAME="gida" VALUE="icecek">İçecek<BR>
</OL>
bilgisini içeren bir dosya gözgezdiricide Şekil 6.16’daki gibi görülecektir.
75
Şekil 6.16 Radyo tuşu örneği
Her grup için farkli bir isim kullanarak, birden fazla radyo tuşu grubu oluşturulabilir.
<OL>
<LI><INPUT
<OL>
<LI><INPUT
<LI><INPUT
<LI><INPUT
</OL>
<LI><INPUT
<LI><INPUT
</OL>
TYPE="radio" NAME="gida" VALUE="meyve">Meyve<BR>
TYPE="radio" NAME="meyve" VALUE="elma">Elma
TYPE="radio" NAME="meyve" VALUE="portakal">Portakal
TYPE="radio" NAME="meyve" VALUE="karpuz" CHECKED>Karpuz
TYPE="radio" NAME="gida" VALUE="sebze">Sebze<BR>
TYPE="radio" NAME="gida" VALUE="icecek">İçecek<BR>
Bu dosya ise gözgezdiricide Şekil 6.17’deki gibi görülecektir.
Eğer radyo tuşlarından birinin seçilmiş durumda olarak görüntülenmesi istenirse,
CHECKED özelliğini kullanılabilir. Şimdi bunu bir örnekle görelim;
<OL>
<LI><INPUT TYPE="radio" NAME="gida" VALUE="meyve" CHECKED>Meyve<BR>
</OL>
bilgisini içeren bir dosyanın görüntüsü Şekil 6.18’de verilmektedir.
76
Varsayılan değer olarak bütün radyo tuşları ilk olarak seçilmemiş durumdadır. Form
verileri sunucuya gönderildiğinde, bir grup radyo tuşu içerisinden tek bir isim-değer
çifti çalışacak programa iletilir. Bu bilgi çifti NAME ile belirlenen ismi ve seçilen
seçeneğin VALUE ile belirlenen değeri içerir. Aşağıdaki örnekte iki grup radyo
tuşunun gözgezdiricideki görünümü yer almaktadır (Şekil 6.19).
<OL>
<LI><INPUT TYPE="radio" NAME="gida" VALUE="meyve">Meyve<BR>
<OL>
<LI><INPUT TYPE="radio" NAME="meyve" VALUE="elma">Elma
<LI><INPUT TYPE="radio" NAME="meyve" VALUE="portakal">Portakal
<LI><INPUT TYPE="radio" NAME="meyve" VALUE="karpuz">Karpuz
</OL>
</OL>
18.6 Kontrol Kutuları
Kontrol kutuları, listede yer alan seçenekler içerisinden birden fazla seçeneğin
seçilmesine olanak sağlayabilir. Her bir kontrol kutusu seçilebilir veya seçilmemiş
duruma getirilebilir. Kontrol kutuları TYPE özelliğine “checkbox” değeri verilerek
yaratılır. Örneğin;
<UL>
<LI><INPUT TYPE="checkbox" NAME="kirmizi">Kırmızı
<LI><INPUT TYPE="checkbox" NAME="yesil">Yesil
<LI><INPUT TYPE="checkbox" NAME="mavi">Mavi
</UL>
77
bilgisini içeren bir dosya gözgezdiricide Şekil 6.20’deki gibi görülecektir.
Şekil 6.20 Kontrol kutusu örneği
Form verileri sunucuya gönderildiğinde, bir grup kontrol kutusu içerisinden seçilmiş
olan tüm seçeneklerin isim-değer bilgileri çalışacak programa iletilir. Bilgisinin
mutlaka programa gönderilmesini istediğiniz bir seçenek varsa, VALUE özelliğini
kullanarak bunu gerçekleştirebilirsiniz. Aşağıdaki örnekte bütün kontrol kutuları
seçilmemiş durumdadır ve her birine NAME özelliği kullanarak farklı isimler
verilmiştir.
<UL>
<LI><INPUT TYPE="checkbox" NAME="kirmizi" VALUE="chosen">Kırmızı
<LI><INPUT TYPE="checkbox" NAME="yesil" VALUE="chosen">Yesil
<LI><INPUT TYPE="checkbox" NAME="mavi" VALUE="chosen">Mavi
</UL>
Radyo tuşlarında olduğu gibi, CHECKED özelliği kullanılarak kontrol kutusunun
sayfanın ilk yüklenişinde seçili olarak ekrana gelmesi sağlanabilir. Örneğin;
<P>Meslek (uygun olan tüm seçenekleri seçin): </P>
<UL>
<LI><INPUT TYPE="checkbox" NAME="doktor" CHECKED>Doktor
<LI><INPUT TYPE="checkbox" NAME="avukat">Avukat
<LI><INPUT TYPE="checkbox" NAME="ogretmen" CHECKED>Öğretmen
<LI><INPUT TYPE="checkbox" NAME="muhendis">Mühendis
</UL>
78
18.7 Resimler
Formları kullanırken, <INPUT> belirteci içerisinde TYPE=IMAGE özelliğini kullanarak
resim haritalarını kullanabilirsiniz. Bu özelliği SRC özelliği ile birlikte kullanarak
resim dosyasının dizin bilgisini veya URL adresini belirtebilirsiniz (<IMG> belirteci
ile SRC özelliğinin kullanımı gibi). Örneğin;
<INPUT TYPE="image" SRC="turkeymap.gif" NAME="map">
Formlar içerisinde yer alan resim haritaları diğer resim haritaları ile aynı mantıkla
çalışırlar. Resim üzerinde herhangi bir nokta tıklandığında, form bilgileri sunucuya
gönderilir. Tıklamış olduğunuz alanın koordinat bilgileri, form bilgilerinin bir parçası
olarak, isim bilgisi ile birlikte sunucuya gönderilir. Örneğin resim haritanızın ismi
"map" olarak verilmişse, "map.x" değeri x koordinatı, "map.y" değeri ise y
koordinatı değerini içerir. Bu değerleri, form bilgilerini işleyecek olan programda göz
önünde bulundurmanız gerekmektedir. Resim üzerine tıklanıldığında form bilgileri
sunucuya gönderildiği için bu özellik, değişik görünümlü Gönder tuşları
kullanabilmenize olanak tanımaktadır. Örneğin;
<UL>
<LI><INPUT TYPE=”IMAGE”
SRC="./images/magnif5.gif" NAME="arac"
VALUE="meyve">Büyüteç<BR>
<LI><INPUT TYPE=”IMAGE”
SRC="./images/key04.gif" NAME="arac"
VALUE="meyve">Anahtar<BR>
</UL>
bilgisini içeren bir dosya
6.23’deki gibi görülecektir.
gözgezdiricide
Şekil
Şekil 6.23 Resimli form
örneği
18.8 Varsayılan Değerler
Her form elemanının varsayılan değerleri vardır. Bu değerleri değiştirmek için;
•
Metin alanları için VALUE özelliği kullanılarak verilen değer varsayılan değer
olarak yüklenir. Form görüntülendiği zaman verilen değer kutu içerisinde
görülecektir.
79
•
Radyo tuşları ve kontrol kutuları
varsayılan değerler degiştirilebilir.
için, CHECKED
özelliği
kullanılarak
Her eleman için bütün bu varsayılan değerlere ek olarak formunuza sıfırlama (reset)
yapmak için bir tuş ekleyebilirsiniz (gönder tuşu gibi). Sıfırlama tuşu kullanıcının
yapmış olduğu tüm işlemleri silerek formdaki tüm elemanlara varsayılan değerleri
yükler. VALUE özelliği kullanılarak bu tuşa isim verilebilir. Örneğin;
<UL>
<LI><INPUT TYPE="checkbox" VALUE="avukat">Avukat
</UL>
<INPUT TYPE="RESET" VALUE="Girilen Değerleri Temizle">
Şimdi daha karışık bir örneği inceleyelim. Bir spor merkezinin kullanıcılarına yaptığı
bir anketi örnek olarak alalım.
<HTML>
<HEAD>
<TITLE>Kullanıcı Formu</TITLE>
</HEAD>
<BODY>
<H1>Kullanıcı Bilgi Formu</H1>
<P>Sizlere daha iyi hizmet verebilmemiz için lütfen aşağıdaki anketi
doldurunuz.</P>
<P>Yanıtlarınızı göndermek için lütfen formu doldurduktan sonra <B>Gönder</B>
tuşuna tıklayınız.</P>
<HR>
<FORM METHOD="POST" ACTION="http://www.mcp.com/cgi-bin/post-query">
<P><B>Isim-Soyisim: </B><INPUT TYPE="TEXT" NAME="isim"></P>
<P><B>Cinsiyet: </B>
<INPUT TYPE="radio" NAME="cinsiyet" VALUE="kadin">Kadın
<INPUT TYPE="radio" NAME="cinsiyet" VALUE="erkek">Erkek </P>
<P><B>Lütfen, uygun olan tüm seçenekleri isaretleyiniz.</B><BR>
<INPUT TYPE="checkbox" NAME="memnuniyet”>Tüm teknik ve idari personelden
memnunum.<BR>
<INPUT TYPE="checkbox" NAME="servis">Verilen tüm servislerin kalitesi
iyidir.<BR>
<INPUT TYPE="checkbox" NAME="temizlik">Soyunma odalarının, havuzun ve spor
aletlerinin temizliği yeterlidir.<BR>
<INPUT TYPE="checkbox" NAME="csaat">Çalışma saatleri uygundur.<BR> </P>
<P>Diğer görüş ve önerileriniz varsa lütfen burada belirtiniz.
80
<INPUT TYPE="TEXTAREA" NAME="gorusler"></P>
<P><INPUT TYPE="SUBMIT" VALUE="Gönder">
<INPUT TYPE="RESET" VALUE="Formu Temizle"></P>
</FORM>
</BODY>
</HTML>
Şekil 6.25 Form ile oluşturulmuş bir anket örneği
18.9 Diğer Özellikler
<INPUT> belirteci içerisinde kullanılan iki özellik daha vardır. Bunlar; asağı doğru
açılan menüler oluşturmaya olanak sağlayan SELECT (seç) ve uzun metinlerin
girilebilmesine olanak veren TEXTAREA (metin alanı) özellikleridir.
SELECT Özelliği
Bu özelliğin kullanımı radyo tuşları ve kontrol kutuları ile çok benzerdir. Ancak
ekranda görünümleri farklıdır. Bu özelliğin kullanımı, kullanıcıya bir menüden veya
81
listeden bir veya daha fazla seçenek seçebilme olanağı tanır. Bu seçim menüleri
veya listeleri <SELECT> belirteci ile, menü veya listelerde yer alacak olan maddeler
<OPTION> seçeneği ile tanımlanır. Ayrıca, sunucuya işlenmek üzere bilgi
gönderildiğinde anlamlı olabilsin diye, <SELECT> belirteci içerisinde NAME özelliği
kullanılarak bir isim verilir. <SELECT> ve <OPTION> belirteçlerinin kullanımı,
listelerde kullanılan mantık ile aynıdır. Örneğin;
<P>Bir renk seçiniz:
<SELECT NAME="renk">
<OPTION>Siyah
<OPTION>Sarı
<OPTION>Kahverengi
<OPTION>Kırmızı
<OPTION>Mavi
</SELECT></P>
dosyasının görüntüsü Şekil 6.26’da
verilmektedir.
Form gönderildiğinde, OPTION belirteci ile
tanımlanan değer sunucuya gönderilir (bu
örnekte sarı, mavi vb.). Sunucuya farklı bir
değer göndermek istenirse, VALUE özelliği
kullanılır:
<OPTION VALUE="sicakrenk">Kırmızı
Bu
şekilde
tanımlanan
seçim
menüleri
gözgezdiricide aşağı doğru açılan menüler
şeklinde görüntülenir.
Şekil 6.26 Seçenek özelliği
örneği
Genellikle, listede yer alan ilk madde seçili
olarak görülür. <OPTION> belirteci içerisinde SELECTED özelliğini kullanarak bu
varsayılan değeri değiştirebilirsiniz. Örneğin;
Şekil 6.27 Seçenek özelliği
örneği
<OPTION>Siyah
<OPTION>Sarı
<OPTION SELECTED>Kahverengi
<OPTION>Kırmızı
<OPTION>Mavi
</SELECT></P>
dosyası Şekil 6.27’de olduğu gibi görülecektir.
Seçim menüleri radyo tuşları gibi çalışır. Yani bir listede tek bir madde seçilebilir.
MULTIPLE özelliğini kullanarak bir listeden birden fazla maddenin seçilebilmesi
sağlanabilir.
<P>Alışveriş Listesi:
<SELECT NAME="alisveris” MULTIPLE>
<OPTION>Peynir <OPTION>Süt <OPTION>Un
<OPTION>Yumurta <OPTION>Yoğurt <OPTION>Zeytin <OPTION>Ekmek
</SELECT></P>
82
Birden fazla seçimli listeler oluşturduğunuzda, bu bilgileri
işleyecek olan programıda bu bilgilere göre ayarlamanız
gerektiğini unutmayınız. <SIZE> özelliğinin kullanımı
genellikle grafik gözgezdiricilerde kayan bir liste olarak
(SIZE özelliğinde belirtilen eleman sayısı kadar)
görüntülenmesini sağlar. Örneğin;
<FORM METHOD="POST"
ACTION="http://www.mcp.com/cgi-bin/post-query">
<P>Alışveriş Listesi:
<SELECT NAME="alisveris” MULTIPLE SIZE="5">
<OPTION>Peynir <OPTION>Süt <OPTION>Un
<OPTION>Yumurta <OPTION>Yoğurt
<OPTION>Zeytin <OPTION>Ekmek
</SELECT></P>
</FORM>
Şekil 6.28 Seçenek
özelliği örneği
dosyası Şekil 6.28’de olduğu gibi görülecektir.
TEXTAREA Özelliği
Metin alanları (Text areas) kullanıcının bilgi girebildiği alanlardır. Metin giriş
kutularından (<INPUT TYPE="text">) farklı olarak, metin giriş alanları bir çok
satırdan oluşabilir. Örneğin; kullanıcıların elektronik mektup gönderebileceği bir
form oluşturmak isterseniz bu özellik çok faydalı olacaktır. Metin giriş alanları
<TEXTAREA> belirteci kullanılarak oluşturulur. <TEXTAREA> aşağıdaki 3 özelliği
içerir:
NAME
Form gönderildiğinde programa gönderilecek isim
ROWS
Metin giriş alanının yüksekliği, satır cinsinden
COLS
Metin giriş alanının genişliği, sütun (karakter) cinsinden
<TEXTAREA> belirteci iki taraflı bir belirteçtir. Metin alanına yazmak istediğiniz
metni yazarken ikisini de kullanmak gereklidir:
<TEXTAREA NAME="mesaj" ROWS="14" COLS="50">Mesajınızı buraya
yazınız.</TEXTAREA>
Metin alanına girilecek bilginin yazı
gözgezdiricilere bağlı olarak değişebilir.
tipi,
alt
satıra
inmesi
vb.
özellikler
<FORM METHOD="POST" ACTION="http://www.mcp.com/cgi-bin/post-query">
<P>Görüş ve önerilerinizi buraya yazabilirsiniz:
<TEXTAREA NAME="gorusler" ROWS="8" COLS="30">
</TEXTAREA>
</P>
</FORM>
Bu dosya gözgezdiricide Şekil 6.29’daki gibi görülecektir.
83
Şekil 6.29 Metin alanı örneği
18.10 Basit Bir Uygulama
Oluşturduğunuz forma girilen bilgileri özel bir işleme tabi tutmadan (bir program ile
işlemeden) elde etmenin en kolay yolu, girilen bilgileri elektronik mektup ile
kendinize göndermenizdir. Bunun için <FORM> belirteci içerisinde ACTION özelliği
olarak "mailto:user@domain" değerini tanımlamanız yeterli olacaktır. Aşağıdaki
örnekte girilen tüm bilgiler, Gönder tuşuna basıldığında "mailto:" kısmında verilen
adrese elektronik mektup olarak gönderilecektir.
<FORM METHOD="POST" ACTION="mailto:[email protected]">
<UL>
<LI><INPUT TYPE="checkbox" NAME="kirmizi">Kırmızı
<LI><INPUT TYPE="checkbox" NAME="mavi">Mavi
</UL>
<OL>
<LI><INPUT TYPE="radio" NAME="gida" VALUE="meyve">Meyve<BR>
</OL>
<OPTION>Siyah <OPTION>Sarı <OPTION>Kahverengi
</SELECT></P>
<TEXTAREA NAME="mesaj" ROWS="5" COLS="20">
Mesajınızı buraya yazınız.
</TEXTAREA><BR>
<INPUT TYPE=”submit” VALUE=”Gönder”>
</FORM>
Bu dosyanın gözgezdiricideki görünümü Şekil 6.30’da görülmektedir. Bu form Şekil
6.31’deki gibi doldurulup “Gönder” butonuna basıldığında, gönderilen bilgiler yada
diğer bir deyişle formun çıktısı elektronik mektup olarak belirtilen adrese
gönderilecektir.
84
Şekil 6.31 Doldurulmuş form örneği
Elektronik mektubun içeriği boş olacak ve formun bilgileri “POSTDATA.ATT” isimli
bir dosya içerisinde mektuba eklenmiş olarak gelecektir. Bu dosyanın içeriği aşağıda
görüldüğü gibi olacaktır:
"kirmizi=on&gida=meyve&renk=Sari&mesaj=Bu+deneme+amaci+ile+gonderilen+
bir+formdur."
Bu dosyanın içeriği Notepad, Wordpad veya MS Word gibi kelime işlemci programlar
tarafından görülebilmektedir (Şekil 6.32).
Şekil 6.32 Mektuba ek olarak gönderilen form bilgisi dosyası – postdata.att
85

bölüm 6 - WordPress.com

Transkript

Benzer belgeler

Yazan: Emin Yılmaz Üçer Önsöz

türkiye cumhuriyeti gıda, tarım ve hayvancılık bakanlığı gıda

İnternet Programcılığı