İçindekilerGirişİndex
YukarıİlkÖncekiSonrakiSon
Geriİleri
Yazdır

FORM NESNELERİ

Form Nesneleri

Javascript'in icad edilme nedenlerinin başında, ziyaretçi ile etkileşme gelir; ziyaretçi ise Web tasarımcısı olarak size bilgileri ancak ve sadece Form ile ulaştırabilir. Bu sebeple Javascript açısından HTML'in en önemli nesneleri, Form nesneleridir.

HTML, kendi formunu kendisi oluşturur; bu bakımdan Javascript'e bir görev düşmez. Javascript formdaki bilgilerin işlenmesi sırasında devreye girer. Önce Form nesnesinin özelliklerini hatırlayalım

<FORM
NAME=formun_adı
ACTION=CGI_programı
ENCTYPE=kodlama_türü
METHOD= GET veya POST
TARGET= pencere_adı
onSubmit="metodun_adı">
</FORM>

Bu durumda, tam teşekküllü bir form etiketi şöyle olabilir:

<FORM NAME="form1" ACTION="http://www.pcworld.com.tr/cgi-bin/form.pl" METHOD= GET></FORM>

Bu, gerçek bir bilgi derleme formu örneği. Fakat Form nesnesi, Server'a bilgi göndermek amacı dışında da kullanılabilir; bir form nesnesi olan IPNUT'un bir türü olan düğmeleri (button) farklı amaçlı Javascript fonksiyonlarına bağlanabilir.

Form, gerçek amacıyla kullanıldığı durumlarda, Javascript, formdaki bilgilerin Server'a gönderilmeden önce sınanmasını sağlayabilir. Bunun bir örneğini, ziyaretçinin telefon numarasını doğru biçimde yazıp yazmadığını sınadığımız kodda görmüştük. Burada kısaca, Javascript açısından form nesnesinin unsurlarını nasıl tanıyabileceğimizi ele alalım. Benzeri sınama kodları yazarken, bu unsurlara referans yapacağınız zaman, bu unsurların adlarını ve değerlerini bulma yöntemini bilmeniz gerekir.

Form etiketi içindeki bütün unsurlar element adlı dizi-değişkenin içine yazılırlar ve içerikleri form.element[i].value (i, unsurun sıra numarası olmak üzere) metoduyla bilinirler. Diyelim ki "bilgiForm" adlı formunuzun birinci unsuru "<INTPUT TPYE="text" NAME="musteriAdi"...> şeklinde bir etiket. Bu etiketin oluşturacağı kutuya ziyaretçinin yazacağı isim, Javascript açısından bilgiForm.elements[0].value veya bilgiForm.musteriAdi.value şeklinde bilinir.

FORMUN UNSURLARI

Şimdi bir form içeren sayfa örneği yapalım; Javascript ile formun tamamen doldurulmuş olup olmadığını sınayalım. Böylece ziyaretçinin göndereceği formun eksik olduğunu anlamakta geç kalmamış oluruz. Aşağıdaki kodu, form01.htm adıyla kaydedip, Browser'da bir yerini eksik olarak duldurun ve Gönder düğmesini tıklayın

Göster Gizle Kopar Satır Gizle Satır Göster
  1 <html>
  2 <head>
  3 	<title>Form</title>
  4 	<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
  5 	<script LANGUAGE="JavaScript1.2">
  6 		function denetle() {
  7 			var num = document.form1.elements.length
  8 			var dogruMu = true
  9 			for (var i=0; i<num; i++) {
 10 				if ((document.form1.elements[i].value == null ||
 11 					document.form1.elements[i].value == "") &&
 12 					(typeof document.form1.elements[i] != 'submit' ||
 13 					typeof document.form1.elements[i] != 'reset'))
 14 				{
 15 					dogruMu = false
 16 						alert("Formdaki " + document.form1.elements[i].name +
 17 " alani doldurulmamis bulunuyor. Lütfen doldurunuz!")
 18 					break
 19 				}
 20 			}
 21 			return dogruMu
 22 		}
 23 	// -->
 24 	</script>
 25 </head>
 26 <body>
 27 	<form name="form1" method="POST" onSubmit="return denetle()">
 28 		<h2>Abone Formu</h2>
 29 		<p>Adiniz:<br>
 30 		<input type=text size=25 maxlength=256 name="Abone_Adi"><br>
 31 		İlgi Alani:<br>
 32 		<input type=text size=25 maxlength=256 name="İlgi"><br>
 33 		<strong>Oturdugunuz İl: <br></strong>
 34 		<input type=text size=25 maxlength=256 name="İl"><br>
 35 		<strong>Elektronik Posta Adresiniz: <br></strong>
 36 		<input type=text size=25 maxlength=256 name="ElektronikAddress"></p>
 37 		<input type=submit value="Gönder"> <input type=reset value="Sil">
 38 	</form>
 39 </body>
 40 </html>

