|
1. Giriş & Metin Alanları
2. Metin & Şifre Satırları
3. Radyo Düğmeleri
4. İşaret Kutucukları
5. Kombo Kutuları
6. Özet
1.
Formlara Giriş & Metin Alanları
Pek çok web sitesinde görmüşsünüzdür; bazı programları çekmeden önce isminizi
ve e-posta adresinizi girmeniz gerekir veya küçük anketler olur onları
doldurmanız istenir, gezdiğiniz web sitesi hakkındaki görüşleriniz sorulur
vs. Siz de web sitenize bu ve benzeri pek çok amaç için kullanılabilecek
formlar yerleştirebilirsiniz.
Form hazırlarken metin satırları (text lines), metin alanları (text areas)
radyo düğmeleri (radio buttons), işaret kutucukları (check boxes) ve kombo
kutuları (combo boxes) kullanabiliyoruz. Bütün bunların tam olarak ne
olduğunu ve nasıl kullanılabileceğini sırasıyla açıklayacağız ama önce
formlar genel olarak nasıl tanımlanır onu görelim. Liste 34'te web sitenizi
ziyaret edenlerin siteniz hakkındaki görüşlerini size iletebileceği bir
metin alanı içeren basit bir form tanımlaması bulunuyor.
ornek34.html
<HTML>
<HEAD>
<TITLE>İlk formumuz</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000">
<FORM
METHOD=POST ACTION="mailto:e_posta_adresiniz?subject=Yorumlar"
ENCTYPE="application/x-www-form-urlencoded">
<B>Site hakkındaki görüşleriniz:</B><BR>
<TEXTAREA NAME="Yorumlar" COLS=32 ROWS=6 WRAP="soft"></TEXTAREA>
<P>
<INPUT TYPE="submit" VALUE="Gönder"> <INPUT
TYPE="reset" VALUE="Temizle">
</FORM>
</BODY>
</HTML>
Formumuzu
<FORM> ve </FORM> işaretleri arasında tanımlıyoruz. Şu anda
CGI programlarıyla ilgilenmediğimiz için formun METHOD ve ENCTYPE parametrelerinin
anlamı bizi fazla ilgilendirmiyor. Bunları standart olarak böyle kullanın.
Esas önemli bölüm ACTION parametresinin değeri. Formun içeriğinin e-posta
adresinize gelmesi için ACTION parametresinin degerini "mailto:eposta_adresiniz"
yapmalısınız. Dilerseniz e-posta adresinizin arkasına boşluk bırakmadan
?subject= kelimesini ekleyerek gelecek olan e-postanın başlığını da belirleyebilirsiniz.
<TEXTAREA> işareti, boyutlarını COLS (en) ve ROWS (boy) parametreleriyle
belirleyebileceğimiz, içine yazı yazılabilecek bir alan tanımlamamızı
sağlıyor. Bu alana yazılan yazı, alanın fiziksel sınırlarını aşınca otomatik
olarak kaydırma çubukları çıkacaktır. Böylece alanın fiziksel boyutlarıyla
sınırlanılmadan istenildiği kadar yazı yazılabilir. WRAP parametresi bir
satırın sonuna gelindiğinde satırın otomatik olarak bölünüp bölünmeyeceğini
belirler. Yazılanların Enter'a basılmadığı sürece sağa doğru uzayıp gitmesini
istemiyorsanız her zaman için "soft" değerini kullanın.
NAME parametresini en sona bıraktık; çünkü bu parametre formlarda kullanacağınız
tüm öğelerde olması gereken bir parametre. NAME ile öğelere isim veriyoruz.
Örneğimizde tek bir form öğemiz olduğu için bu öğeye "Yorumlar"
ismini vermek pek anlamlı gözükmeyebilir; ama ileride daha karışık formlar
hazırladığımızda size ulaşan form sonuçlarında, ziyaretçilerin hangi öğeye
ne yazdığının karışmasını istemiyorsanız, her öğeye diğerlerinden farklı
bir isim vermeyi unutmayın ve isimlendirmede Türkçe karakter ile boşluk
karakterini kullanmayın.
Peki yazacağımızı yazdık; yazdıklarımızı nasıl göndereceğiz? <INPUT
TYPE="submit" VALUE="Gönder"> işaretini bu iş için
kullanıyoruz. <INPUT> işareti ile birazdan pek çok form öğesi tanımlayacağız
ve bu öğeler için değişik TYPE (tip) değerleri kullanacağız; ama bize
şimdilik sadece bir "Gönder" düğmesi yeterli. Bunun için de
TYPE parametresinin değeri "submit" olmalı. VALUE parametresi
ise düğmenin üstünde ne yazacağını belirliyor. <INPUT TYPE="reset"
VALUE="Temizle"> ise formdaki tüm alanların içeriğini temizlemek
için kullanabileceğiniz düğme. Buradaki önemli nokta yine TYPE parametresinin
değeri ki bu durumda <B<"RESET">.
Önemli
Not:
Ne yazık ki <FORM> işaretinin ACTION parametresine e-posta adresinizi
yazmanız her zaman için form içeriğinin size ulaşacağını garanti etmez.
Size e-posta gelebilmesi için sayfanızdaki formu dolduran kişilerin web
tarayıcılarındaki e-posta sunucu ayarları doğru yapılmış olmak zorundadır
ki bazen bu ayarlar yapılmamış veya yanlış olabiliyor. Burada kesin çözüm
CGI programları kullanmak ki bunun için web hosting hizmeti aldığınız
kuruluşa danışmanız gerekiyor.
İpucu: <TEXTAREA> ve </TEXTAREA>
işaretleri arasına istediğiniz herhangi birşey yazarak; metin alanının,
başlangıçta boş gelmek yerine içinde sizin yazdığınız metni içermesini
sağlayabilirsiniz.
10.2 Metin & Şifre Satırları
İsim, e-posta adresi, telefon numarası, ev/iş adresi gibi tek satıra sığabilecek
bilgiler için metin satırlarının kullanılması idealdir. Bir önceki örneğimizi
biraz genişleterek bu form öğesinin nasıl kullanıldığını görelim:
ornek35.html
<HTML>
<HEAD>
<TITLE>Metin Satırları</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000">
<FORM
METHOD=POST ACTION="mailto:e_posta_adresiniz?subject=Yorumlar"
ENCTYPE="application/x-www-form-urlencoded">
<B>İsminiz:</B><BR>
<INPUT TYPE=TEXT NAME="isim" SIZE=30 MAXLENGTH=45>
<P>
<B>E-posta adresiniz:</B><BR>
<INPUT TYPE=TEXT NAME="e_posta" SIZE=30 MAXLENGTH=45>
<P>
<B>Site hakkındaki görüşleriniz:</B><BR>
<TEXTAREA NAME="Yorumlar" COLS=32 ROWS=6 WRAP="soft"></TEXTAREA>
<P>
<INPUT TYPE="submit" VALUE="Gönder"> <INPUT
TYPE="reset" VALUE="Temizle">
</FORM>
</BODY>
</HTML>
örnek 35'te <INPUT TYPE=TEXT> ile metin satırları tanımlayabiliyoruz.
NAME parametresiyle herbirine bir isim veriyoruz. SIZE parametresi ise
satırın görünür boyutunun kaç karakter olacağını belirliyor. Her ne kadar
görünür boy çoğu zaman çok uzun olamasa da MAXLENGTH paramatresiyle maksimum
kaç karakter girilebileceğini belirleyebilirsiniz. Böylece satırın görünür
boyunu aşan girdiler kaydırılarak gösterilecektir.
Eğer metin satırına yazılan karakterlerin görüntülenmesini istemiyorsanız
TYPE parametresinin değerini PASSWORD yapın. Böylece her yazılan karakter
yerine bir yıldız görüntülenecektir. Adından belli olduğu üzere bu özel
metin satırı genellikle şifre girişleri için kullanılır.
İpucu:
Metin veya şifre satırlarına VALUE parametresiyle bir ön değer verebilirsiniz.
Örneğin formununuzu dolduranlara web sayfalarının -varsa- adresini soruyorsanız
<INPUT TYPE=TEXT NAME="web_adresi" VALUE="http://">
ile satırda otomatik olarak http:// yazısının görüntülenmesini sağlayabilirsiniz.
10.3
Radyo Düğmeleri
Radyo düğmeleri, sunulan bir dizi seçenekten sadece bir tanesini seçmenize
izin veren form öğeleridir. Örneğin "ISS'nizden memnun musunuz?"
sorusuna hem evet hem de hayır yanıtını veremezseniz. Radyo düğmeleri
web sitelerinde sık sık görmeye alıştığımız oylamalarda yoğun olarak kullanılır;
seçeneklerden bir tanesini seçer ve Gönder düğmesine basarsınız. Örnek
olarak biz de basit bir oylama/anket yapalım.
ornek36.html
<HTML>
<HEAD>
<TITLE>Radyo Düğmeleri</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000">
<FORM
METHOD=POST ACTION="mailto:e_posta_adresiniz?subject=Anket"
ENCTYPE="application/x-www-form-urlencoded">
<B>Kişisel web sayfanızın olmasını ister misiniz?</B>
<P>
<INPUT TYPE=RADIO NAME="Web_Sayfasi" VALUE="Zaten_Var">Zaten
Var<BR>
<INPUT TYPE=RADIO NAME="Web_Sayfasi" VALUE="Yakinda_Yapacagim">İsterim,
yakında yapmayı düşünüyorum<BR>
<INPUT TYPE=RADIO NAME="Web_Sayfasi" VALUE="Yapmayi_Bilmiyorum">İsterim;
ama nasıl yapılacağını bilmiyorum<BR>
<INPUT TYPE=RADIO NAME="Web_Sayfasi" VALUE="Istemem">İstemem,
bence gerek yok
<P>
<INPUT TYPE="submit" VALUE="Gönder"> <INPUT
TYPE="reset" VALUE="Temizle">
</FORM>
</BODY>
</HTML>
örnek
36'da muhtemelen ilk dikkatinizi çekecek şey; hepsi de aynı isme (NAME="Web_Sayfasi")
sahip dört tane <INPUT TYPE=RADIO> satırı. Her bir radyo düğmesinin
ismi aynı ama değerleri (VALUE) farklı. Diğer bir deyişle; ismi aynı olan
tüm düğmeleri, farklı değerler alabilen tek bir düğme gibi düşünebilirsiniz.
Örnekteki formu dolduranlar herhangi bir radyo düğmesini seçtiğinde, "Web_Sayfasi"
seçilen radyo düğmesinin değerini alır. Örneğin yanında "İsterim,
yakında yapmayı düşünüyorum" yazan 2 numaralı radyo düğmesi seçilip
Gönder tuşuna basıldığında "Web_Sayfasi" nın değeri "Yakinda_Yapacagim"
olur.
İpucu:
Eğer bir radyo düğmesinin otomatik olarak seçili belirmesini istiyorsanız
CHECKED parametresini kullanabilirsiniz. Örneğin ilk radyo düğmesini seçili
yapmak için <INPUT TYPE=RADIO NAME="Web_Sayfasi" VALUE="Zaten_Var"
CHECKED> işaretini kullanabilirsiniz.
10.4
İşaret Kutucukları
İşaret kutucukları, radyo düğmelerinin aksine birden çok seçenek seçmenize
izin verirler. Örneğin "Dışarıda yemek yerken tercih ettiğiniz yiyecekler:"
sorusuna birden çok yanıt verebilirsiniz. Yanıtı birden çok olabilen sorular
için işaret kutucukları kullanılmalıdır.
ornek37.html
<HTML>
<HEAD>
<TITLE>İşaret Kutucukları</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000">
<FORM
METHOD=POST ACTION="mailto:e_posta_adresiniz?subject=Anket"
ENCTYPE="application/x-www-form-urlencoded">
<B>Dışarıda yemek yerken tercih ettiğiniz yiyecekler:</B>
<P>
<INPUT TYPE=CHECKBOX NAME="ev_yemekleri">Ev yemekleri
<INPUT TYPE=CHECKBOX NAME="gozleme">Gözleme
<INPUT TYPE=CHECKBOX NAME="hamburger">Hamburger
<INPUT TYPE=CHECKBOX NAME="kebap">Kebap
<INPUT TYPE=CHECKBOX NAME="pizza">Pizza
<P>
<INPUT TYPE="submit" VALUE="Gönder"> <INPUT
TYPE="reset" VALUE="Temizle">
</FORM>
</BODY>
</HTML>
örnek
37'de
işaret kutucuklarını oluşturmak için <INPUT TYPE=CHECKBOX> ile başlayan
satırları kullanıyoruz. Dikkat ederseniz bu satırlar herhangi bir VALUE
değeri içermiyorlar; bunun yerine herbir işaret kutucuğunun kendine ait
bir ismi var. Eğer herhangi bir işaret kutucuğu seçilirse, formun sonuçlarını
size ileten e-posta mesajında, bu seçeneğin isminin karşısında "on"
(seçili) değeri görüntülenecektir.
İpucu:
Radyo düğmelerinde olduğu gibi işaret kutularında da CHECKED parametresi
istediğiniz seçeneğin otomatik olarak seçili gelmesini sağlar. Tabi radyo
düğmelerinin aksine birden çok seçeneği otomatik olarak seçili kılabilirsiniz
10.5
Kombo Kutuları
Kombo kutuları, sayfayı uzanıp giden seçeneklerle doldurmak istemediğiniz
zamanlarda çok yararlı olur. Bir kombo kutusu, yanındaki ok işaretine
tıklandığında açılan ve içerdiği seçeneklerden birini seçmenize izin veren
özel bir form öğesidir.
ornek38.html
<HTML>
<HEAD>
<TITLE>Kombo Kutuları</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000">
<FORM
METHOD=POST ACTION="mailto:e_posta_adresiniz?subject=Anket"
ENCTYPE="application/x-www-form-urlencoded">
<B>Modeminizin hızı:</B>
<SELECT NAME="Modem">
<OPTION>--Modem--</OPTION>
<OPTION VALUE="14K">14K</OPTION>
<OPTION VALUE="28K">28K</OPTION>
<OPTION VALUE="33K">33K</OPTION>
<OPTION VALUE="56K">56K</OPTION>
<OPTION VALUE="Diger">Diğer</OPTION>
</SELECT>
<P>
<INPUT TYPE="submit" VALUE="Gönder"> <INPUT
TYPE="reset" VALUE="Temizle">
</FORM>
</BODY>
</HTML>
örnek
38'de bir kombo kutusunu tanımlamak için <SELECT> ve <OPTION>
işaretlerini kullanıyoruz. <SELECT> işareti kombo kutusunun tümüne
karşılık geliyor ve NAME parametresiyle isimlendirilmesi gerekiyor. <OPTION>
işareti ile ise kombo kutumuzda yer alacak herbir seçeneği belirliyoruz.
Seçilebilir her seçenek bir değere sahip olmalı (VALUE parametresi). Buradaki
--Modem-- yazılı satırın bir VALUE parametresine sahip olmadığına dikkat
edin. Normalde bu satırı kullanmak zorunda değildik; ama insanların yanlışlıkla
veya umursamazlıkla kombo kutumuzdan herhangi bir seçim yapmadan Gönder
tuşuna basmadığına emin olmak için iyi bir tedbir. Eğer bu satırı kullanmasaydık
bir miktar dikkatsiz veya "aldırmaz" insanın yanlış sonuçlar
yollama olasılığı oldukça yüksek olacaktı. Bu yüzden kombo kutularının
ilk seçeneklerini bu tür "seçenek olmayan" açıklayıcı kısa birkaç
kelime yapmak çoğu zaman tercih edilen bir yöntem.
10.6
Formlar Bölüm Özeti
* Bir form tanımlamak için öncelikle formumuzdaki öğelerin <FORM>
ve </FORM> işaretleri arasında yer alması gerektiğini öğrendik.
* <FORM> işaretinin arkasına gelen parametrelerden en önemlisinin
ACTION parametresi olduğunu, bu parametreyle form sonuçlarının verilen
e-posta adresine gönderilebileceğini gördük.
* <TEXTAREA> işaretinin, boyutlarını COLS (en) ve ROWS (boy) parametreleriyle
bizim belirleyebileceğimiz, içine yazı yazılabilir bir metin alanı tanımlamakta
kullanıldığını öğrendik.
* NAME parametresinin <TEXTAREA> dahil hemen tüm form öğelerinde
ortak bir parametre olduğunu ve öğelere isim vermekte kullanıldığını gördük.
Bu parametrenin, bize ulaşan form sonuçlarında, hangi öğenin ne değer
aldığını anlamakta kullanıldığını öğrendik.
* Doldurulan formun gönderilebilmesi için gerekli düğmeyi <INPUT TYPE="submit">
işaretiyle, formu temizlemek için kullanılan düğmeyi de <INPUT TYPE="reset">
işaretiyle formumuza ekleyebileceğimizi gördük.
* İsim, e-posta adresi gibi tek satıra sığabilecek bilgiler için kullanılan
metin satırlarını <INPUT TYPE=TEXT> işareti ile tanımladığımızı;
satırların boyutlarını belirlemek için de SIZE (görünen boyut) ve MAXLENGTH
(yazılabilecek maksimum karakter sayısı) parametrelerini kullanabileceğimi
öğrendik.
* Metin satırlarına yazılan karakterlerin gözükmemesi, bunun yerine yazılan
her karakter için * işaretinin görüntülenmesi için TYPE parametresinin
değerinin PASSWORD olması gerektiğini gördük.
* Verilen bir dizi seçenekten sadece bir tanesinin seçilebildiği durumlarda
<INPUT TYPE=RADIO> işaretiyle radyo düğmeleri tanımlamamız gerektiğini
ve ismi (NAME parametresiyle) aynı olan tüm radyo düğmelerinin değişik
değerler alabilen tek bir düğme olarak düşünebileneceğini öğrendik.
* Radyo düğmelerinin aksine birden çok seçeneğin aynı anda seçilebileceği
form öğesinin işaret kutucukları olduğunu ve bunların <INPUT TYPE=CHECKBOX>
işareti ile tanımladığını gördük. Herbir işaret kutusunun yine radyo düğmelerinin
aksine ayrı bir ismi olduğunu ve seçililerse "on" değerini aldıklarını
öğrendik.
* Kombo kutularının, işlevsel olarak, radyo düğmeleriyle aynı olduğunu
ancak ekranda çok daha az yer kapladığını ve <SELECT> ile <OPTION>
işaretleriyle tanımlandığını gördük.
Formlar konusu ile birlikte HTML
öğreniyorum yazı dizimiz sona erdi, buraya kadar öğrendiklerinizle
internette siz de kendinize ait sayfalarınızı inşa edebilirsiniz, eğer
bu konuda ciddi düşünüyorsanız bunun yolunun çok çalışmaktan geçtiğini
sakın unutmayın, hoşunuza giden sitelerin dizayn mantığını anlamaya
çalışın, hatta bunun için kaynak kodlarını inceleyin. Görsel editörleri
kullanarak sayfalar hazırlayın ve sonra da editörün kodları nasıl oluşturduğuna
bakın. Son olarak; iyi bir tasarımcı olmanın yolunun çok çalışmak ve
devamlı araştırmakan geçtiğini unutmayın. Hepinize başarılar...
Mehmet
BASTI / Fatih Üniversitesi
|