Web Formlarına Giriş
Web sayfalarından görmeye alışık olduğumuz web formlarını istemci gözüyle değerlendirmeye çalışacağız.
Form nedir? Formun tanımını yaparak başlayalım, formlar kullanıcılardan bilgi almak için kullanılan, çeşitli nesneler barındıran ortamlardır;bir iş başvurusunda bile karşımıza bir form gelir doldurup iletiriz(web sayfalaında doldurduktan sonra düğmeyle gönderiyoruz(submit)).Web sayfalarında formların en çok kullanıldığı yerler: iletişim bölümünden mesaj gönderme alanları,forumlarda mesaj gönderdiğimiz alanlar,anketlerde oy kullanmamızı sağlayan radio buttonlar(her seçeneğin başındaki,sadece birinin içi işaretleyebilindiği-soldaki anketimizde görüldüğü gibi-) ve göndermemizi sağlayan düğmeler(buttonlar),açılır kutular(combo box) form dediğimiz yapıların elemanlarıdır.
Gelelim bu formların HTML ile oluşturulmasına,gelin sizde bir metin belgesi açın ve beraberce bir web formu oluşturalım.Olmazsa olmaz kodlarımızı hemen yazalım;
İstemci gözüyle diyorum çünkü bu dersimizde sadece istemci tarafını yani form taglarını, form nesnelerini, nasıl kullanıldıklarını öğrenmeye çalışacağız; gönderilen bilgilerin sunucuda değerlendirilmesini,kullanılmasını ilerki derslerimizde işleyeceğiz,şunu unutmayalım ki sunucu tarafli bir dil olmadan web formları bir anlam taşımaz,çünkü bu formlardan gelen verileri ancak bir sunucu taraflı dil yardımıyla alıp kullanabiliriz.<html>
<head>
<title> web form denemesi</title>
</head>
<body>
Formlar
<form> </form> taglarıyla oluşturulur,bu tagların arasına veri alacağımız nesneleri bir bir yerleştireceğiz(inputlar).Bu veri alacağımız nesnelere geçmeden(inputlara), form taglarinin temel parametrelerini inceleyelim (nasıl ki table tagının <table bordercolor="#FFFFFF" border="1" gibi parametleri varsa, form taglarının parametreleri vardır ).Form taglarının en genel 3 parametresi vardır.
Bunlar name, action, method hadi bir de target diyelim.
name: forma vereceğimiz isimdir, örnek:
<form name="yucomp">
Form nesneleri buraya
</form>
Artık formumuzun bir ismi var ancak sadece isim hiç bir işe yaramaz,bu formun nereye gonderileceğini belirteceğimiz action parametresi olmadan.
action:Formun(verilerin) hangi dosyaya gönderileceğini action parametresine yazarız.örnek:
<form name="yucomp" action="islem.asp">
Form nesneleri buraya
</form>
Artık formumuzla göndereceğimiz bilgilerin gideceği yer belli. :Formumuzdaki bilgilerin gönderilme metodu,post ve get olarak iki yöntem vardır.Genellikle post kullanılır, anatomisine girmeden sadece şunu söyleyeyim get le gonderilen bilgiler adres çubuğunda görünür (www.yucomp.org?kac=3&nerde=listede gibi). Biz örneğimizde post methodunu kullanacağız. Eğer method bildirimini yapmazsanız method varsayılan olarak get olacaktır. Form taglarımızın son hali;<form name="yucomp" action="islem.asp" method="post">
Bir dahaki dersimizde burayı dolduracağız:)
</form>target: bu parametre pek gerekli olmuyor,eğer actionu yeni sayfaya vermek istiyorsanız,target="_blank" şeklinde kullanabilirsiniz.(hatırlayacağınız gibi a tagında -kopru verirken-<a href="dosyaismi.html" target="_blank">Buraya Tıklayınız</a> şeklinde yeni sayfada açtırabiliriz)
Veri alabiliceğimiz nesneleri(form nesnelerini) sıralayalım,sonrada kullanalım;
1) Metin Kutusu(textbox)
2) Düğmeler(Button)
3) Açılır Kutu(combobox)
4) Seçim Menüsü diyelim(select)
5) Metin alanı(textarea)
6) Onay Kutucuğu(check box)
7) Radio düğme(radio button)
8) Dosya yükleme(file) <html>
<head>
<title>Yucomp web form denemesi</title>
</head>
<body> Geçen dersimizden <form></form> taglarını ve parametrelerini tanıdık.Form tagımızın parametrelerini şöyle belirleyelim;
<form name="yucomp" action="islem.asp" method="post">
method
En yaygın bunlar kullanılıyor.
Geçen dersimizle giriş yaptığımız "Web Formlarına" bu dersimizle devam ediyoruz.Bu dersimizde çeşitli form elemanlarını kullanacağımız genel bir web formunu beraberce hazırlayacağız.Fazla uzatmadan işe koyulalım;olmazsa olmazlarımızı hemen yazalım;
ÇALIŞMAMIZ BURADA OLACAK.
ÇALIŞMAMIZ BURADA OLACAK.
</body>
</html>
</form>
Şimdi de yavaş yavaş form elemanlarımızı kullanmaya başlayalım;
İlk form elemanımız Ad Soyad bilgisini alacağımız metin kutusu olsun;
<head>
<title>Yucomp web form denemesi</title>
</head>
<body>
<form name="yucomp" action="islem.asp" method="post">
<table border="1" cellpadding="0" cellspacing="0" width="100%" height="134">
<tr>
<td width="43%" height="22">
<p align="right">Adınız Soyadınız:</td>
<td width="157%" height="22"><input type="text" name="adsoyad" size="20"></td>
</tr>
<tr>
<td width="43%" height="21">
<p align="right">Üyelik Durumunuz:</td>
<td width="157%" height="21">Aktif:<input type="radio" name="durum" value="Aktif" checked>Pasif:<input type="radio" name="durum" value="Pasif"><BR></td>
</tr>
<tr>
<td width="43%" height="22">
<p align="right">Bölüm:</td>
<td width="157%" height="22"><select name="bolum"><option selected>Elektrik-Elektronik Müh</option><option>Bilgisayar Müh</option><option>Sistem Müh</option></select></td>
</tr>
<tr>
<td width="43%" height="19">
<p align="right">Görüşleriniz:</td>
<td width="157%" height="19"><textarea name="gorusler" rows="2" cols="20"></textarea> </td>
</tr>
<tr>
<td width="43%" height="19">
<p align="right">Her Hafta Rapor Almak İster misiniz? </td>
<td width="157%" height="19">
<input type="checkbox" name="raporlar" value="İstiyorum" checked></td>
</tr>
<tr>
<td width="43%" height="19">
<p align="right"><input type="submit" value="Gönder"></td>
<td width="157%" height="19"><input type="reset" value="Temizle"></td>
</tr>
</table>
<form>
</body>
<input type="text" name="adsoyad" size="20"> koduyla sayfamızda 20 karekter genişliğinde, adsoyad adında bir metin kutusu oluşturuyoruz. Eğer bir şifre alanı oluşturmak istiyorsanız yapmanız gereken sadece input type="text" yerine input type="password" yazmaktır, eğer metin kutusunun ekranda görünmeyeninden istiyorsanız-ileri uygulamalar için-input type="text" yerine input type="hidden" yazmanız gerekecektir.
Üyelik durumu bilgisini alacağımız iki tane radio düğme oluşturalım, kodu yazmadan radio düğme hakkında kısaca bilgi verelim: aynı ada sahip radio düğmelerden en az ve ne fazla biri seçilebilir,cinsiyet veya aktif-pasif sorgularında kullanılabilir
Aktif:<input type="radio" name="durum" value="Aktif" checked>Pasif:<input type="radio" name="durum" value="Pasif">
Bölüm(veya meslek) bilgisini alacağımız bir liste kutusu(combo box) oluşturalım;
<select name="bolum">
<option selected>Elektrik-Elektronik Müh</option>
<option>Bilgisayar Müh</option>
<option>Sistem Müh</option>
</select>
Not: <option>Deger1</option> Eger value degeri vermezseniz bu secenek seçildiğinde Deger1 gönderilir ancak;
<option value="Asildeger">Deger1</option> bu durumda bu secenek secildiğinde Asildeger gönderilir.
Metin kutusunun yetersiz kalacağı uzunlukta veri alışı yapacağımız metin alanı oluşturalım;
<textarea name="gorusler" rows="2" cols="20"></textarea>
Her hafta çalışma raporu almak istiyorum veya istemiyorum bilgisinin alınacağı onay kutusu oluşturalım;
Not:Eğer onay kutusu işaretlenip gönderilirse value değeri gönderilir,eğer işaretlenmemişse boş gönderilir.
<input type="checkbox" name="raporlar" value="istiyorum" checked>Anlaşılacağı gibi checked ibaresi varsayılan görünümü işaterli yapar,yeri gelmişken:herhangi bir form elemanında bu ibarenin olduğu yere disabled yazarsak o form elemanı işlevini yitirir,deneyip görünüz:))
Son olarak düğmelerimizi yerleştirelim;
Gönderme işlemini yapacak formların demirbaşı olan gönderme butonumuzu oluşturalım(her düğme gönderme işlemi yapmaz,birazdan siz de göreceksiniz)
<input type="submit" value="Gönder" >
Form alanlarını temizleyecek(ilaveten) düğmemizi de oluşturalım(bu düğme gibi);
<input type="reset" value="Temizle">
Şimdi de bu kodları kullanarak tablo yardımıyla düzgün bir şekilde gösterebileceğimiz sayfanın tüm kodlarını yazalım;
<html></html>
İşte bukadar.Formun hazır hali.
Formun Üstü
|
Adınız Soyadınız:
|
|
|
Üyelik Durumunuz:
|
Aktif:Pasif:
|
|
Bölüm:
|
|
|
Görüşleriniz:
|
|
|
Her Hafta Rapor Almak İster misiniz?
|
|
|
|
|
Formun Alt
<frameset cols="*,*"> cols="140,500" cols="25%,75%" cols="140,*"
<frameset rows="*,*"> rows="140,500" rows="25%,75%" rows="140,*"
FRAMESET
frameborder="..." (yes, no) Çerçeveler arasındaki sınır çizgisinin görünüp görünmeyeceğini belirler.
border="..." (sayı) Sınır çizgisinin kalınlığını (veya çerçeveler arası mesafeyi) belirler.
1. Sıralı listeler (ordered list)
etiketi ile kullanabileceğimiz diğer parametreler şunları
</body>
</html>
??" 