Daha önceki örneklerden hatırlıyorsunuz; formun içerdiği bilgilerin gerçekten Server'a gitmesi için gerekli "submit" olayının önünü kesebilmek için kullandığımız "onSubmit" olayına bağlı fonksiyonun "return" ifadesiyle, kendisini görevlendiren olay-yönlendiriciye bir sonuç bildirmesini sağlamak zorundayız. Fonksiyonu biraz irdelersek, başta tanımladığımız Boolean değişkeni "dogruMu" bize doğru-yanlış türü bir sonuç vermek zorunda; ziyaretçi herşeyi doldurmuşsa (yani her alana hiç değilse bir harf yazmışsa!) bu değişkenin değeri değişmiyor. Fakat "if" sorgulamasında düğme olmayan unsurlardan birinin değeri boşsa (yani null veya "" ise) değişkenin değeri false olacaktır. "if" sorgulamasını kaç kere yapacağız? Bu sayıyı, belgenin form elemanlarının yazıldığı dizi-değişkenin büyüklüğünden (document.form1.elements.length) öğreniyoruz, ve num adlı değişkene yazıyoruz. Dolayısıyla Forma yeni alanlar da eklesek, fonksiyonu yeniden yazmamıza gerek yok. Sonra, i adını verdiğimiz bir sayaç, num değişkeninin değerine eşit oluncaya kadar, elements dizi-değişkenindeki (submit ve reset dışındaki) bütün elemanların değerlerin boş olup olmadıklarına bakıyoruz. Bu değerlerden herhangi biri boş ise, if döngüsü o noktada kesiliyor ve ziyaretçiye bir uyarı kutusu ile formu doldurmasını hatırlatıyoruz. Bu arada uyarı kutumuz, boş olan alanın adını da bildiriyor. Bunu, if döngüsü kesildiği andaki i değişkeni değerindeki form elemanının adını alarak yapıyoruz.

Buradaki örnekte düğme (button) nesnesinin Click olayını onClick yönlendiricisi ile yakaladık. Form nesnesindeki diğer nesnelerden metin (text) ve metin alanı (textarea) nesneleri, onBlur, onChange, onFocus, onSelect yönlendiricileri ile; işaret kutusu (checkbox) ve radyo düğmesi (radio) onClick yönlendiricisi ile, seçme listesi (select) onBlur, onChange ve onFocus yönlendiricileri ile fonksiyon çağırabilirler.

Javascript fonksiyonlarımızda Form nesnesinin işaretleme kutularından hangisinin işaretlenmiş olduğunu belirlemek işaretli unsurun değerlerini bulabilmek, değiştirebilmek veya başka bir yerde kullanabilmek için önem taşır. Browser, ele aldığı bir HTML sayfasındaki Form nesnesinin unsurlarını ve burada CHECKBOX nesnesini bir dizi-değişkenin içinde tutar; bunlardan işaretlenmiş olanın CHECKED (işaretli) özelliğini True (doğru) yapar. Bu durumdan yararlanarak istediğimiz kutunun işaretli olup olmadığını sorgulayabiliriz. Burada nesnenin ".value" özelliği işe yaramaz; çünkü kutu işaretli olsa da olmasa da ".value" özelliği aynıdır. İşaretleme kutularında bilmek istediğimiz husus, bu nedenle işaretli olup olmadıklarıdır. Örneğin, sayfamızda, "form1" adlı bir formda "isaret01" adlı bir işaret kutusu varsa, bu kutunun işaretli olup olmadığını şu if döngüsü sınayabilir:

