Formlar, kullanıcıdan düzenli şekilde bilgi almaya yarayan nesnelerdir.Diğer bir deyişle, kullanıcı ile programcı arasında bir köprü kurarlar.VBScript, JavaScript ve benzeri uygulamaları yapmak isteyenler için büyük önem taşır.Bunun nedeni html etiketleriyle sadece form araçlarının oluşturulabilmesidir.Bu bilgileri işlemek için html dışında uygulamalara gerek vardır.Biz bu dersimizde form araçlarını kullanarak form oluşturmaya çalışalım.

Form araçları <form>...</form> etiketleri arasına yazılır.Bu şekilde form araçları bir bütün içinde tutulmuş olur.

<form> etiketinin genel kullanım şekli:

<form name="form adı" action="gönderileceği yer" method="post veya get">

• Formda bilgi iki şekilden biri ile gönderilir(method).

get  -> Gönderilecek form bilgileri adres çubuğunda görülür.

post -> Gönderilecek form bilgileri adres çubuğunda görülmez.

• Formu e-mail adresine gönderme:

<form name="form adı" action="mailto:xxxx@xxxxxx?subject=konu"
enctype="text|plain" method="post veya get">

Konu kısmında, e-mail de konu kısmında görünmesi istenilen yazı yazılır.

• Form ile birlikte, form araçlarına ait name ve value değerleri de gönderilir.Formdaki bilgileri işleyecek sayfa ve programlar bunları dikkate alır.

Metin kutusu:

Metin kutusu, kullanıcının verileri yazarak girmesini sağlar.Form araçlarını forma eklemek için input etiketi kullanlır.Type="text" parametresi ile de eklenecek aracın metin kutusu olduğu belirtilir.

<input type="text"  name="...."  value="......"  size"......."  maxlength="....">

name="..." : Metin kutusuna isim vermek için kullanılır.Metin kutularının genişliğini karakter cinsinden belirlemek için:

size="..."   : Metin kutularının genişliğini karakter cinsinden belirlemek için kullanılır.

maxlength="..." : Metin kutusuna yazılabilecek karakter sayısını sınırlamak için kullanılır.

value="..." : Metin kutusunun kullanıcının karşısına yazılı halde gelmesi için kullanılır.Bu parametre, metin kutusuna yazılı olmasını istediğiniz yazıyıyazmamızı sağlar.

Örnek :     <input type="text" name="isim" value="Buraya adınızı giriniz" size="30">

textarea : Küçük alanlara daha çok yazı yazmayı sağlayan text aracıdır. Metin kutusu, tek satır ve sütundan meydana gelirken, textarea da belirtilen sayıda sütun ve satır kullanlıabilir.

<textarea name="isim" cols="sütun sayısı" rows="satır sayısı" >.....</textarea>

Şifre kutusu:

Eğer type="..." parametresine "password" değerini atanırsa, şifre girilebilen ve girilen yazıları * halinde gösteren bir metin kutusu elde edilir.Şifre kutusunda da metin kutusundaki parametreler kullanılabilir.Örnek:

<input type="password"  name="sifre"  size="12" >

Düğme (Buton) :

Html de düğme oluşturmanın iki yol vardır.Bunlardan birincisi, <input type="button"> etiket ve parametresini kullanmaktır.Önceki parametrelerin çoğu bu form aracı için de geçerlidir.

<input type="button"  name="dugme"  value="Düğme" size="14">

Biçimsel olarak aynı ama işlevsel olarak farklı düğmeler de vardır.Forma yazılan verilerin girilmesini sağlayan düğmeleri type="submit" parametresi ile, forma yazılan verilerin resetlenmesini yani girilmemiş hale dönmesini sağlayan düğmeleri type="reset" parametresi ile oluşturmak mümkündür.

<input type="submit" value="Tamam">

<input type="reset" value="Geri al">

Düğme(buton) oluşturmanın bir diğer yolu da <button>...</button> etiketlerini kullanmaktır.Bu etiketlerin arasına yazılan html etiketleri bir düğme haline dönüşür. Araya konulanlar resim, yazı veya tablo olabilir.

