Embedded Files
Hazırlayan: FURKAN ÖZDEMİR
JFormlar, web sayfalarında kullanıcıların veri girmesine olanak tanır. Örneğin, bir kayıt formu, kullanıcının adını, soyadını, e-posta adresini vb. girmesine izin verir.
JavaScript kullanılarak, formdaki veriler doğrulanabilir, işlenebilir ve sunucuya gönderilebilir. Örneğin, form verileri doğrulanabilir, böylece kullanıcılar yanlış verileri gönderemezler. Form verileri işlenebilir, böylece kullanıcıların verileri düzenlenip işlenebilir. Form verileri sunucuya gönderilebilir, böylece sunucu veritabanlarına kaydedilebilir.
JavaScript, form işleme için çeşitli teknikler sunar. Örneğin, bir form gönderildiğinde tetiklenebilen bir olay işleyici (event handler) kullanarak, form verilerinin doğrulanması, işlenmesi veya gönderilmesi için bir fonksiyon çalıştırılabilir. Ayrıca, kullanıcıların formu doldururken hata yapmalarını önlemek için, bir alanın doğruluğunu kontrol eden bir fonksiyon oluşturulabilir.
Aşağıdaki örneklerde, JavaScript'in form işleme yeteneklerini gösteren bazı kodlardan bahsedelim;
FORM VERİLERİNİN DOĞRULANMASI
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("İsim alanı boş bırakılamaz");
return false;
}
Bu kod, "myForm" adlı bir formun "fname" adlı bir alanını kontrol eder ve bu alan boşsa, bir hata mesajı verir ve formun gönderilmesini engeller.
FORM VERİLERİNİ İŞLEMEK
function calculate() {
var x = document.getElementById("num1").value;
var y = document.getElementById("num2").value;
var sum = parseInt(x) + parseInt(y);
document.getElementById("result").value = sum;
}
Bu kod, "num1" ve "num2" adlı iki sayı alanındaki verileri toplar ve sonucu "result" adlı bir alana yazar.
FORM VERİLERİNİN GÖNDERİLMESİ
function submitForm() {
document.getElementById("myForm").submit();
}
Bu kod, "myForm" adlı bir formu gönderir ve form verilerini işlemek için sunucuya gönderir.
Bu örnekler, JavaScript'in form işleme yeteneklerini göstermektedir. JavaScript, form işleme işlevselliğini daha da geliştirmek için kullanılabilir, ancak bu temel işlemler, form işleme ile ilgili birçok sorunu çözebilir.
Aşağıda form ve form elemanları ile ilgili sıklıkla kullanılan metot, özellik ve olaylardan bahsedelim;
form.Submit() //Formun onaylanmasını sağlar.
form.Reset() //Formun resetlenmesini sağlar.
value //Form elemanının değeri.
name //Form elemanının adı.
checked //Form elemanının seçili ise "true" döndürür.
length //Form elemanına girilen değerin uzunluğu.
onClick //Form elemanına tıklandığında meydana gelen olay.
onSubmit //Form onaylandığında meydana gelen olay.
onReset //Form iptal edildiğinde meydana gelen olay.
onFocus //Form elemanına tıklandığında meydana gelen olay.
onBlur //Form elemanından başka bir form elemanına geçildiğinde ve form pasif hale geldiğinde meydana gelen olay.
onSelect //Form elemanı seçildiğinde meydana gelen olay.
onChange //Form elemanının değeri değiştiğinde meydana gelen olay.
Aşağıda bir kaç fonksiyonun nasıl kullanıldığını gösterelim;
onsubmit: Form gönderildiğinde tetiklenir. Bu olay, form verilerinin doğrulanması veya işlenmesi için kullanılabilir.
document.forms["myForm"].onsubmit = function() {
alert("Form gönderildi!");
};
onreset: Form sıfırlandığında tetiklenir. Bu olay, kullanıcının yanlışlıkla yanlış verileri göndermesini önlemek için kullanılabilir.
document.forms["myForm"].onreset = function() {
alert("Form sıfırlandı!");
};
onfocus: Bir form alanı odaklandığında tetiklenir. Bu olay, kullanıcının formu doldururken hangi alanların doldurulması gerektiğini belirtmek için kullanılabilir.
document.getElementById("myInput").onfocus = function() {
alert("Bu alana odaklandınız!");
};
onchange: Bir form alanı değeri değiştirildiğinde tetiklenir. Bu olay, kullanıcının formu doldururken bir alanın değerini değiştirmesi durumunda tetiklenir.
document.getElementById("myInput").onchange = function() {
alert("Değer değiştirildi!");
};
FORM VERİLERİNE ULAŞABİLDİĞİMİZ ÖRNEKLER
Örnek 1: Basit bir giriş formu:
<form>
<label for="name">Adınız:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">E-posta adresiniz:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Gönder">
</form>
Bu formda, kullanıcıların adını ve e-posta adresini girmeleri gerekmektedir. Gönder düğmesine tıklandığında, form verileri sunucuya gönderilecektir.
Örnek 2: Checkbox kullanımı:
<form>
<label for="pizza">Pizza seçenekleri:</label><br>
<input type="checkbox" id="pizza1" name="pizza" value="margarita">
<label for="pizza1">Margarita</label><br>
<input type="checkbox" id="pizza2" name="pizza" value="pepperoni">
<label for="pizza2">Pepperoni</label><br>
<input type="checkbox" id="pizza3" name="pizza" value="vegetarian">
<label for="pizza3">Vejetaryen</label><br><br>
<input type="submit" value="Gönder">
</form
Bu formda, kullanıcılar birkaç pizza seçeneği arasından seçim yapabilirler. Tüm seçeneklerin birden fazla seçilebileceğine dikkat edin.
Örnek 3: Select kullanımı:
<form>
<label for="city">Şehir seçin:</label>
<select id="city" name="city">
<option value="ankara">Ankara</option>
<option value="istanbul">İstanbul</option>
<option value="izmir">İzmir</option>
</select><br><br>
<input type="submit" value="Gönder">
</form>
Bu formda, kullanıcılar bir şehir seçebilirler. Şehir seçenekleri, bir "select" etiketi içinde "option" etiketleri kullanılarak belirtilir.
Aşağıda formumuzda bir adet text inputu ve bir adet de submit butonu var. İsteğimiz veri submit edildiğinde javascript tarafından yakalanması. ilk kodumuzda bunu id üzerinden yapıyoruz.Butona basıldığında yaz() metodu çalışır ve ıd üzerinden input değerini yakalar. document nesnesi tüm HTML dökümanını temsil eder. document.getElementById(“sonuc”) ise sonuc id’sine sahip elementi yakalar ki id sadece bir elemente ait olabileceğinden daha sağlıklı bir yöntemdir.
document.getElementById(“ad”).value ile de inputta yer alan value çekilir.
<html>
<head>
<script>
function yaz()
{
var isim;
isim = document.getElementById("ad").value;//HTML document'inin içerisindeki 'ad' id'li inputun değerini çeker.
alert(isim);
document.getElementById("sonuc").innerHTML = isim;//HTML document'inin içerisindeki 'sonuc' id'li elementin innerHTML'ini isim yapar.
}
</script>
</head>
<body>
<form>
Ad : <input type="text" id="ad"/> <br />
<span id="sonuc"> </span>
<input type="button" value="OK" onclick="yaz()"/>
<input type="reset"/>
</form>
</body>
</html>
Aşağıdaki kodumuzda ise form mantığına daha uygun bir kodlama yapılmıştır. Ulaşılmak istenen input değerine form ismi üzerinden ulaşılmıştır. Önce form ismine daha sonra da input ismine ulaşılmış ardından da value ile inputların değerleri çekilmiştir. Yukarıdaki koddan farklı olarak bu kodda onsubmit( ); kullanılmıştır. Bu form submit butonuyla submit edildiğinde çalışacak fonksiyonu belirler. Kodun javascript tarafında inputlar yakalandıktan sonra if else koşul yapılarının içerisinde return false; ve return true; ifadeleri yer almaktadır. Bunlar formun doğrulanıp doğrulanmadığını döner. Yani aşağıdaki kodda kullanıcı adı veya parola girilmesiyle yahut parola 7 haneden kısayla formu doğrulama ( return false; ) böyle bir durumla karşılaşılmazsa formu doğrula ( return true; ) denilmektedir.
<html>
<head>
<script>
function bosmu()
{
var kul = document.giris.ad.value; //HTML document'inin içerisindeki 'giris' isimli forma oradan da 'ad' isimli inputa ulaşıp valuesini çeker.
var parola = document.giris.parola.value; //HTML document'inin içerisindeki 'giris' isimli forma oradan da 'parola' isimli inputa ulaşıp valuesini çeker.
if(kul.length == 0) { alert("Kullanici adi bos birakilamaz"); return false;}
if(parola.length == 0){ alert("Parola alanı bos gecilemez"); return false;}
else if(parola.length <7) { alert("Parola 7 karakterden az olamaz"); return false; }
else
return true;
}
</script>
</head>
<body>
<form name="giris" onsubmit="return bosmu()">
Kullanici Adi : <input type="text" name="ad"/> <br/>
Parola : <input type="password" name="parola" /> <br/>
<input type="submit" value="yolla"/><input type="reset"/>
</form>
</body>
</html>
Page updated
Report abuse