Form web sayfalarında kullanıcılardan bilgi almak için kullanılır(Email adresi, Adı Soyadı vs.). 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 etiketinin action özelliği ile verilir. Örnek olarak;
<form action=”test.php” name=”test”>“Form elemanları”</form>
Bu örnekte form bilgileri test.php adında bir sayfaya gönderilmektedir. (PHP ile ilgili dersler PHP bölümünden inceleyebilirsiniz.)
Form Action Özelliği
Form bilgisi derleyici sayfaya iki şekilde gönderilir. GET ve POST metodu ile.
GET Metodu, form bilgisini;
test.php?deger1=veri1°er2=veri2
şeklinde gönderir. Burada yapılan test.php sayfasına 2 veri gönderilir. Birincisi deger1 ikincisi ise deger2 ve bunların verileri veri1 ve veri2 dir.
Form bilgileri “?” işaretinden sonra ve aralarında & işareti alarak gönderilir. Tabi ki bunu browser yapmaktadır. Browser form elemanlarının adını ve değerini alarak hedef sayfaya iletir.
POST methodu, verilerin büyük ve güvenli olması gerektiği durumlarda kullanılır. GET metodu gibi veriler adres satırında gözükmez.
Submit Düğmesi
Form bilgilerini hedef sayfaya göndermek için forma submit düğmesi konulur. Submit düğmesi tıklandığında fomr bilgileri hedef sayfaya gönderilir. Submit düğmesi eklemek için input etiketinin type özelliği submit olmalıdır. Örnek olarak;
<input type=”submit” value=” Tamam “></input>
value özelliği ile submit düğmesini üzerindeki yazı belirlenir.
Text Alanları
Formlarda tek satırlık yazı girmek için input etiketinin type özelliği “text” olarak kullanılır. Aşağıdaki örnekte bir text alanı yaratıyoruz.
<input type=”text” size=”10″ name=”surname”></input>
Size özelliği text alanının boyutudur. Name özelliği text alanına isim vermek içindir. İsim verildiği zaman, hedef sayfaya bu isim kullanılarak text alanına girilen yazı gönderilir.
Çok satırlı yazı girmek için diğer element textarea etiketidir. Örnek;
<textarea cols=”10″ rows=”10″ name=”message”></textarea>
Burada “cols” özelliği kaç sütun olacağı, “rows” özelliği ise kaç satır olacağıdır.
Bazı durumlarda hedef sayfaya şifre göndermemiz gerekir ve bu gibi durumlarda kullanılan input özelliği “password” tur. Password text alanlarda girilen değer şifreli olarak gözükmektedir.
<input type=”password” size=”10″ name=”pass”></input>
Onay Kutusu
Hedef sayfaya “Evet” yada “Hayır” gibi ikili veri göndermek için kullanılan bir form elemanıdır.
<input type=”checkbox” name=”yas” value=”yes”>30 yaşın altında mısınız?</input>
Eğer kullanıcı bu onay kutusunu tıklarsa hedef sayfaya yas değişkeninin değeri yes olarak gönderlir. Çünkü value özelliği yes yazılmıştır. Eğer onaylanmazsa hiç bir değer gönderilmez.
Seçenek Kutusu
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 elemanın isminin aynı olduğuna dikkat etmeniz gerekir. Eğer isimleri aynı olmaz ise ikisinden birini seçme mecburiyeti ortadan kalkar. Hangisi seçiliyse hedef sayfaya o elemanın value değeri gönderilecektir. Örneğin kullanıcı bay’ ı tıkladıysa hedef sayfaya “sex=male” gönderilecektir.
Düğmeler | Reset & Button
Reset düğmesi formda doldurulan bilgilerin temizlenmesi için kullanılır.
<input type=”reset” value=”Temizle”></input>
Button düğmesi 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=”Buraya Tıklayın” onClick=”alert(‘Tıkladız’)”></input>
onClick ile düğme tıklanma olayını yakalarsınız ve alert ile mesaj gösterirsiniz.
File Element
Kullanıcının bilgisayarından bir dosya almak için bu etiket kullanılır. Bu etiket koyulduğunda ekranda bir text alanı ve bir browse düğmesi görülür. Browse düğmesi ile gönderilmek istenen dosya seçilir. Bu düğme dosya seçmek için kullanılan pencereyi açmaktadır. Seçilen dosya yolu ve adı text alanında görülür. Form submit edildiğinde seçtiğiniz dosyanın bilgisi hedef dosyaya gönderilir.
<input type=”file” name=”selectFile”></input>
Hidden Element
Hidden elemanlar hazırlanan sayfada görülmezler. Bunlar manuel olarak seçilen verileri hedef dosyaya göndermek için kullanılırlar.
<input type=”hidden” name=”sayfa” value=”ogren.co”></input>
burada sayfa adlı elementin değeri bellidir(ogren.co). Form hedef dosyaya sayfa adı ile “ogren.co” verisini gönderir.
Hiç yorum yok:
Yorum Gönder