Form Nesnesi
Formlar HTML’in en önemli unsurlarından biridir, bize ziyaretçilerden bilgi alma olanağı verirler. JavaScript açısından formlar da birer nesnedirler. Bir formun elemanlarınının JavaScript’deki adı, ‘n’ form elemanının sırası olmak üzere, formAdı.elements[n]‘dir.
Örneğin
- ‘formAdı.elements.length’ ifadesi formun eleman sayısını,
- ‘formAdı.elements[n].value’ ifadesi n’inci elemanın değerini,
- ‘formAdı.elements[n].name ifadesi n’inci elemanın değerinini verir.
Form Unsurları :
- name : formun ismi
- action : formun işleneceği programın tanımlandığı etiket
- enctype : formun kodlanma türü
- method : formun gönderme veya alma işlemi göreceğini belirler
- target : hedef pencere ismi
- onsubmit : gönderme metodunun ismi
Örnek 1;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<html> <head> <title>Liste</title> <script language="JavaScript1.2"> <!-- function yazdir(secimNesnesi) { return secimNesnesi.options[secimNesnesi.selectedIndex].value } --> </script> </head> <body> <form name="form1"> <select name="dil"> <option value="Web sayfalarının temel taşıdır.">HTML <option value="Olaylara duyarlı sayfalar yapmanıza yarar.">JavaScript <option value="Formları değerlendiren programlar yazmanıza yarar.">CGI </select> <p> <input type="Button" onClick="alert(yazdir(this.form.dil))" value="Açıklama için tıklayın!"> </p> </form> </body> </html> |
Burada butonun onClick olayı ile yazdir fonksiyona ‘this.form.dil’ parametresi gönderiliyoruz. Bu ifade de butonun içinde bulunduğu form nesnesinde adı dil olan form elemanı yani select bölümünü işaret eder. Fonksiyonda bu değer secimNesnesi argümanıyla temsil edilmiş. Return ifadesiyle seçilen option’un değerini tekrar fonsiyonun çağırıldığı yer olan alert metoduna gonderiyoruz, bu metod da işini yapıp bu değeri ekranda görüntülüyor. Burada secimNesnesi.selectedIndex ifadesi bize seçilen option’un index’ini , yani sıra numarasını verir, value ise seçilen indeksin değerini verir.
Örnek 2;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<html> <head> <title>Radio Buton</title> <script language="JavaScript1.2"> <!-- function yazdir(radyoNesnesi) { var sonuc=null var ctr for(ctr=0; ctr<radyoNesnesi.length; ctr++) { if(radyoNesnesi[ctr].checked) { sonuc=radyoNesnesi[ctr].value break } } document.form1.aciklama.value=sonuc } --> </script> </head> <body> <form name="form1" > <input type="radio" name="dil" value="Web sayfalarının temel taşıdır.">HTML<br> <input type="radio" name="dil" value="Olaylara duyarlı sayfalar yapmanıza yarar.">JavaScript<br> <input type="radio" name="dil" value="Formları değerlenderen programlar yazmanıza yarar.">CGI <p> <input type="text" size="50" name="aciklama" > </p> <input type="Button" onClick="yazdir(this.form.dil)" value="Açıklama için tıklayın!"> </form> </body> </html> |
Buradaki fonksiyon bir for döngüsüyle radyo düğmelerinin işaretli(checked) olup olmadığını kontrol etmeye başlıyor. Eğer if metodu true sonucunu verirse, yani o radyo düğmesi işaretliyse, döngüyü kesiyor ve işaretli düğmenin değerini ‘sonuc’ değişkeni aracılığıyla formun aciklama isimli text bölümünde yazdırıyor.