Örnekler:

<button><img src="buton.gif"></button>

<button><font face="verdana" color="red" size="6">
İşlemleri onaylamak için tıklayınız"</button>

<button>
 <table border="1">
  <tr>
   <td>ileri</td><td>Geri</td>
  </tr>
 </table>
</button>

Resimli düğme:

Form araçlarındaki butonlar gri renkte ve kenraları yuvarlanmış dikdörtgen şeklindedir.Fakat tasarımlarımızda kendi tasarladığımız veya başka yerlerden temin ettiğimiz bir resmi düğme gibi kullanmamız mümkündür.Bunun için <input type="image" src="..."> etiket ve parametreleri kullanılır. Buradaki src="..." parametresi resim dosyasının adresinin belirtileceği yerdir.

Örnek:

<input type="image"  name="kendidugmem"  src="../resimler/k_pau.jpg">

Bu etiketi yukarıdaki örnek kodlarda <form>....</form> etiketleri arasına yazarak, nasıl bir etki yarattığını görebilirsiniz.

Radyo Kutusu (Radiobox) ve Kontrol Kutusu (Checkbox) :

Oldukça sık kullanılan diğer form araçları; radyo kutusu ve kontrol kutusudur.Bunlar için type="radio" ve type="checkbox" parametreleri kullanılır. Radyo kutuları kullanıcının şıklar arasında seçim yapmasını sağlamak için, kontrol kutularını ise kullanıcının belirtilen seçeneklerden birden fazla seçebilmesi için kullanılır.

Radyo kutularında dikkat edilmesi gereken bir nokta vardır.Forma eklenecek olan radyo kutularına aynı isim(name) verilmelidir.Aksi halde radyo kutusunun özelliği olan yalnızca bir şeçeneğin seçilebilmesi özelliği kullanılamaz. Kontrol kutularına ise aynı ismin veya farklı isimlerin koyulması birşeyi değiştirmez; çünkü bu kutuların özelliği aynı anda birden fazla kutunun işaretlenebilmesidir.

İsterseniz yukarıdaki uygulama örneğinde radyo kutularına ait isimleri değiştirerek, radyo kutularındaki değişimi gözlemleyebilirsiniz.Eğer radyo kutularına farklı isimler verirseniz, radyo kutularınında, kontrol kutuları gibi seçilebildiğini görürsünüz ki, bu istenmiyen bir durumdur.

Seçenek Kutusu :

En çok kullanılan form araçlarından biri de seçenek kutusudur. Bu form aracı sayesinde kullanıcının gireceği bilgiler sınırlandırılır ve yönlendirilir.Seçenek kutusu oluşturmak için <select>....</select> etiketi arasında her seçeneğin önüne <option> etiketi kullanılır.Option etiketleri arasına yazılanlar seçenekleri oluşturur.<option> etiketi içinde selected yazılırsa, bu seçenek seçili hale gelir.Hiçbir seçeneğe selected yazılmaz ise ilk baştaki seçenek, seçili olarak gelir.

Gizli Alan :

Gizli alan görüntülenmediği için kullanıcı tarafından görülmez.Gizli alan, form ile birlikte gönderilir ve genelde bilgi amaçlı kullanılır.

          <input type="hidden" name="xxxx" value="xxxx">

Dosya Ekleme(Gözat) :

Bilgisayarda var olan dosyalara ulaşmaya sağlayan form araç çubuğudur.

          <input type="file">

Form Araçlarını Gruplamak-Çerçevelemek :

Hazırlanan formları isteğe göre gruplamak ve bu ruplamaları çerçeve içine almak için <fieldset> etiketi kullanılır. <legend> etiketi ise çerçeveye başlık vermek için kullanılır.

Html de kullanılacak form araçları bu kadardır.Sizde anlatılan form araçlarını kullanarak kendinize göre istediğiniz bilgi girişlerini içerecek formlar hazırlayabilirsiniz.