Konu başlığına tıklayarak detayları görebilirsiniz!!!
Bu dersimizde Html formlarına ulaşma ve form içerisindeki elementler üzerinde javascript kullanarak işlemler yapabilmeyi öğreneceğiz. Formlar daha önce html derslerimizde işlerken gördüğümüz gibi checklist, radio button, button, yazı yazabildiğimiz alanları, dropdown gibi öğeleri yerleştirebildiğimiz etiketlerdir. Yine standart html şablonumuzu kullanarak bir örnek oluşturmaya başlıyoruz.
<form> etiketlerini kullanarak bir form oluşturuyoruz. <input> etiketi içerisinde type belirterek bir düğme (button), bir yazı alanı (textfield) oluşturuyoruz.
Bu örneğimizde <script> etiketlerimizi <form> etiketlerimizden sonra yazdığımıza dikkat ediyoruz. Eğer önce yazarsak formları oluşturmamış gibi göreceği için hiç bir işlem yapmayacaktır. Özellikle bu konuya dikkat etmemiz gerekiyor. Formların içerisinde bulunan öğeleri onun elemanları gibi düşünebiliriz tıpkı array'de olduğu gibi. Javascript'te <script> tagleri arasında form elemanlarını hesaplamak için örneğimizde olduğu gibi document.forms[0].length; komutunu kullanıyoruz. Köşeli parantez içerisinde sayfamızda birden fazla form olması durumunda hangisi ile ilgili işlem yapacağımızı belirtiyoruz. Hatırlarsanız array'de numarlandırmalar 0 ile başlıyordu. Sayfamızda kullandığımız ilk formun numarası da 0 olur. Sonraki formlar da 1-2-3 şeklinde devam eder. html kodu içerisinde oluşturduğumuz form için uzuluğu hesapladığımızda uyarı ekranı bize 2 rakamını dönecektir.
<html>
<head>
</head>
<body>
<form>
<input type="button" value="Tıkla" onClick="alert('Tıklama Başarılı');" />
<br/>
<input type="textfield" name="field1" />
<form/>
</body>
<script type="text/javascript">
var formUzunlugu = document.forms[0].length;
alert(formUzunlugu);
</script>
</html>
TARAYICI (BROWSER) EKRAN GÖRÜNTÜSÜ:
Şimdi de formumuzun herhangi bir elemanına (element) javascript kullanarak ulaşmak için bir örnek yapalım. Bunun için elements ve köşeli parantez kullanarak kaçıncı öğesiyle ilgili işlem yapacağımızı belirtiyoruz. Sonrasında ise hangi işlemi yapacağımızı belirtiyoruz. Burada değeri anlamına gelen value kullandık, program bize form içerisindeki button öğesinin value kısmını döndürecektir. Köşeli parantez içerisinde 0 yazdığımız için birinci formun birinci öğesiyle ilgili işlem yapmış oluyoruz. Eğer value değil de type yazsaydık bu sefer bize button diye dönüş yapacaktı.
<html>
<head>
</head>
<body>
<form>
<input type="button" value="Tıkla" onClick="alert('Tıklama Başarılı');" />
<br/>
<input type="textfield" name="field1" />
<form/>
</body>
<script type="text/javascript">
var deger = document.forms[0].elements[0].value;
alert(deger);
</script>
</html>
TARAYICI (BROWSER) EKRAN GÖRÜNTÜSÜ:
Geçen dersimizde tek form ve elemanları üzerinde işlem yapmayı öğrenmiştik. Bu dersimizde ise birden fazla form ve onların elemanları üzerinde işlem yapmayı öğreneceğiz. Yine her zamanki gibi standart html şablonumuzu kullanarak bir örnek yapacağız.
Formlarımızı oluşturmaya başlıyoruz. İlk olarak dikkat etmemiz gereken konu formlarımıza farklı isimler vermemiz gerektiğidir. Formumuza ismi name öğesi içerisinde veriyoruz. İlk formumuzu oluşturup name kullanarak 'siteyeGiris' ismini veriyoruz. Formumuz kullanıcı girişi ile ilgili olduğu için 'Kullanıcı Adı', Şifre text alanlarını yaratıp, Giriş butonu oluşturuyoruz.
İki form üzerinde işlem yapacağımızdan ikinci formumuzu da oluşturup name kullanarak 'anket' ismini veriyoruz. Kullanıcıya favori rengini soran bir anket oluşturup seçeneklerimizi checkbox şeklinde kullanıcıya sunuyoruz.
<html>
<head>
</head>
<body>
<form name="siteyeGiris" >
<fieldset><legend>Kullanıcı Girişi</legend>
Kullanıcı Adı: <input type="text" name="kullaniciAdi" />
<br/>
Şifre: <input type="password" name="sifre" />
<br/>
<input type="button" value="Giriş" />
</fieldset>
</form>
<form name="anket" >
<fieldset><legend>Anket</legend>
En sevdiğiniz renk nedir?
<br/>
<input type="checkbox" name="renk" value="red" > Kırmızı
<br/>
<input type="checkbox" name="renk" value="blue" > Mavi
<br/>
<input type="checkbox" name="renk" value="green" > Yeşil
<br/>
<input type="checkbox" name="renk" value="orange" > Turuncu
</fieldset>
</form>
</body>
<script type="text/javascript">
var tip = document.forms[0].elements[2].type;
alert(tip);
var deger = document.anket.elements[3].value;
alert(deger);
</script>
</html>
Formlarımızı oluşturduktan sonra javascript kısmına gelip formlarımız ile iletişime geçmeye başlıyoruz. İlk olarak ilk formumuzun 3. elemanın tipini (type) öğrenmek için bir değişken oluşturup, document.forms[0].elements[0].type; kodunu kullanıyoruz. Bu bize 'password' cevabını döndürecektir. Normalde button döndürmesini beklerdik ama fieldset de formun bir elemanı olarak göründüğünden 4 elemanlı formumuzun 3. elemanının tipi password olmuş oluyor.
İkinci kısımda da ikinci formumuzun 3. elemanın değer (value) alanını bize göstermesini istiyoruz. Bu sefer farklı bir şey yapıp formun numarasını değil adını yazarak işlem yapıyoruz. Bu yöntem daha kolay ve daha anlaşılır. Bu nedenle isterseniz bundan sonraki örneklerinizde bunu kullanabalirsiniz.
TARAYICI (BROWSER) EKRAN GÖRÜNTÜSÜ:
TARAYICI (BROWSER) EKRAN GÖRÜNTÜSÜ:
Bu dersimizde bir önceki derste oluşturduğumuz anket içerisinde bulunan kutucuklardan işaretli (checked) olanların value (değer) kısmını bir uyarı ekranı kullanarak ekrana yazdırmayı deneyeceğiz.
Yine bir önceki dersimizde olduğu gibi anket kısmını <form> içerisinde oluşturuyoruz checkbox kullanarak. <script> kısmında işaretli olanları belirlemek amacıyla isaretli adında bir fonksiyon oluşturuyoruz. Fonksiyon içerisinde bize formun içerdiği öğeleri hesaplaması için boyut adında bir değişken oluşturuyoruz. Öğelerin listesini tutması için de listemiz adında bir array (liste) oluşturuyoruz. Bir sonraki adımda da sadece işaretli olanları bize döndürmesi için bir for döngüsü yaratıyoruz. if kısmında işaretli yani checked varsa bunların değer(value) kısmını bize göstermesini istediğimizi kodumuzla belirtiyoruz. Son olarak da listemiz içerisinde bulunan seçili renkleri bize göstermesi için bir uyarı (alert) kutucuğu oluşturup listelemesini söylüyoruz.
<html>
<head>
</head>
<body>
<form name="anket" >
<fieldset><legend>Anket</legend>
En sevdiğiniz renk nedir?
<br/>
<input type="checkbox" name="renk" value="kirmizi" > Kırmızı
<br/>
<input type="checkbox" name="renk" value="mavi" > Mavi
<br/>
<input type="checkbox" name="renk" value="yesil" > Yeşil
<br/>
<input type="checkbox" name="renk" value="turuncu" > Turuncu
</fieldset>
</form>
<script type="text/javascript">
function isaretli() {
var boyut = document.anket.length;
var listemiz = new Array ();
for (var x = 0; x < boyut; x++) {
if (document.anket.elements[x].checked==true) {
listemiz.push(document.anket.elements[x].value);
}
else {
listemiz = listemiz;
}
}
alert("Seçilmiş renkler: " + listemiz.join());
}
</script>
<input type="button" value="Göster" onClick="isaretli();" />
</body>
</html>
TARAYICI (BROWSER) EKRAN GÖRÜNTÜSÜ:
