|
|
|
|
Form web sayfasını ziyaret eden kullanıcıdan bilgi almak için kullanılır. Kullanıcının girdiği bilgiler bir CGI programına gönderilir. Bu CGI programı form bilgilerini alır, değerlendirir ve cevap olarak bir HTML üretir. Form bilgilerini hangi programa gönderileceği form tag'inin action property'si ile verilir.Örneğin
<form action="test.jsp" name="test"> ......... </form>
Form bilgileri test.jsp adında bir programa gönderilmektedir.
Form bilgisi CGI programına iki şekilde gönderilir. GET ve POST. GET'te form bilgileri cgıProgram?element1=value&element2=value şeklinde gönderilir. Eğer formun action property'si test.jsp ise ve kullanıcı name'i ali ve surname="dayioglu" girilmişse CGI programı şu şekilde çağrılır.
test.jsp?name=ali&surname=dayioglu
test.jsp form tag'nin action property'sinde girilen değerdir. form bilgileri ? işaretinden sonra ve aralarında & işareti alarak gönderilir. Tabi ki bunu browser yapmaktadır. Browser form elementlerinin adını ve value'sini alarak bu string'i üretmektedir.
<form action="test.jsp" method="GET"> ......... </form> <form action="test.jsp" method="POST"> ......... </form>
GET method'unun bir sakıncası vardır. Kullanıcı browser adres bar'ına http://www.bilmemne.com/test.jsp?name=veli&surname=dayi yazarak direkt olarak CGI programını çağırabilir. Eğer formun önce doldurulduktan sonra CGI programını çağırmak istiyorsanız GET method'unu kullanamazsınız. Bunun yerine POST methodunu kullanmak gerekmektedir.
POST methodunda form bilgileri HTTP'in Post methodu kullanılılarak gönderilir. Halbuki GET metodunda tüm form bilgisi URL'eye eklenmişti. Eğer value çok büyükse GET methodu zaten kullanılamaz. Örneğin bir resim dosyasının içeriği gönderilmek istenirse POST method'u kullanılmalıdır.
Form bilgilerini CGI programına göndermek için forma submit düğmesi konulur. Submit düğmesi tıklandığında fomr bilgileri karşı tarafa gönderilir. Submit düğmesi eklemek için input tag'inin type attributesi submit olmalıdır.
<input type="submit" value=" Tamam "></input>
value özelliği ile submit düğmesini üzerindeki yazı verilmiştir.
Formlarda tek satırlık yazı girmek için input tag'inin type property'si kullanılır. aşağıdaki örnekte bir text alanı yaratıyoruz.
<input type="text" size="10" name="surname"></input>
Text alanı için type property'sine text değeri verilir. Size ise text alanının boyudur. Name property'si text alanaı isim vermek içindir. İsim verildiği zaman CGI programı bu ismi kullanarak text alanına girilen yazıyı alabilir.Yazı girmek için diğer element textarea tag'idir. TextArea tag'i birden fazla satırlık yazıları almak için kullanılır
<textarea cols="10" rows="10" name="message"></textarea>
cols kaç sütun olacağı rows ise kaç satır olacağıdır.
Şifre girmek için kullanılan tag'de input tag'idir. type="password" yazarsanız şifre girilen bir text alanı elde edersiniz.
<input type="password" size="10" name="pass"></input>
Kullanıcının bir bilgiyi evet veya hayır diye cevap verebilmesini sağlayan elementlerdir. beyaz bir dikdörtgen şeklindedir. Tıklandığı zaman onay işareti gözükür. Bir kere daha tıklanırsa onay işareti kalkar.
<input type="checkbox" name="smoking" value="yes">sigara içer misiniz ?</input>
Eğer kullanıcı bu onay kutusunu tıklarsa CGI programına smoking(Sigara içme) değişkeninin değeri yes olarak gönderlir. Çünkü value property'si yes yazılmıştır. Eğer onaylanmazsa hiç bir değer gönderilmez.
Kullanıcının birden fazla seçenekten birini seçmesini sağlayan elementlerdir. Bir seçenek seçildiğinde daha önce seçili olanın seçiçiliği kalkar. Yani yanlızca bir tane seçilebilir.
<input type="radio" name="sex" value="fame">bayan</input> <input type="radio" name="sex" value="male">bay</input>
Örnekte kullanıcıdan cinsiyet seçilmesi istenmektedir. İki element'in isminin aynı olduğuna dikkat etmeniz gerekir. Eğer isimleri aynı olmassa hiç bir anlamı kalmaz. Hangisi seçiliyse CGI programına o elementin value'si gönderilecektir. Örneğin kullanıcı bay'ı seçmişse karşı tarafa sex=male gönderilecektir.
Rest düğmesi formda doldurulan bilgilerin temizlenmesi için kullanılır.
<input type="reset" value="Temizle"></input>
Button ise normal bir düğme eklemek içindir. Bu düğme tıklandığında bir javascript kodu çalıştırlıması içindir. Aşağıdaki örnekte tıklandığında ekrana mesaj gösteren bir düğme ekliyoruz.
<input type="button" value="Tıklayın" onClick="alert('Tıkladız. Aferin')"></input>
onClick ile düğme tıklanma olayını yakalarsınız. Ve alert ile mesaj gösterirsiniz.
Kullanıcının bilgisayarından bir file almak için bu tag kullanılır. Bu tag koyulduğunda ekranda bir text alanı ve bir browse düğmesi görülür. Browse düğmesi ile verilmek istenen file seçilir. Bu düğme File seçmek için kullanılan pencereyi açmaktadır. Seçilen file text alanında görülür. Form submit edildiğinde seçtiğiniz file'in bilgisi CGI programına gönderilir.
<input type="file" name="selectFile"></input>
Hidden elementler web sayfasında görülmezler. Bunlar zaten belli olan verileri CGI programına göndermek için kullanılırlar.
<input type="hidden" name="mailaddress" value="tekzaf@yahoo.com"></input>
burada mailaddres adlı elementin value'si bellidir. Form CGI programına gönderildiğinde bu bilgi gönderilir.
Aşağıda tüm bu elementleri kullanan bir form görülmektedir.
| Göster Gizle Kopar Satır Gizle Satır Göster |
1 <html> 2 <body> 3 <form action="test.jsp" method="GET" name="testform"> 4 <input type="hidden" name="count" value="3"></input> 5 Kullanici Ad: 6 <input type="text" name="username" size="10"></input><br> 7 Sifre: 8 <input type="text" name="pass" size="10"></input><br> 9 Cinsiyet: 10 <input type="radio" name="sex" value="fale">bayan</input> 11 <input type="radio" name="sex" value="male">bay</input> <br> 12 Hangi Müzisyenleri Seviyorsunuz ?<br> 13 <input type="checkbox" name="music" value="nesetertas">Neset Ertas</input><br> 14 <input type="checkbox" name="music" value="orhangencebay">Orhan Gencebay</input><br> 15 <input type="checkbox" name="music" value="zekimuren">Zeki Müren</input><br> 16 File Seç: 17 <input type="file" name="selectFile"></input><br> 18 Mesaj Yaz:<br> 19 <textarea name="message" cols=20 rows=20></textarea><br> 20 <input type="submit" value="Tamam"></input> 21 <input type="reset" value="Temizle"></input> 22 </form> 23 </body> 24 </html>
|
|