Form elementinin action özelliği kullanıcının girdiği değerlerin hangi programa gönderileceği belirlemek için kullanılmaktadır. Örneği aşağıdaki gibi bir formun action özelliği set edilebilir :
<form action="test.jsp" method="GET"> ......... </form>
Form'da girilen değerler test.jsp adresine gönderilecektir.
Form verileri action ile belirtilen uygulamaya (adrese) iki method (yöntem) ile gönderilir .
HTML'de kullanıcıların serbest olarak yazı girebileceği üç tip yazı elemanı bulunmaktadır :
HTML'de üç çeşit düğme (button) eklenebilmektedir :
Aşağıda basit bir submit düğmesi görülmektedir .
<input type="submit" value=" Tamam "></input>
Üzerinde Tamam yazan bir düğme gözükecek ve bu düğme tıklandığında form verisi sunucuya (server'a) gönderlecektir.
Aşağıda basit bir tek satırlık yazı alanı örneği gözükmektedir :
<input type="text" size="10" name="surname"></input>
Yazı alanı 10 karakter alacak şekilde gözükecektir ve sunucuya (servar'a) surname ismi ile veri gönderilecektir.
HTML'de basit bir textarea örneği aşağıdaki gibidir :
<textarea cols="10" rows="10" name="message"></textarea>
10 sütunluk ve 10 satırlık bir yazı alanı gözükecektir. Girilen bilgi sunucuya (server'a) message adı ile gönderilecektir.
Aşağıda basit bir şifre (password) alanı örneği görülmektedir :
<input type="password" size="10" name="pass"></input>
10 karakterlik bir şifre alanı gözükecektir. Veri sunucuya (server'a) gönderildiğinde pass adıyla gönderilecektir.
Aşağıda onay kutusu örneği görülmektedir :
<input type="checkbox" name="smoking" value="yes">Sigara içer misiniz ?</input>
Sigara içer misiniz yazısının başında dikdörtgen şeklinde kullanıcının tıklayarak onaylayacağı onay kutusu görüntülenir. Eğer kullanıcı seçer ise sunucuya smoking bilgisi gönderilecektir.
Aşağıda seçenek kutusu (radio box) örneği görülmektedir :
<input type="radio" name="gender" value="fame">bayan</input> <input type="radio" name="gender" value="male">bay</input>
Yukarıda bay ve bayan yazılarının başında yuvarlak kutucuklar gözükecektir. Kullanıcı bay seçtiğinde bayan seçemi kalkar , bayan seçtiğinde ise bay seçimi kalkar. Sunucuya gender değeri hangi seçeneğin seçildiğine göre farklı bir değer gönderilir. Eğer bay seçilmiş ise sunucuya male değeri gönderilir.
Aşağıda Reset düğme örneği görülmektedir :
<input type="reset" value="Temizle"></input>
Düğmeye basıldığında kullanıcının giriş yaptığı tüm veriler temizlenir.
Aşağıda basit bir düğme örneği görülmektedir :
<input type="button" value="Tıklayın"
onClick="alert('OK')"></input>
Düğmeye tıklandığında ekranda OK yazan bir alert penceresi görülecektir.
HTML'de dosya göndermek içni kullanılan File elementi aşağıdaki gibi eklenmektedir :
<input type="file" name="selectFile"></input>
Görüntülendiğinde bir yazı alanı ve Browse.. düğmesi görünecektir. Browse düğmesi ile kullanıcı göndermek istediği dosyayı seçecektir. Kullanıcı formu post ettiğinde dosya verisi form ile birlikte sunucuya gönderilecektir.
Aşağıda input hidden kullanım örneği görülmektedir :
<input type="hidden" name="mailaddress" value="a@b.com"></input>
Form sunucuya gönderileceği zaman mailaddress bilgisi değeri a@b.com şeklinde gönderilecektir. Yukarıdaki element sayfada gözükmez.
Aşağıda çeşitli form elemanlarının olduğu form örneği gözükmektdir :
<html> <body> <form action="test.jsp" method="GET" name="testform"> <input type="hidden" name="count" value="3"></input> Kullanici Ad: <input type="text" name="username" size="10"></input><br> Sifre: <input type="text" name="pass" size="10"></input><br> Cinsiyet: <input type="radio" name="gender" value="fale">bayan</input> <input type="radio" name="gender" value="male">bay</input> <br> Hangi Müzisyenleri Seviyorsunuz ?<br> <input type="checkbox" name="music" value="nesetertas">Neset Ertas</input><br> <input type="checkbox" name="music" value="orhangencebay">Orhan Gencebay</input><br> <input type="checkbox" name="music" value="zekimuren">Zeki Müren</input><br> File Seç: <input type="file" name="selectFile"></input><br> Mesaj Yaz:<br> <textarea name="message" cols=20 rows=20></textarea><br> <input type="submit" value="Tamam"></input> <input type="reset" value="Temizle"></input> </form> </body> </html>
Örnekte kullanıcı adı ve şifre girilmesi için bir yazı alanı eklenmiştir. Cinsiyet seçimi için bir seçenek kutusu , kullanıcının sigara içip içmediğini öğrenmek için bir onay kutusu bulunmaktadır. Hangi müzisyenleri seviyorsunuz diyerek seçenek kutuları koyulmuştur. Burada müzisyenlerin hepsi birden seçilebilir veya hiç biri seçilmeyebilir. Dosya göndermek için de bir element koyulmuştur. En sonda form verisini temizlemek için bir reset düğmesi ve form bilgilerini sunucuya göndermek için bir submit düğmesi bulunmaktadır.
Aşağıda basit bir form doğrulama örneği görülmektedir :
<html> <head> <script language="javascript"> function check(aForm){ if(aForm.testText.value==""){ alert("Text Alanı Boş"); return false; }else{ return true; } } </script> </head> <body> <form acton="test.jsp" name="testform" onSubmit="return check(this)"> <input type="text" name="testText" size="10"></input> <input type="submit" value="submit"></input> </form> </body> </html>
form elementinin onSubmit özelliği check fonskiyonun çağrılmasını sağlamaktadır. check fonksiyonu parametre olara form nesnesinin kendisini (this) alır. check fonksiyonu true sonuç gönderirse form server'a gönderilir. Eğer false sonucu dönülür ise bilgiler server'a gönderilmez.
check fonskiyonu içinde de form'un testText adındaki yazı alanındaki içeriğin boş olup olmadığı kontrol edilmektedir.
aşağıda onReset kullanım örneği görülmektedir :
<html> <head> <script language="javascript"> function isReset(){ alert("formunuzu resetliyorum"); return true; } </script> </head> <body> <form acton="test.jsp" name="testform" onReset="return isReset()"> <input type="text" name="testText" size="10"></input> <input type="submit" value="submit"></input> <input type="reset" value="reset"></input> </form> </body> </html>
Reset düğmesine basıldığı zaman ekranda "formunuzu resetliyorum" mesajı gözükecektir. isReset fonskiyonu true sonucu döndürdüğü için resetleme işlemi gerçekleşir.
<form action="posturl" method="POST" enctype="multipart/form-data"> File Upload : <input type="file" name="file"> </form>