Bir önceki sayfamızda form nesnesinin hiyerarşi sıralamasında sayfa nesnesinden sonra geldiğini ve forms ismiyle bir dizi oluşturduğunu görmüştük. Bu sayfada form nesnesini kullanmayı öğreneceğiz.
Form Komutları Sayfadaki form nesnelerini, name parametresiyle tanımladığımız isimler aracılığıyla çağırabiliriz: document.forms.yeniform gibi. Form komutlarını da bu kök üzerine yerleştiririz. Form komutlarını topluca listeledim.
action Formun işlem sayfasına girmesini sağlar.
method Formun metodunu girer (post/get).
reset() Form bilgilerini siler (resetler).
submit() Form bilgilerini girer.
acceptCharset İstemcinin (server`ın) desteklediği karakter listesini girer.
elements Form elemanlarını bir dizi haline getirerek girer.
Bu komutlar üzerinde şimdilik fazla durmayalım, çünkü henüz bu tip bir uygulama yapmaya bilgilerimiz yeterli değil. ASP ve CGI derslerimizde bu komutları fazlasıyla kullanacağız. Yine de bazılarının işlevini sizler anlamışsınızdır. Çoğu okuyucunun Ziyaretçi Defteri, Bilgi Giriş Formu, Tartışma Forumu, Arama Motoru yapmak için sabırsızlandığını hatta için için henüz göstermediğim için bana kızdığını biliyorum. :) Ama şunu belirtmeliyim ki bu tip araçları sadece HTML ve JavaScript ile yapamazsınız. JavaScript bilgileri saklamaz, depolamaz, veri tabanı oluşturmaz; sadece sayfa yüklüyken değişkenlerinde veri tutabilir. Herşeyi hemen yapmak isteyen arkadaşlar birazcık sabretsin ve bu sayfanın altındaki bilgileri öğrenmeye çalışsınlar. CGI ve ASP derslerinde acısını çıkaracağız ama önce bir script dilini çok iyi öğrenmek gerekir.
Bilgi Giriş Elemanları Bilgi giriş elemanlarının (düğme, metin kutusu, kontrol kutusu,vb.) yapısını HTML derslerimizde görmüştük. O sayfada form araçlarının parametreleri de tanıtılmıştı. İstersek o parametreleri JavaScript koduyla tanımlayabiliriz. Örneğin metin kutusunun uzunluğunu karakter cinsinden belirleyen size parametresini JavaScript kodlarıyla tanımlayalım:
Javascript:
<html>
<head>
<title>Size Parametresi,</title>
<script language="JavaScript">
function uzunluk(x)
{
document.forms.Form1.mesaj.size=x
}
</script>
</head>
<body>
<form name="Form1">
Notunuz:<input name="mesaj"><br><br>
<table cellpadding="0" cellspacing="0" border="0" width="400"><tr>
<td><input type="button" onclick="uzunluk(10)" value="Kısa Not"></td>
<td><input type="button" onclick="uzunluk(40)" value="Orta Not"></td>
<td><input type="button" onclick="uzunluk(70)" value="Uzun Not"></td>
</tr></table>
</form>
</body>
</html>
size parametresi öğrendiklerimizden sadece bir tanesi. Diğer parametreleri de bu şekilde kullanabiliriz. Örneğin maksimum karakter girişini belirlemek için document.forms.Form1.mesaj.maxlength kodundan yararlanabiliriz. Gerisini sizlerin yaratıcılığına bırakayım.
Hatırlarsanız, bir de value parametresi vardı. Bu parametreyle metin kutusuna yazı yazdırabiliyorduk. JavaScript kodlarıyla bu parametreyi, metin kutusuna yazılı olan ifadeyi değişkenlere aktarmak için kullanabiliriz:
Javascript:
<html>
<head>
<title>Form Sayfası,</title>
<script language="JavaScript">
function gir()
{
bilgi1.innerHTML=document.forms.kimlik.veri1.value
bilgi2.innerHTML=document.forms.kimlik.veri2.value
bilgi3.innerHTML=document.forms.kimlik.veri3.value
bilgi4.innerHTML=document.forms.kimlik.veri4.value
bilgi5.innerHTML=document.forms.kimlik.veri5.value
}
</script>
</head>
<body>
<form name="kimlik">
Adınız:<input name="veri1">
SoyAdınız:<input name="veri2"><br>
Yaşınız:<input name="veri3">
Cinsiyetiniz:<input name="veri4">
Telefonunuz:<input name="veri5"><br><br>
<input type="button" value="Bilgileri Tabloya Gir" onclick="gir()"><br><br>
<table cellpadding="5" cellspacing="0" border="1">
<tr><td width="100">Adı:</td><td id="bilgi1" width="300"> </td></tr>
<tr><td>SoyAdı:</td><td id="bilgi2"> </td></tr>
<tr><td>Yaşı:</td><td id="bilgi3"> </td></tr>
<tr><td>Cinsiyeti:</td><td id="bilgi4"> </td></tr>
<tr><td>Telefonu:</td><td id="bilgi5"> </td></tr>
</table>
</form>
</body>
</html>
Bu uygulamayla bir Bilgi Giriş Formu yaptık aslında. Ama bir farkla, girdiğimiz bilgiler pencere kapatılınca yok oluyor. Buradan şu sonucu çıkartabilirsiniz: JavaScript bilgileri aktarmaya ve dönüştürmeye yarar ancak o bilgileri saklamaya yaramaz. Bunun için veri tabanı gereklidir ve bu veri tabanını CGI ve ASP derslerimizde oluşturacağız. Sanırım şimdi daha iyi anlaşıldı.
Veri tabansız da birçok güzel şey yapılabiliniyor. Son uygulamamızı anlayan arkadaşlar rahatlıkla basit bir hesap makinesi yapabileceklerdir. Normal metin kutusu ve düğmeler yerine resimler de kullanılabilinir. İsterseniz deneyin, zor bir tarafı yok. Ders sayfalarının sonunda yer alan Hesap Makineleri örneklerine de bakabilirsiniz.
Kontrol kutularını seçmek için checked parametresini true değeri verebiliriz veya bunu JavaScript ile document.forms.form1.kontrolkutusu1.checked=true şeklinde ifade edebiliriz. Hatırlayacağınız üzere; radyo kutusunun işlevi gereği sadece birinin seçilmesi için, her kutuya aynı ismi veriyorduk. Bu durumda yukarıda yazıldığı gibi name özelliğini kullanamayız ama id parametresini kullanarak bu sorunu halledebiliriz. Aşağıdaki uygulamaya bakalım.
Javascript:
<html>
<head>
<title>Bundylogy Sorusu,</title>
<script language="JavaScript">
function cevap()
{
if (document.soru.rad3.checked==true) paragraf.innerHTML="En doğru cevabı işaretlediniz. Bravooo!"
else paragraf.innerHTML="Doğru ama en doğru değil, Al Bundy mantığıyla düşünün."
}
</script>
</head>
<body>
<form name="soru">
<b>Al Bundy soruyor:</b>Marcy Darcy kimdir? (Doğruluk derecesi en yüksek olanı işaretleyin lütfen...)<br>
<label for="rad1">
<input type="radio" id="rad1" name="radyo"> Part time çalışan bir paperboy`dur.
</label><br>
<label for="rad2">
<input type="radio" id="rad2" name="radyo"> Jefferson Darcy`nin kocasıdır.
</label><br>
<label for="rad3">
<input type="radio" id="rad3" name="radyo"> Bir tavuktur.
</label><br>
<label for="rad4">
<input type="radio" id="rad4" name="radyo"> Materyalist ruhu gelişkin bir banka çalışanıdır.
</label><br>
<label for="rad5">
<input type="radio" id="rad5" name="radyo"> Bundy`lerin komşusudur.
</label><br>
<input type="button" value="Değerlendir" onclick="cevap()">
<p id="paragraf">Doğru seçeneği işaretlediğinizden eminseniz, yukarıdaki düğmeye basın.</p> </form>
</body>
</html>
Sözün özü, tüm parametreleri komut haline getirebiliyoruz. Bunun yanısıra Form Elemanları için kullanılan başka komutlar da var:
focus() Tanımlanan bilgi giriş aracına odaklanmayı sağlar.
blur() Tanımlanan bilgi giriş aracının odak halinden çıkmasını sağlar.
click() Tanımlanan bilgi giriş aracını tıklamaya yarar.
select() Tanımlanan bilgi giriş aracının seçili hale gelmesini sağlar..
Tüm bu komutların yer aldığı öğretici bir uygulama yapalım:
Javascript:
<html>
<head>
<title>Bilgi giriş eleman komutları,</title>
<script language="JavaScript">
function komut(x)
{
switch(x)
{
case 1: document.form1.metinkutusu.select()
break
case 2: document.form1.metinkutusu.focus()
break
case 3: document.form1.metinkutusu.blur()
break
case 4: document.form1.dugme.click()
}
}
</script>
</head>
<body>
<form name="form1">
<input name="metinkutusu" value="metin kutusu">
<input type="button" name="dugme" value="uyarı düğmesi" onclick="alert(`Alarm!!!`)"><br><br>
<input type="button" value="Metin kutusuna odaklan" onclick="komut(2)"><br>
<input type="button" value="Metin kutusundaki yazıyı seç" onclick="komut(1)"><br>
<input type="button" value="Metin kutusunu seçili halden çıkar" onclick="komut(3)"><br>
<input type="button" value="Uyarı düğmesine bas" onclick="komut(4)"><br>
</form>
</body>
</html>
Bu uygulamamızı irdeleyelim biraz: select() komutu form aracını seçili hale getiriyor ve odaklıyor. Yani ayrıca odaklamamıza gerek kalmıyor, üzerine blur() komutunu uygularsak, odaklanma kalkıyor ama seçili hal devam ediyor tabi.
Seçenek Kutusu HTML derslerinde seçenek kutusunun nasıl görüntülendiği anlatılmıştı ama nasıl kullanıldığı üzerine birşey söylenilmemişti. Şimdi söyleyelim. Seçenek kutusunda kullanıcının işaretlediği seçeneği selectedIndex komutuyla indeks (sıra) numarası cinsinden ifade ediyoruz:
Javascript:
<html>
<head>
<title>Seçenek Kutusu İndeksleri,</title>
<script language="JavaScript">
function sec()
{
var x=document.sira_no.yazar.selectedIndex
alert(x+1)
}
</script>
</head>
<body>
<form name="sira_no">
<select name="yazar"
<option>Mario Llosa Vargas
<option>Amin Maalouf
<option>John Steinback
<option>Ursula K. Leguin
<option>Panait Istrati
</select>
<input type="button" value="Kaçıncı Seçenek" onclick="sec()">
</form>
</body>
</html>
Bu uygulama, kullanıcının seçtiği seçeneğin sıra numarasını gösteriyor. selectedIndex komutu ile seçeneğe 0 (sıfır) değeri verdiğinden, uygulamada sıra numarasını x+1 şeklinde ifade ettik.
Seçenek kutusundaki seçenekler options isimli bir dizi oluşturur. İlk seçenek options[0] şeklinde belirtilir. options[0].text ise, ilk seçeneği metinsel değer olarak ifade eder. Önceki uygulamada kullanıcının seçtiği seçeneğin sıra numarasını ifade ediyorduk. Sıra numarası yerine, seçeneği doğrudan nasıl ifade edebiliriz?
Javascript:
<html>
<head>
<title>Seçenek Kutusu: Seçilen Seçeneği Gösterme,</title>
<script language="JavaScript">
function sec()
{
var x=document.secenek.yazar.selectedIndex
var y=document.secenek.yazar.options[x].text
alert(y)
}
</script>
</head>
<body>
<form name="secenek">
<select name="yazar"
<option>Mario Llosa Vargas
<option>Amin Maalouf
<option>John Steinback
<option>Ursula K. Leguin
<option>Panait Istrati
</select>
<input type="button" value="Hangi Seçenek" onclick="sec()">
</form>
</body>
</html>
Ne yaptık? Kullanıcının seçtiği seçeneği sıra sayısı cinsinden ifade ettik. (selectedIndex ile) Sonra seçilen sıra numarasını options dizini ve text komutu sayesinde metinsel değere dönüştürdük. text yerine index komutu kullansaydık, yine sıra numarası elde edecektik.
Dilersek text komutunu seçeneklerin metnini değiştirmek için kullanabiliriz.
Javascript:
<html>
<head>
<title>Seçenek Kutusu Seçenek Değiştirme,</title>
<script language="JavaScript">
function secenekekle()
{
var x=document.forms.secenek.adsoyad.value
var y=document.secenek.yazar.selectedIndex
document.secenek.yazar.options[y].text=x
}
</script>
</head>
<body>
<form name="secenek">
<select name="yazar"
<option>Mario Llosa Vargas
<option>Amin Maalouf
<option>John Steinback
<option>Ursula K. Leguin
<option>Panait Istrati
</select><br>
Yazar ismi:
<input name="adsoyad" size="80">
<input type="button" value="Seçeneği Değiştir" onclick="secenekekle()">
</form>
</body>
</html>
Seçenek kutusunu düğmeyle beraber kullanmak zorunda değiliz. Seçenek kutusunda başka bir seçeneği işaretlediğimiz zaman işlem yapılacaksa onchange olayı kullanılmalıdır.
Javascript:
<html>
<head>
<title>Seçenek Kutusu: OnChange Olayı,</title>
<script language="JavaScript">
function degistir()
{
var x=document.secenek.yazar.selectedIndex
yazi.innerHTML=document.secenek.yazar.options[x].text
}
</script>
</head>
<body>
<form name="secenek" onchange="degistir()">
<select name="yazar">
<option>Mario Llosa Vargas
<option>Amin Maalouf
<option>John Steinback
<option>Ursula K. Leguin
<option>Panait Istrati
</select><br>
<p id="yazi">Seçeneği değiştiriniz...</p>
</form>
</body>
</html>
