Web Formlarına Giriş -1-
Merhaba, bu dersimizde web sayfalarından görmeye alışık olduğumuz web formlarını istemci gözüyle değerlendirmeye çalışacağız. İstemci gözüyle diyorum çünkü bu dersimizde sadece istemci tarafını yani form taglarını, form nesnelerini, nasıl kullanıldıklarını öğrenmeye çalışacağız; gönderilen bilgilerin sunucuda değerlendirilmesini, kullanılmasını ilerki derslerimizde işleyeceğiz, şunu unutmayalım ki sunucu tarafli bir dil olmadan web formları bir anlam taşımaz, çünkü bu formlardan gelen verileri ancak bir sunucu taraflı dil yardımıyla alıp kullanabiliriz.
Form nedir?
Formun tanımını yaparak başlayalım, formlar kullanıcılardan bilgi almak için kullanılan, çeşitli nesneler barındıran ortamlardır; bir iş başvurusunda bile karşımıza bir form gelir doldurup iletiriz(web sayfalaında doldurduktan sonra düğmeyle gönderiyoruz(submit)). Web sayfalarında formların en çok kullanıldığı yerler: iletişim bölümünden mesaj gönderme alanları, forumlarda mesaj gönderdiğimiz alanlar, anketlerde oy kullanmamızı sağlayan radio buttonlar(her seçeneğin başındaki, sadece birinin içi işaretlenebilindiği-soldaki anketimizde görüldüğü gibi-) ve göndermemizi sağlayan düğmeler(buttonlar), açılır kutular(combo box)… bunlar form dediğimiz yapıların elemanlarıdır, ayrı ayrı kullanılabildikleri gibi hepsi bir formda da olabilir. Anket örneğinde sadece radio buton ve düğme varken, mesaj gönderme bölümünde sadece textarea ve düğme olabilir veya başka bir formda bunların hepsi olabilir.
Gelelim bu formların HTML ile oluşturulmasına, gelin sizde bir metin belgesi açın ve beraberce bir web formu oluşturalım. Olmazsa olmaz kodlarımızı hemen yazalım;
<html>
<head>
<title>Yucomp web form denemesi</title>
</head>
<body>
ÇALIŞMAMIZ BURADA OLACAK.
</body>
</html>
Formlar <form> </form> taglarıyla oluşturulur, bu tagların arasına veri alacağımız nesneleri bir bir yerleştireceğiz(inputlar). Bu veri alacağımız nesnelere geçmeden(inputlara), form taglarinin temel parametrelerini inceleyelim(nasıl ki table tagının <table bordercolor=”#FFFFFF” border=”1″ gibi parametleri varsa, form taglarının parametreleri vardır ). Form taglarının en genel 3 parametresi vardır.
Bunlar name, action, method hadi bir de target diyelim.
name:forma vereceğimiz isimdir, örnek:
<form name=”yucomp”>
Form nesneleri buraya
</form>
Artık formumuzun bir ismi var ancak bu formun nereye gönderileceğini belirteceğimiz action parametresi olmadan sadece isim hiç bir işe yaramaz.
action:Formun(verilerin) hangi dosyaya gönderileceğini action parametresine yazarız. örnek:
<form name=”yucomp” action=”islem.asp”>
Form nesneleri buraya 🙂
</form>
Artık formumuzla göndereceğimiz bilgilerin gideceği yer belli, hatırlarsanız Dinamik ve Durgun Web Sayfaları Konulu Makalemizde bu konudan bahsetmiştik( http://www.yucomp.org/icerik.asp?yer=gst&t=2&id=81).
method:Formumuzdaki bilgilerin gönderilme metodu, post ve get olarak iki yöntem vardır. Genellikle post kullanılır, anatomisine girmeden(ben de pek bilmiyorum:))sadece şunu söyleyeyim get le gonderilen bilgiler adres çubuğunda görünür(www.yucomp.org?kac=3&nerde=listede gibi).Biz örneğimizde post methodunu kullanacağız. Eğer method bildirimini yapmazsanız method varsayılan olarak get olacaktır. Form taglarımızın son hali;
<form name=”yucomp” action=”islem.asp” method=”post”>
Bir dahaki dersimizde burayı dolduracağız:)
</form>
target: bu parametre pek gerekli olmuyor, eğer actionu yeni sayfaya vermek istiyorsanız, target=”_blank” şeklinde kullanabilirsiniz. (hatırlayacağınız gibi a tagında -köprü verirken-<a href=”dosyaismi.html” target=”_blank”>Buraya Tıklayınız</a> şeklinde bağlantıyı yeni sayfada açtırabiliyorduk)
Veri alabiliceğimiz nesneleri(form nesnelerini) sıralayalım, sonra da kullanalım;
1) Metin Kutusu(textbox)
2) Düğmeler(Button)
3) Açılır Kutu(combobox)
4) Seçim Menüsü diyelim(select)
5) Metin alanı(textarea)
6) Onay Kutucuğu(check box)
7) Radio düğme(radio button)
8) Dosya yükleme(file)
Aklıma gelenler bunlar, en yaygın bunlar kullanılıyor. Bir dahaki dersimizde bu saydığım nesnelerin çoğunu kullanarak bir form hazırlayacağız, isterseniz bir iki deneme yapabilirsiniz, içinde from olan tüm web sayfaları kaynak bölümüne geçtiğinizde gerçekten de birer kaynak olurlar:). 2. dersimize kadar oradaki kodları inceleyerek de formlar hakkında bilgi edinebilirsiniz. 2.dersimizde görüşmek üzere, başarılar dilerim…
0 thoughts on “Web Formlarına Giriş -1-”