Formlar web sayfalarını ziyaret eden kullanıcılardan bilgi alınmasını sağlarlar. Basit olarak formlar ziyaretçilerden bilgi alınabilen alanlardır. Formlar sayesinde, kullanıcı Web sayfalarına anketler, misafir defterleri ve sipariş formları koyabilir. Dolayısıyla ziyaretçiler tarafından doldurulmuş olunan formun, Web sayfasını düzenleyen kişiye ulaşabilmesi çok önemlidir. Bununla ilgili olarak birkaç yöntem vardır.
Formlar iki yönlü çalışırlar. Bunlardan birincisi Web tarayıcısı tarafından ekranda oluşturulan görüntü, diğeri ise, ziyaretçi tarafından doldurulduktan sonra gönderilen ve Web tarayıcısınında bu bilgileri alarak sunucuda çalıştırılan bir uygulamaya iletmesidir.
Öncelikle bir formu hazırlamak için sadece HTML tag’larını bilmek yeterlidir ancak bu formun yerine ulaşabilmesi için farklı uygulamaların (örneğin, ASP, CGI yada diğer Web teknolojileri) kullanılmaları gerekebilir. Form verileri bir Veri Tabanına kaydedilebilir, bir E-Posta adresine gönderilebilir ve daha sonrasında ise, mySQL ile istenilen kriterlere göre veriler süzülebilirler. Örnek çalışmalarda Web sayfasında oluşturulan bir formun, Elektronik Posta olarak gönderilmesi konuları işlenecektir.
Formları oluşturmak için HTML’de, <form>....</form> tag’ları arasına elemanların eklenmesi gerekir. Form tag’ı form oluşturmak için kullanılır. Form tag’ı parametreleri ise aşağıda belirtilmiştir.
Form parametreleri Action(Eylem), Method(Yöntem) ve Enctype(Şifreleme-Kodlama Türü Text/Plain)’dir.
ACTION parametresi ile form ile gönderilecek verilerin gideceği yer(nereye gönderileceği) belirlenir. Bir başka ifade ile, formun gönderildiğinde hangi program tarafından değerlendirileceği belirtilir.
Örneğin, gönderilen verilerin e-posta yoluyla Web sayfası tasarımcısının mail adresine gönderilmesi isteniyorsa HTML kodu aşağıdaki gibi olacaktır:
<form Action=mailto:kacan@bilmuh.ege.edu.tr>..</form>
Action parametresi için burada kullanılan seçenek mailto: seçeneğidir. Mailto: seçeneğinden sonra e-posta(e-mail) adresinin yazılması gereklidir. Action parametresinin ikinci bir kullanımı ise, formun çıktıklarını bir CGI göndermesidir.
Böyle bir durumda action parametresi kullanımında, mailto: seçeneğinin yerine kullanulacak cgi programının tam adresi yazılmalıdır. HTML kodu aşağıda verilmiştir:
<form action=”cgi-bin/bookform”>............</form>
Böylece doldurulup gönderilen formun, çalışması gereken CGI Script’inin yeri belirlenmiş olur. Form bilgilerinin web sunucusunun cgi-bin klasöründe yer alan bookform script’i tarafından işleneceği belirtilmiştir. CGI yazılımları genel olarak web server’larda CGI -BIN klasörü altında bulunurlar.
<form action=”/cgi-bin/users/sorubank/dersler/ustortam /perl/perl-cgi/formdeger.pl>........ </form>
Form bilgilerinin web sunucusunun cgi-bin klasöründe yer alan formdeger.pl uygulaması tarafından işleneceği belirtilmiştir.
METHOD parametresi formun göderileceği metodu (yöntem) yani bilgilerin sunucuya hangi yolla gönderileceğini belirtir. Get ve Post olmak üzere iki seçeneği vardır.
Get metodu ile en fazla 1000 karakter gönderilebilir. Hızlıdır ve web tarayıcısının adres satırını kullanarak veriyi gönderir.
Get metodu kullanıldığında, kontrollere giren içerik, o anda bulunulan adrese eklenip değerlendiriciye gönderilir. Kullanımı aşağıdaki gibidir:
<form action=mailto:kacan@bilmuh.ege.edu.tr method= ”get”> ........ </form>
Post metodunda ise veri sınırlaması yoktur. Post metodu kullanıldığında, formun içeriği direkt olarak derleyici programa yönlendirilir. Kullanımı aşağıdaki gibidir:
<form action=mailto:kacan@bilmuh.ege.edu.tr method= ”post”> ........ </form>
ENCTYPE parametresi ise, formun e-posta yoluyla mail adresine metin olarak gönderilmesi istendiği durumlarda kullanılır. Bazı e-mail programları formlar içindeki veriyi desteklemeyebilirler. Bu yüzden bir encode(şifreleme) programı kullanarak veri düzenlenir. Bunun için Enctype parametresinden sonra kullanılması istenilen encode tipi belirlenir. Kullanımı aşağıdaki gibidir:
<form action=mailto:kacan@bilmuh.ege.edu.tr method= ”post” enctype=”text/plain”>........ </form>
Sonuç olarak form tagının genel kullanımı:
<form action="url" method="post|get">...</form> şeklindedir.
Form tag’ı ile kullanılan önemli bir tag’da form elemanlarını eklemek için kullanılan Input tag’ıdır. Bu tag yardımıyla form içerisine veri giriş alanları yerleştirilir.
Input tag’ı ile yerleştirilecek veri giriş alanlarının tipininde(textbox, checkbox, radio, hidden, password, file, image, button, reset, submit, drop down list box ve scrolling text box) belirtilmesi gerekir. Veri giriş alanlarının tipinin belirtilmesi için kullanılacak parametre Type parametresidir. Input tag’ı ile kullanılacak veri giriş alanları aşağıdaki tabloda görülmektedir.
İsim | Veri Giriş Alanı | Tanım |
| Textbox (Single Line Text Box) | Basit bir veri giriş alanıdır.Form içine 256 karakter girişine izin veren bir text kutusu açar. | |
| Scrolling text box (Multi Line Text Box) | Görüş ve öneriler mesajları gibi birçok satırdan oluşan karakter girişine izin verebilen text kutusudur. | |
| Drop Down List Box |  | Aşağıya doğru açılan seçenekler(Çekme Kutusu) menüsü oluşturur. |
| Password | Şifre girişi için bir text kutusudur. Girilen karakterler *** şeklinde görünürler. | |
| Radio Button | Kullanıcı tarafından işaretlenebilen seçenek düğmeleri ( yuvarlak kutular –Seçenek Kutuları) oluşturur. Sadece bir seçenek seçilebilir. | |
| Checkbox | Kullanıcı tarafından işaretlenebilen seçenek kutuları (onay- kare kutular) oluşturur. Birden çok seçim yapılabilir. | |
| Hidden | Gizli, formda görünmeyen fakat form verileri ile aktarılan bir alan oluşturur. | |
| File | | Dosya göndermek için oluşturulur. |
| Button |  | Bir buton oluşturur. Buton üzerine tıklandığında belirlenen yada tanımlanan bir fonksiyon çalışır. Düğmeler Formun birşeyler yapmasını sağlar. |
| Submit | Formun içeriğini gönderen bir buton oluşturur. Forma girilen tüm bilgileri Action parametresindeki yere gönderir. | |
| Reset | | Forma girilen bilgileri silmek için kullanılır. |
<form action=mailto:kacan@bilmuh.ege.edu.tr method=”post” enctype=”text/plain” name=”Kişisel Bilgiler”>........ </form>
<input type=”text” name=”ad”>
Textbox(Metin Kutuları) Form içerisine kullanıcıların metin girebilecekleri, tek satırlık basit bir metin alanıdır. Metin kutusu oluşturulurken girilmesi gereken parametreler aşağıda listelenmiştir:
- type(tip), Metin kutusu oluşturuldupunu belirtir.
- size(genişlik), Metin kutusu genişliğini(uzunluk) karakter olarak belirler.
- value(değer), Metin kutusuna öndeğer vermek için kullanılır.
- maxlength (maksimum uzunluk), Metin kutusuna kullanıcının belirttiği değer kadar karakter girişine izin verir. Kullanılmadığı durumda karakter girişi sınırsız olacaktır.
- name(isim), Metin kutusuna bir isim verir.
<input type="text" name="isim" size="20" value="adiniz" maxlength="18">
<input type="password" name="textfield">
Scrolling text box , bir blok metnin(Çok satırlı metnin), kullanıcı tarafından girilmesine izin verir.
Scrolling text box oluşturulurken girilmesi gereken parametreler aşağıda listelenmiştir:
- Cols:, Textarea' nın genişiliğini belirler.
- Name, Textare'nın içeriğine verilen değişken ismi
- Rows, Textarea' nın satır sayısını belirler.
<input type="textarea" name="oneri" cols="50" rows="4">
Drop Down List Box, aşağıya doğru açılan seçenekler menüsü oluşturur.
Select elemanı, seçilebilen bir listeden kullanıcının sadece birini seçmesine izin verir. Geçerli değerler OPTION elemanı ile belirlenir.
Option elemanının value paremetresi bize seçilen elemanın değerini gönderir. Örnekte "Izmir" seçildiğinde şehir değişkenine izmir değeri atanacaktır.
<select name="sehir" size="1">
<option value="izmir" selected>Izmir</option>
<option value="ankara">Ankara</option>
</select>
<select name="spor" size="3" >
<option value="Basket">Basketbol</option>
<option value="Voleybol">Voleybol</option>
CTRL tuşu ile birden çok seçim yapılabilir.
<select name="donaným" size="3" multiple >
<option value="HDD">Hard Disk</option>
<option value="Ram">Hafıza</option>
<option value="CPU">Islemci</option>
</select>
<select name="Yil" >
<option value="98">1998</option>
<option value="99">1999</option>
<option value="00" selected>2000</option>
</select>
Eğer 1999 seçeneğini seçersiniz ; Yil ="99" olacaktır.
Selected ifadesi listbox' un sayfa açıldığında görünen ilk seçeneğidir. Genelde web sitelerinde aşağıdaki kullanım yaygındır.
<select name="yil">
<option value="98">1998</option>
<option value="99">1999</option>
<option value="00">2000</option>
<option selected>Yil seciniz</option>
</select>
Radio Button, Kullanıcı tarafından işaretlenebilen seçenek düğmeleri ( yuvarlak kutular ) oluşturur.Sadece bir seçenek seçilebilir.
Ingilizce
<input type="radio" value="dil"> Ingilizce </p>
Ingilizce
<input name="radiobutton" type="radio" value="radiobutton" checked>
Ingilizce </p> Checked kelimesi size sayfa yuklendiğinde o kutucuğun işaretli olmasını sağlar.
Yaşınız
12-18
18-35
35-70
<input type="radio" name="yas" value="1218">
<input type="radio" name="yas" value="1835">
<input type="radio" name="yas" value="3570">
Eğer name parametreleri aynı olursa sadece bir radio button seçebilirsiniz.Yani yaş değişkeni için üç ayrı ihtimal vardır. Yaş 12-18 arası, veya 18-35 arası, bir diğer olasulık ise 35-70 arasıdır. Bunlardan sadece bir tanesinin seçilmesi mantıklı olanıdır.
Checkbox, kullanıcı tarafından işaretlenebilen seçenek kutuları (Onay-kare kutular) oluşturur. Birden çok seçim yapılabilir.
İlgi alanlarınız:
Internet
<input type="checkbox" name="ilgi1" value="intenet"> Internet</p>
Muzik
<input type="checkbox" name="ilgi2" value="music"> Muzik</p>
Sinema
<input name="ilgi3" type="checkbox" id="ilgi3" value="sinema">
Sinema</p>
Kitap
<input name="ilgi4" type="checkbox" id="ilgi4" value="kitap" checked>Kitap </p>
File, formda kullanıcını doldurması veya işaretlemesi gereken alanlarla birlikte kullanıcıya bize dosya gönderme imkanı da sağlayabiliriz. Örneğin:
<input type="file" name="cv">
Düğmeye tıkladığınızda işletim sistemi tarafından dosyayı sabitdiskinizde bulabilmeniz için bir pencere açılacaktır. Bu pencere aracılığı ile seçtiğiniz dosya, server'a "cv" adıyla gönderilecektir.
cv="ozgecmis.doc"
Submit, formun içeriğindeki bilgiler form tagında bulunan action parametresinin işaret ettiği yere yine aynı tagın method parametresi doğrultusunda gönderilir.
Buton üstündeki yazıyı value değeri ile değiştirebilirsiniz.
<input type="submit" value="Submit">
<input type="submit" value="Gonder">
Reset, forma girilen bilgileri silmek için kullanılır.
<input type="reset" value="Reset">
<input type="reset" value="Sil">
Form elemanlarının kullanıldığı örnek uygulama aşağıda listelenmiştir:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-9">
<meta http-equiv="content-type" content="text/html;charset=windows-12554">
<meta http-equiv="content-language" content= "tr" >
<TITLE> Kendinizi Bize tanıtmak İstemezmisiniz?</TITLe>
</HEAD>
<style type="text/css">
Body {background:red;}
H1 {font:20pt Arial bold;}
P {background:yellow;}
A: {color: blue;}
A:link {color: red; text-decoration: none;}
A:visited {color: red; text-decoration: none}
A:hover {color: white; text-decoration: underline;}
</style>
<H1> Kendinizi Bize tanıtmak İstemezmisiniz?</H1>
<FORM NAME="İLETİSİMFORM" ACTION="FORM_ANALIZ.PL" METHOD ="POST">
<P>Adýnýz        :<INPUT TYPE="text" NAME="ADI" size="37" maxlenght="25"></p>
<P>Adresiniz     :<INPUT TYPE="text" NAME="ADRES" size="37" ></P>
<P>Posta Kodu:<INPUT TYPE="text" NAME="KOD" size="37" maxlenght="5"></P>
<P>E - mail       :<INPUT TYPE="text" NAME="mail" size="37" maxlenght="5"></P>
<P>EĞİTİM DURUMUNUZ</P>
<P><INPUT TYPE ="checkbox" NAME="İLKOKUL" VALUE="ON" >İLK
<P><INPUT TYPE ="checkbox" NAME="ORTAOKUL" VALUE="ON" >ORTA
<P><INPUT TYPE ="checkbox" NAME="LİSE" VALUE="ON" >LİSE
<P><INPUT TYPE ="checkbox" NAME="YUKSEKOKUL" VALUE="ON" >YUKSEKOKUL
<h2> bize iletmek istediğiniz bir mesaj varmı?</h2>
<P>MERAK ALANI :<SELECT NAME="MERAK " SIZE="1">
<P><OPTION SELECTED VALUE="BİR ALAN SEÇİNİZ"> BÝR ALAN </OPTION>
<P><OPTION VALUE="SIIR"> SIIR </OPTION>
<p><OPTION VALUE="MACERA"> MACERA </OPTION>
<P><OPTION VALUE="POLİSİYE"> POLİSİYE </OPTION>
<P><OPTION VALUE="AKSİYON"> AKSİYON </OPTION></p>
<P><textarea rows="5" name="mesaj" cols="33"> mesajýnýzý buraya yazabilirisiniz </textarea>
<p><input type="submit" value="gonder" name="gonder" >
<input type="reset" value="sil" name="sil"></p>
</form>
</body>
</html>
Html dosyasının çalıştırılması sonrası Web Tarayıcısındaki görüntüsü aşağıdaki gibi olacaktır.
Hiç yorum yok:
Yorum Gönder