HTML Form Oluşturma
HTML de form oluşturmak için <form> etiketi kullanılır. Form etiketinin içinde kendine ait öznitelikler vardır. Bunlardan bahsedelim ve bir örnek yapalım.
action: Form verilerinin gönder butonuna basıldığında gönderilecek sayfayı belirtir.
target: Formun nerede açılacağını belirtir.
- _blank: Yeni sekme
- _self: Aynı sayfa
method: Post ve Get olmak üzere ikiye ayrılır.
- Get: Default yöntemdir. Gönderilen form verileri sayfa adres alanına görünür. Hassas veriler için kullanılmaz. Url uzunluğu yaklaşık 3000 karakterdir.
- Post: Veriler kişisel veya hassas bilgiler içeriyorsa kullanılan yöntemdir. Adres alanında veriler görüntülenmez. Boyut sınırlaması yoktur.
Sadece göstermelik bir form yapacaksanız verileri bir yere göndermeyecekseniz action, target, method niteliklerini kullanmadan direk <form> etiketini yazarakta oluşturabilirsiniz.
<form action="bilgi.php" target="_blank" method="get"> Form elemanları gelecek </form>
Formumuzun dış çerçevisini oluşturduktan sonra bir adım daha ilerleyelim. Formun içine basit bir eleman ekleyelim. Bunun için <input> etiketini kullanacağız. Bu etiketin kendine ait nitelikleri vardır. Bunları inceleyecek olursak:
type: Form elemanının tipini belirler.
- text: Bir satırlık yazı alanı oluşturur.
- radio: Birçok seçenekten birini seçmek için düğme oluşturur.
- submit: Verileri göndermek için buton oluşturur.
name: Her zaman kullanılmaz. Bazı zamanlarda bazı form elemanları için isimlerinin farklı yada aynı olması gerekebiliyor. O gibi durumlarda ayırt edici özellik olarak kullanılır.
value: Form elemanının üstünde yazacağı yazıyı belirtir.
Şimdi daha iyi anlaşılması için örnek yapalım.
<html> <head></head> <body> <form action="bilgi.php" target="_blank" method="get"> AD: <input type="text" value="Adınızı Girin"> </br> SOYAD: <input type="text" value="Soyadınızı Girin"> </br> <input type="submit" value="GÖNDER"> </form> </body> </html>
Yukarıdaki örnekte radio kullanmadım çünkü radio kullanımında farklılık var. Radioda bir tane seçebileceğimiz için name özelliklerinin hepsinde aynı olması gerekiyor. Eğer default olarak herhangi birinin işaretli olmasını istiyorsanız checked yazmanız yeterlidir. Son olarak value niteliği radioda geçerli değildir. Onun yerine inputun bitişine butonda olmasını istediğimiz adı yazmalıyız. Daha iyi anlaşılması için hemen bir örnek yapalım.
<html> <head></head> <body> <form> <input type="radio" name="gender">İlkokul<br> <input type="radio" name="gender">Lise <br> <input type="radio" name="gender" checked>Üniversite </form> </body> </html>
Son olarak formumuza çerçeve eklemek için<fieldset> etiketini kullanırız. Çerçeveye başlık eklemek için de <legend> etiketini kullanırız. Şimdi bütün öğrendiklerimizle toplu bir örnek yapalım.
<html> <head></head> <body> <form action="kayit.php"> <fieldset> <legend>BİLGİ KAYIT FORMU</legend> AD: <br> <input type="text"><br> SOYAD: <br> <input type="text"><br> ÖĞRENİM TÜRÜ: <br> <input type="radio" name="gender">İlkokul<br> <input type="radio" name="gender">Lise <br> <input type="radio" name="gender" checked>Üniversite <br><br> <input type="submit" value="KAYDET"> </fieldset> </form> </body> </html>