if (document.form1.isaret01.checked) {
.......

Bu ifade, kutu gerçekten işaretli arzu ettiğimiz bir işi yapar, değilse yapmaz.

Radyo Düğmesi (Radio)

Ziyaretçinin bir HTML sayfasında bir çok şık'tan birini seçmesini sağlayan radyo düğmesi (radio) isimli işaretleme yönteminde ise, aynı adı taşıyan bütün radyo düğmelerinden biri işaretlenince, Browser diğerlerini işaretlenmemiş hele getirir; dolayısıyla bu düğmenin değeri (.value özelliği) kullanılabilir. Aşağıdaki kodu yazar ve radyo.htm adıyla kaydederek, Browser'da açarsanız, seçtiğiniz radyo düğmesinin değerinin uyarı kutusunda kullanıldığını göreceksiniz.

Göster Gizle Kopar Satır Gizle Satır Göster
  1 <HTML>
  2 <HEAD>
  3 	<TITLE>Radyo Dugmesi Örnegi</TITLE> 
  4 	<META http-equiv="Content-Type" content="text/html; charset=windows-1254">
  5 	<SCRIPT LANGUAGE = "JavaScript1.2">
  6 		function radyoDegeri(radyoNesnesi) {
  7 			var deger = null
  8 			for (var i=0; i<radyoNesnesi.length; i++) {
  9 				if (radyoNesnesi[i].checked) {
 10 					deger = radyoNesnesi[i].value
 11 					break
 12 				}
 13 			}
 14 			return deger
 15 		}
 16 	</SCRIPT>
 17 </HEAD>
 18 <BODY>
 19 	<FORM name="form1">
 20 		<p><input type=radio name="sanatci" value="Türkü">Neset Ertas</p>
 21 		<p><input type=radio name="sanatci" value="Sarki">Zeki Müren</p>
 22 		<p><input type=radio name="sanatci" value="Pek anlamadim!">Sezen Aksu</p>
 23 		<input type=button value="Ne tür müzik seviyorum?" onClick="alert(radyoDegeri(this.form.sanatci))">
 24 	</FORM>
 25 </BODY>
 26 </HTML>

HTML kuralları gereği, bir grup oluşturan radyo düğmeleri aynı adı taşırlar. Burada "this" anahtar kelimesi ile içinde bulunduğumuz yani "bu formun," "sanatcı" dizi-değişkeninin tümüyle fonksiyona gönderilmesini sağlıyoruz. "radyoDegeri" adlı fonksiyonumuz zaten böyle bir öbek bilgi bekliyor ve aldığı tüm radyo düğmesi nesnesine "radyoNesnesi" adını verip, önce büyüklüğüne bakıyor. Bir dizi-değişkenin büyüklüğü eleman sayısıdır; ki bu bizim örneğimizde üçtür. "i" sayacı 0, 1 ve 2 değerleri için sınanıyor ve bunlardan birinin işaretli olması bekleniyor. İşaretli radyo düğmesi bulunduğu anda değeri "deger" değişkenine yazılıyor ve döngü kesiliyor (break). Gerisi, uyarı kutusunun "değer" değişkeni ziyaretçiye göstermesinden ibaret.

Select

Form nesnelerimizden bir diğeri ise SELECT etiketiyle oluşturduğumuz seçme kutusu. NAME, SIZE, ve MULTIPLE özelliklerine sahip olan bu nesne, onBlur, onChange, onFocus olay-yönlendiricileri ile kullanılabilir. SELECT nesnesinin değeri, kendisinin ayrılmaz parçası olan OPTION etiketinin VALUE özelliğinden gelir. Yukarıdaki radyo.htm kodunu, aşağıdaki şekilde değiştirip, sec01.htm adıyla kaydedin:

Göster Gizle Kopar Satır Gizle Satır Göster
  1 <HTML>
  2 <HEAD>
  3 	<title>Seçme Kutusu Ornegi</title>
  4 	<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
  5 	<SCRIPT LANGUAGE = "JavaScript1.2">
  6 		function secDegeri(secNesnesi) {
  7 			return secNesnesi.options[secNesnesi.selectedIndex].value
  8 		}
  9 	</SCRIPT>
 10 </HEAD>
 11 <BODY>
 12 	<FORM name="form1">
 13 		<p><SELECT NAME="sanatci" SIZE=1>
 14 		<OPTION value="Türkü">Neset Ertas</OPTION>
 15 		<OPTION value="Sarki">Zeki Müren</OPTION>
 16 		<OPTION value="Pek anlamadim!">Sezen Aksu</OPTION></P>
 17 		<input type=button value="Ne tür müzik seviyorum?" onClick="alert(secDegeri(this.form.sanatci))">
 18 	</FORM>
 19 </BODY>
 20 </HTML>

Burada ziyaretçi açısından seçme işlemi, seçme kutusunun sağındaki seçme okuna basarak yapılıyor; fakat bizim açımızdan da önemli bir değişiklik var. Seçilen unsur, SELECT nesnesinin dizi-değişkenine değil, "selectedIndex" adlı endeksin değer (.value) özelliğine yazılıyor. Dolayısıyla, bir if döngüsü ile arama yapmak gerekmiyor; bu değeri uyarı kutusuna sadece ayıklama işlemiyle belirleyip geri gönderiyoruz. Burada dikkat edeceğiniz husus, fonksiyona verilen "bu form" nesnesinin "sanatcı" adlı SELECT nesnesinin bilgi kümesi içinde sadece biri, "selectedIndex" adlı endekse sahiptir. Fonksiyon bu bilgi kümesini "secNesnesi" adıyla ele alıyor ve içindeki "options" dizi-değişkenin ziyaretçinin seçtiği ve dolayısıyla sıra numarası "selectedIndex" olarak işaretlenmiş olanın değerini (.value) alıyor ve bunu doğruca Uyarı kutusuna gönderiyor

Fakat, HTML'den biliyorsunuz ki, SELECT etiketine MULTIPLE anahtar kelimesini koyarak, ziyaretçinin birden çok seçme yapmasına izin verebilirsiniz. Bu durumda "selectedIndex" işaretini kullanabilir miyiz? Hayır; bu bir değişken olduğuna göre sadece bir değer (seçilen ilk OPTION'ın sıra numarasını) tutacaktır. Fakat SELECT nesnesinin bir de "selected" özelliği vardır ki içinde seçilen bütün OPTION'ların numarası yazılıdır. Son kod örneğimizi bu kez şöyle değiştirelim ve sec02.htm adıyla kaydedelim

