HTML Sayfalarında FORM İşlemleri
Web sayfalarında ziyaretçilerle etkileşime geçmek için kullanacağımız elemanlar form elemanlarıdır. Form nesneleri sayesinde, ziyaretçilerden isim, soy isim, parola, mail, cinsiyet gibi bilgileri alabiliriz.
Bu günkü dersimizde html sayfalarında form oluşturmayı öğreneceğiz.
Form nesneleri <form> ... </form> etiketleri arasına yazılırlar. <form> etiketi yazılırken method ve action gibi parametreler sık kullanır. Peki bu parametreler ne işe yarar?
action parametresi; gönder, kaydet gibi butonlara basıldığında, formdaki kutulara yazılan bilgilerin hangi sayfaya gideceğini belirtir.
method parametresi ise forma girilen bilgilerin, diğer sayfaya nasıl gönderileceğini belirtir. POST yada GET değerlerini alabilir.
GET değeri verildiği zaman, kontrollere girilen içerik o anda bulunan adrese eklenip diğer sayfaya gönderilir.
gönder butonuna tıklandığında adres satırı bu şekilde görünür.
POST ise form içeriğini direkt olarak diğer sayfaya gönderir.
gönder butonuna tıklandığında adres satırı bu şekilde görünür.
FORM ELEMANLARI
form etiketini öğrendiğimize göre artık form nesnelerini öğrenebiliriz. Form nesnelerini input, select, textarea, button etiketleri ile ekleyebiliriz sayfamıza. Bunlardan input en çok kullanılanıdır.
- <input> etiketi
<input> etiketi form içerisinde bilgi almak için kullanılan etikettir. Hangi veri türünde girişin yapılacağını burada kullanılan type elemanı belirlemektedir. <input> etiketinin sonlandırıcı etiketi bulunmaz yani bu etiket kapatılmaz. Aşağıdaki parametreleri alır.
|
Text |
Metin girişleri için kullanılır |
 |
|
Password |
Metin girişi yaparken gizler |
 |
|
Checkbox |
Onay kutusu. Birden fazla seçim yapılabilir. |
 |
|
Radio |
Yuvarlak seçim kutusu. Tek seçenek seçilir |
 |
|
submit |
Girilen bilgileri, göndermek için kullanılır |
 |
|
reset |
Girilen bilgileri temizler |
|
|
File |
Dosya seçimi yapabilmemizi sağlar |
 |
|
date |
Tarih seçimine imkan verir |
 |
|
number |
Yukarı aşağı butonları kullanarak rakam girişi
yapabiliriz. |
 |
input etiketi ile ilgili detaylı anlatımı şu adresten görüntüleyebilirsiniz.
- <select> etiketi
Formlara <select> (seç) etiketi kullanarak açılır listeler ekleyebiliriz. Listede yer alacak elemanlar ise <option> etiketi ile belirtilir.
<select name="ktMeslek">
<option>Ev Hanımı</option>
<option selected>Öğrenci</option>
<option>Memur</option>
</select>
- <textarea> etiketi
Adres, yorum, görüş gibi çok satırlı yazılar yazılmasını sağlayan metin girişi nesnesidir.
DİKKAT! Form nesneleri ile ziyaretçiden alınan bilgileri, daha sonra kullanabilmek için, her bir form nesnesine bir isim (name) belirlemek gerekir.
