JavaScript'e Giriş
Bölüm 7

  Formlar bazı web sayfaları için çok önemlidir. Genellikle forma girilen server'a geri gönderilir ve CGI adı verilen ve web sunucusu üzerinde çalışan programlar tarafından işlem görürler. JavaScript'in forma girilen bilgileri sunucuya gitmeden önce değerlendirmesi gibi bir fonksiyonelliği vardır. Önce formların nasıl değerlendirildiğini göstermek isityorum. Daha sonra bilgileri gönderme türlerine bakacağız.

Şimdi basit bir script ile başlayalım. HTML sayfasında iki adet text formu var ve kullanıcı bunlardan birine adını, öbürüne de e-mail adresini girecek. Bu formlara birşeyler girin ve düğmeye basın. Bir de formları boş bırakarak deneyin. Bakalım ne olacak.

Adınız:

e-mail adresiniz:

İlk denemede eğer herhangi birşey forma yazılmazsa hata mesajı oluşacaktır. Ancak bu örnekte yanlış ad girilmesine karşı hiçbir şey yapılmamıştır. Örneğin forma '17' yazarsanız 'Selam 17!' diye bir mesaj alırsınız.

İkinci form biraz daha gelişmiştir. Herhangibir yazı girmeyi deneyin(Adınız gibi). e-mail adresinizin geçersiz olduğunu söyleyen bir mesajla karşılaşacaksınız. Bunun nedeni girdiğiniz bilgide '@' işaretinin olmayışıdır. Her e-mail adresinde bir @ işareti olduğundan bu form biraz daha kontrollu hazırlanmıştır.

Peki bu script'ler nasıl yapılıyor? İşte geliyor: 

<html>
<head>
<script language="JavaScript">
<!-- Sakla

function test1(form) {
  if (form.text1.value == "")
    alert("Lütfen bir değer girin!")
  else { 
   alert("Selam "+form.text1.value+"! Form Girişi Tamam!");
  }
}

function test2(form) {
  if (form.text2.value == "" || 
      form.text2.value.indexOf('@', 0) == -1) 
        alert("Geçersiz e-mail adresi!");
  else alert("Tamam!");
}
// -->
</script>
</head>

<body>
<form name="birinci">
Adınız:<br>
<input type="text" name="text1">
<input type="button" name="button1" value="Test Input" onClick="test1(this.form)">
<P>
e-mail adresiniz:<br>
<input type="text" name="text2">
<input type="button" name="button2" value="Test" onClick="test2(this.form)">
</body>
</html>

Önce HTML koduna bakalım. İki text alanı ile iki düğme yarattık. Düğmeler test1(...) ve test2(...) fonksiyonlarını çağırıyor. Bu fonksiyonlara this.form (bu.form) değerini atıyoruz. Yani bu forma girilen değeri kastetmekteyiz.

test1(form) fonksiyonu formun boş olup olmadığını kontrol ediyor. Bu if (form.text1.value == "")... yazısı ile sağlanmaktadır. 'form' fonksiyonun değişkenidir ve form'da kullandığımız 'this.form' değerini fonksiyonda bu şekilde değerlendirmekteyiz. 'text1' hangi formdan bahsettiğimizi belirler ve 'value' da forma girilen değerden bahsetttiğimizi gösterir. Eğer bu değer tırnaklar arasındaki değere eşit olursa (Tırnakların arasında hiçbir şey olmadığında form boş olursa) hata mesajı ortaya çıkacaktır. Eğer aksi olursa problem çıkmayacaktır. Buradaki asıl sorun boşluğun da geçerli sayılması. Eğer isterseniz bunları da denetleyebilirsiniz. Sanırım burada vereceğim bilgiyle bunları becermeniz pek zor olöayacaktır.