Göster Gizle Kopar Satır Gizle Satır Göster
  1 <html>
  2 <head>
  3 	<title>Seçme Listesi Ornegi</title>
  4 	<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
  5 	<SCRIPT LANGUAGE = "JavaScript1.2">
  6 		function secDegeri(secilenIsim) {
  7 			var liste = ""
  8 			for (var i=0; i<secilenIsim.length; i++) {
  9 				if (secilenIsim.options[i].selected) {
 10 					liste += secilenIsim.options[i].text + " i++) {
 11 				if (secilenIsim.options[i].selected) {
 12 					liste += secilenIsim.options[i].text + "<p>"
 13 				}
 14 			}
 15 			yeniPencere = window.open ("", "Seçtikleriniz", "height=200, width=200")
 16 			yeniPencere.document.write("<H2>Su sarkilari seçtiniz:</H2><P><P>")
 17 			yeniPencere.document.write(liste)
 18 		}
 19 	</SCRIPT>
 20 </HEAD>
 21 <BODY>
 22 	<FORM name="form1">
 23 		<p><SELECT NAME="sanatci" SIZE=4 MULTIPLE>
 24 		<OPTION>Neset Ertas</OPTION>
 25 		<OPTION>Zeki Müren</OPTION>
 26 		<OPTION>Sezen Aksu</OPTION>
 27 		<OPTION>Kayahan</OPTION>
 28 		<OPTION>Mustafa Sandal</OPTION>
 29 		<OPTION>Müserref Tezcan</OPTION>
 30 		</P>
 31 		<input type=button value="Hangilerini seçtim?" onClick="secDegeri(this.form.sanatci)">
 32 	</FORM>
 33 </BODY>
 34 </HTML>

Burada seçilenlerin listesini yeni bir pencerede açtığımız belgeye yazdırıyoruz. Bu size, bir formun unsurlarını elde ettiğiniz listeyi daha sonraki bir sayfada, HTML unsuru olarak kullanabileceğinizi gösteriyor. Kodu kısaca irdelersek; fonksiyonumuz, for döngüsünün içindeki if döngüsü ile, kendisine ulaşan bilgi kümesinde "selected" olarak işaretlenenleri seçmekte ve bunların metnini (.text), liste değişkenine, aralarına <P> etiketi koyarak yazıyor

Password

Form nesnesinin Javascript yoluyla mutlaka kullanmak isteyeceğiniz bir ögesi, Password (Parola) nesnesidir. Ziyaretçinin, Password olarak nitelediğiniz INPUT kutusuna yazdığı metin, kendisine * olarak görünür; fakat Browser ve dolayısıyla Javascript bu metni bilir.

Javascript'in ilk sürümlerinde Password nesnesinin değeri Javascript tarafından bilinemezdi; fakat 1.1 sürümü ile Javascript bu nesnenin de bütün kontrolünü ele geçirdi. Aşağıdaki kodu parola.htm adıyla kaydederseniz, Password nesnesinin de değerini elde ederek, kullanabileceğinizi göreceksiniz.

Göster Gizle Kopar Satır Gizle Satır Göster
  1 <html>
  2 <head>
  3 	<title>Parolayi Görüntüle</title>
  4 	<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
  5 	<SCRIPT LANGUAGE = "JavaScript1.2">
  6 		function parolaNedir()
  7 		{
  8 			alert("\nisim --->" + document.form1.gizli.name +
  9 			"\ndeger --->" + document.form1.gizli.value)
 10 		}
 11 	</SCRIPT>
 12 </HEAD>
 13 <BODY>
 14 	<FORM NAME="form1">
 15 		<BR>
 16 		<B>Lütfen parola olarak herhangi bir kelime yazip dügmeyi tiklayin:</B>
 17 		<BR><BR>
 18 		<INPUT TYPE="password" NAME="gizli" SIZE="15">
 19 			<INPUT TYPE="button" NAME="goster" VALUE="Metni görmek için tiklayin"
 20 				onClick="parolaNedir()">
 21 	</FORM>
 22 </BODY>
 23 </HTML>

Burada herhangi bir form unsuru gibi, form1'in "gizli" adlı nesnesinin değerini alarak Uyarı kutusunda gösteriyoruz. Gerçek bir programda, bu değeri bir liste ile karşılaştırarak, kullanabilirsiniz. Ancak bu karşılaştırma işleminin ziyaretçinin bilgisayarında değil, Server'da yapılması gerekir; bunun için Password nesnesinin değerinin bir CGI programında veya ASP uygulamasında değerlendirilmesi gerekir. Browser'lar bunu bildikleri için Password nesnesini daima Server'a yollarlar. Bunu sınamak istiyorsanız, yukarıdaki kod Browser'ınızda açıkken, düğmeyi tıklamayın, klavyede Enter tuşuna basın!

Gizli Nesneler (Hidden)

HTML'in INPUT etiketiyle sayfanıza türü Hidden (Gizlenmiş) olan değişkenler koyabilirsiniz. Hidden etiketi, NAME ve VALUE özelliklerine sahiptir. Bu etiketten, genellikle ziyaretçinin Form verilerini değerlendirirken, ziyaretçi sayfa değiştirdiği halde Server'da değeri sabit kalan değişken olarak yararlanabiliriz.

Dosya Listesi

İçindekilerGirişİndex
YukarıİlkÖncekiSonrakiSon
Geriİleri
Yazdır