JavaScript'e Giriş

JavaScript'e Giriş
Bölüm 7

Form girişi bazı Web sayfaları için çok önemlidir. Genellikle form girişi server'a geri gönderilir. JavaScript'in form girişi server'a 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="first">
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>

Ö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. Form'da kullandığımız 'this-form' değerini fonksiyonda bu şekilde kullanmaktayız. '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 verdiğim bilgiyle bunları becermeniz pek zor olmaz.
Ş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 dehe 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.

Bir formu cevaplandırırken neler kullanabilirsiniz? En basiti e-mail yolu ile yapılan formlardır. Ancak eğer gönderilen forma hemen cevap verecekseniz CGI kullanmanız gerekecektir. JavaScript'in bu gibi özellikleri yoktur. Örneğin bir ziyaretçi defteri hazırlayacaksanız bunu JavaScript ile yapamazsınız. Çünkü JavaScript server'daki bir dosyaya harhangi birşey yazamaz. Bunu birtek CGI yapabilir. 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ğıdaki script tamamen HTML'dir. Javascript kullanılmamıştır fakat eğer forma girilen bilgileri denetlemek isterseniz JavaScript kullanabilirsiniz. Ancak şunu da belirtmeliyim ki e-mail formları çok sağlıklı çalışmaz.

<FORM METHOD=POST ACTION="mailto:e-mail_adresiniz@bu_adreste">
<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 biraz problemli alacaksınız. Çünkü formdaki boşluklar '+' ya da %20 'lerle doldurulmuş olabiliyor. Yani+gelen+cevap+bu+şekilde+olabilir. Yine de bu görünüşleri düzgün gösteren programlar da mevcut.

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ı, 'text1' ifadesi de 1. formdaki form elemanının adını 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