Form Nesneleri (11. Ders)

[me3met]

Formları site ziyaretçieri ya da kullanıcılarından bilgi alma amaçlı kullanırız. Onlardan düz metin, şifre ve seçim kutuları gibi nesneler oluşturarak bilgiler alırız. Bir form alanı <form> ile başlar ve </form> ile biter. Öncelikle bilgi amaçlı yerleştireceğimiz form nesnelerini tanıyalım.

Yazı Alanları ve Form Gönderme

Bu bölümde kısa metinler, uzun metinler ve şifre kutularını tanıyacağız.

Kod:

<form name="form" action="index.php" method="post">
<b>Kullanıcı Adı:</b><br/>
<input type="text" name="isim" size0"24"<br/><br/>
<b>Şifre:</b><br/>
<input type="password" name="sifre" size="16"><br/><br/>
<input type="submit" name="gonder" value="Gönder"><br/><br/>
</form>

HTML Görünümü: http://forumil.com/nane/yaziformgonder.html


name="isim" - Form için bir isim belirleyin, bu isim bilgileri değerlendirirken yardımcı olur.
action="dosya" - Formdan alınan bilgiler hangi dosyaya gönderilecek yazılır.
method="post" hangi yöntemle formun teslim edileceği. POST olursa bilgiler görünmez, GET olursa form nesnelerine göre dinamik şekilde adreste görünür.

type="tür" Nesnenin türü, yukarıda text ile düz metin, password ile şifre kutusu, submit ile formu gönderme butonu olduğunu belirttik.
size="boyut" Nesnenin uzunluğu sadece type değeri text ya da password ise geçerlidir.
name="isim" Form isim verdiğimiz gibi nesnelere de isim vermeliyiz. Bilgileri gönderdiğimiz dosyadan veriyi alırken buradaki isimden yola çıkarız.
value="deger" Metin kutusunda ya da butonda yazacak yazıyı buradan belirleriz.

Görüldüğü üzere type="" bize form nesnesini şekillendirme şansı veriyor. Bazı durumlarda kullanıcıdan uzun bilgi almamız gerekebilir. Bu durumda <textarea></textarea> kodunu kullanarak metin kutusu yapabiliriz.

Kod:

<form name="form" action="index.php" method="post">
<b>Yorumunuzu Yazın:</b><br/>
<textarea cols="40" rows="4">Yorum Kutusu</textarea><br/><br/>
</form>

HTML Görünümü: http://forumil.com/nane/yorumkutusu.html

cols="sutun sayısı" Sütun sayısı.
rows="satır sayısı" Satır sayısı.

Seçim Kutuları

Yine <input> komutu ile tür bölümüne radio yazarak çoktan seçmeli bir form nesnesi oluturulabilir:

Kod:

<input type="radio" name="cinsiyet" value="erkek"> Erkek <br/>
<input type="radio" name="cinsiyet" value="kiz">Kız <br/>

HTML Görünümü: http://forumil.com/nane/secimkutusu.html

NOT: Sadece bir seçim yapılabilmesi için mutlaka ilgili seçeneklerde name="" değeri aynı olmalıdır.

Eğer birden fazla nesne seçebilmelerini sağlayacaksak bu kez checkbox türünden yararlanırız.

Kod:

<input type="checkbox" name="araba_var" value="araba">Arabam var.<br/>
<input type="checkbox" name="ev_var" value="ev"> Evim var. <br/>

HTML Görünümü: http://forumil.com/nane/secimkutusu1.html

Açılır Seçim Kutusu

Seçim kutusu eklemenin diğer bir yolu da <select> kodudur. Bunun kullanımı aşağıdaki gibidir.

Kod:

<select name="renk">
<option value=beyaz">Beyaz</option>
<option value="beyaz">Kırmızı </option>
<option value="beyaz">Siyah</option>
</select>

HTML Görünümü: http://forumil.com/nane/acilirkutusecim.html

Örnekte value="" ile belirtilen değer form için bilgi, option kodları arasına yazdığımız renk adları ise seçim kutusunda görünenlerdir. Bu nesnemizin adını select komutunun içinde name="renk" şeklinde belirledik.