Şimdi de test2(form) fonksiyonuna bir göz atalım. Bu fonksiyon da önce forma bilgi girilip girilmediğini kontrol eder. Fakat burada 'if' komutuna birşey daha ekledik. || işareti OR (ya da) operatörüdür. Bölüm 6'da bu operatörleri inceledik. 'if' komutu birinci ya da ikinci eşitliğin doğruluğuna bakar ve ikisinden birisi doğru olursa tüm komut doğruluk kazanır ve hemen sonraki komut gerçekleşir. Yani eğer form boş kalırsa ya da @ işareti olmazsa hata mesajı oluşacaktır. Aynı şekilde daha da gerçekçi olması açısından "." kontrolü de yapabilirsiniz. (Yine || yardımıyla)


Bir formdaki bilgileri işlemek için neler kullanabilirsiniz? En basiti e-mail yolu ile yapılan formlardır. Forma girilen değerler size e-mail olarak ulaşır. Ancak eğer gönderilen forma hemen cevap verecekseniz CGI kullanmanız gerekecektir. JavaScript ile CGI'ların yaptığı şeyleri yapamazsınız. Örneğin bir ziyaretçi defteri hazırlayacaksanız bunu JavaScript ile yapamazsınız. Aslında e-mail kullanan bir formla da bu ziyaretçi defterine kayıt yapılabilir ama gelen e-maillleri teker teker sayfaya yazmanız gerekecektir. Aşağıda tamamen HTML'den oluşan bir form bulunmaktadır, Javascript kullanılmamıştır. Bu form yazılan bilgileri e-mail adresinize postalar. Ancak şunu da belirtmeliyim ki e-mail formları çok sağlıklı çalışmaz. Sayfanıza giren kişi windows üzerinde çalışan bir e-mail programı kullanmıyorsa bu bilgileri gönderemeyecektir. Ya da birçok kullanıcı formun butonuna tıkladıktan sonra karşısına çıkan e-mail penceresinden hoşnut kalmayarak e-mail'i size göndermek yerine e-mail programını kaptmayı yeğleyecektir. 

<FORM ACTION="mailto:e-mail_adresiniz@bu.adreste" ENCTYPE="text/plain">
<H3>Sayfamızı Beğendiniz mi?</H3>
  <INPUT NAME="choice" TYPE="RADIO" VALUE="1">Pek Değil<BR>
  <INPUT NAME="choice" TYPE="RADIO" VALUE="2" CHECKED>Zaman Harcamaktan Başka Bir İşe Yaramaz<BR>
  <INPUT NAME="choice" TYPE="RADIO" VALUE="3">Internet'teki en Berbat Sayfa<BR>
  <INPUT NAME="submit" TYPE="SUBMIT" VALUE=" Gönder ">
</FORM>
Bu formun cevabını e-mail ile alacaksınız. Ancak ziyaretçinizin bu formu kullanabilmesi için bir e-mail yazılımı kullanıyor olması gerekli.


Form elemanlarınızı daha şirin hale sokacak bir şey daha var: Hangi form elemanının ilk önce doldurulacağını siz belirleyebilirsiniz. Böylece kullanıcının forma tıklamasına gerek kalmaz. Bunu şöyle bir script ile başarabilirsiniz: 


function setfocus() {
        document.birinci.text1.focus();
        return;
}

Bu script ile kullanıcı ilk olarak birinci text elemanına giriş yapacaktır. 'birinci' ifadesi formun adını (FORM NAME="birinci" olarak belirtmiştik), 'text1' ifadesi de 1. formdaki form elemanının adını (yine NAME ile belirtilmiş) gösterir. Eğer sayfa yüklenir yüklenmez bu olayın olmasını istiyorsanız <body> komutunun içine onLoad özelliğiyle bu tanımı yapabilirsiniz. Bu örnek de şöyle görünecektir: 

<body onLoad="setfocus()">


İndeks - Bölüm 1 - Bölüm 2 - Bölüm 3 - Bölüm 4 - Bölüm 5 - Bölüm 6


11.Mayıs'96
© 1996 Stefan Koch