Türküm, doğruyum, yapışkanım!

Yukarıdaki kodları sayfanıza eklediğinizde en basit anlamda bir form oluşturmuş olacaksınız. Bu form iki adet text field dan oluşmaktadır.

Inputlar <input> etiketi ile belirtilir.
Inputları tip özelliğinden yararlanarak çeşitlendirebiliriz. En çok kullanılan tipleri nasıl kullanabileceğinizi aşağıdan inceleyebilirsiniz.

Text Fields

Eğer kullanıcılarınızın harf, sayı vs. yazmasını sağlamak istiyorsanız text field tipini (type) kullanmalısınız.

<form>
Ad: 
<input type="text" name="ad">
<br>
Soyad: 
<input type="text" name="soyad">
</form>

Yukarıdaki kodlar browserda aşağıdaki gibi gözükecektir:

Örnekte görüldüğü üzere input tipimizi text olarak belirledik (type="text"). Bir de formu gönderirken server tarafında kodlar işlenirken karışıklık olmaması için inputlara işlevine uygun olarak bir referans adı veriyoruz (Ör: name="ad").

Genelde bir çok tarayıcı (i.e., firefox vs.) varsayılan olarak text field ları 20 karakter uzunluğunda gösterir.

Radio buton lar

Radio butonlar kullanıcılara bir çok seçenekten bir tanesini seçtirmek için kullanılır.

<form>
<input type="radio" name="cinsiyet" value="erkek"> Erkek
<br>
<input type="radio" name="cinsiyet" value="kadin"> Kadın
</form>

Yukarıdaki kodlar browserda aşağıdaki gibi gözükecektir:

Radio tipi inputlarda sadece tek bir seçeneği seçebilirsiniz. Bunu sağlamak için radio grubuna ait elemanların name parametrelerini aynı yapmamız gerekir. Örnekte görüldüğü gibi name="cinsiyet" her iki inputta da aynıdır. Server tarafında kodlar işlenirken hangi seçeneğin seçildiğini belirtmek için value parametresi kullanılır.

Checkbox lar

Checkbox lar kullanıcılara seçenekler arasından birden fazla seçim yapmalarını sağlamak amacı ile kullanılır.

<form>
Bir işim var:
<input type="checkbox" name="sahip" value="is">
<br>
Bir evim var: 
<input type="checkbox" name="sahip" value="ev">
<br>
Bir arabam var: 
<input type="checkbox" name="sahip" value="araba">
</form>

Yukarıdaki kodlar browserda aşağıdaki gibi gözükecektir:

Checkbox tipi inputlarda birden çok seçeneği seçebilirsiniz. Radio butonlarda olduğu gibi checkbox elemanlarınında name parametrelerini aynı yapmamız gerekir. Örnekte görüldüğü gibi name="sahip" her elemanda aynıdır. Server tarafında kodlar işlenirken hangi seçeneğin seçildiğini belirtmek için value parametresi kullanılır.

Formlarda kullanılan diğer form elemanları

Drop Down Menu (Açılır Menü)

Bu tip elemanlar kullanıcıya açılır bir seçenek listesinden seçimini yaptırmak için kullanılır.

Drop Down Menu ler <select> etiketi ile belirtilir.
Menu içeriğindeki her bir seçeneği oluşturmak için ise <option> etiketi kullanılır. Hemen örneğimize bakalım:

<form>
<select name="dersler">
<option value="html">HTML</option>
<option value="xhtml">XHTML</option>
<option value="css">CSS</option>
</select>
</form>

Yukarıdaki kodlar browserda aşağıdaki gibi gözükecektir:

Server tarafında kodlar işlenirken menümüzü belirtmek için ona bir isim veririz (Ör: name="dersler"). Hangi seçeneğin seçildiğini belirtmek için de option lar için value parametremizi kullanırız.

Textarea (Text alanları)

Bu tip elemanları kullanıcıya geniş bir metin yazdırmak istediğimiz durumlarda kullanılırız.

Textarea (Text alanları) <textarea> etiketi ile belirtilir.
Kullanıcıların geniş bir metin yazması düşünülüyorsa form elemanı olarak textarea ları kullanmak idealdir. Textarea lara satır ve sütun parametreleri eklenerek yazı alanının boyutları belirlenebilir.

<form>
<textarea rows="5" cols="50"> Bu alana geniş bir metin yazabilirsiniz.</textarea> 
</form>

Yukarıdaki kodlar browserda aşağıdaki gibi gözükecektir:

Formların faaliyet (action) özellikleri ve Gönder (Submit) butonu

Tüm elemanlarımızı oluşturduk artık bu formu işler hale getirelim. Formumuzu göndermek için html sayfamızdaki kodlar yeterli değildir. Bu form bilgilerini işleyip bize belirlediğimiz yolla (Ör: E-posta) ulaşmasını sağlamak için server tabanlı bir dil ile oluşturulmuş harici bir kod dosyası da gereklidir. Gönder butonuna bastığımız zaman ASP veya PHP ile oluşturulmuş harici kod dosyamız bize form elemanlarını işleyip E-posta olarak gönderir.

<form name="formum" action="form-gonder.php" method="get">
  Adınız: 
  <input type="text" name="ad">
  <input type="submit" value="Gönder">
</form>

Yukarıdaki kodlar browserda aşağıdaki gibi gözükecektir:

Son olarak Fieldset ten bahsedip form konusunu kapatacağım,

Form elemanlarını kategorilere ayırmak istediğimizde bu etiketten faydalanırız. Belirlenen kategori altında bulunan form elemanlarının çevresi varsayılan olarak aşağıdaki örnekte görüldüğü gibi bir çerçeve ile kaplanır.

Fieldset ler <fieldset> etiketi ile, fieldsetin hangi kategoriye ait olduğu ise <legend> etiketi ile belirtilir.

<fieldset>
<legend>
Kişisel Bilgiler:
</legend>
<form action="#">
Ad <input type="text" size="3">
Soyad <input type="text" size="3">
</form>
</fieldset>

Birden fazla fieldset kullanarak kategorilerimizi çoğaltabiliriz. Daha ileride göreceğimiz CSS yardımı ile görüntüde iyileştirmeler yaparak daha hoş fieldset ler elde edebiliriz.

7. ders mi evet bakalım bakalım.

• Bu başlık ile ilgili diğer yazılar:

• HTML Tags-1 Temel kodlar
• HTML Tags-2 Links
• HTML Tags-3 Frames
• HTML Tags-4 Tables
• HTML Tags-5 Lists
• HTML Tags - 7 Images
• HTML Tags - 8 Attributes
• HTML Tags - 9 Formatting
• SWF Object - Valid Flash