Formlar kullanıcıdan alınan verileri sunucuya gönderilmesini ve gerekli işlemlerin yapılmasını sağlayan eski bir web teknolojisidir. Nasıl ki tabloları oluştururken <table> etiketini kullandık, formları oluştururken ise <form> etiketini kullanacağız.
Formları oluştururken kullanacağımız iki temel etiket <form> ve <input>'tur. <form> etiketi ile formumuzu oluşturuz. input ise girdi anlamına gelmektedir ve kullanıcıdan aldığımız verileri sunucuya göndermek için kullanılır. label dilimizde etiket anlamına gelmektedir ve formdaki başlıkları bu element içine yazabiliriz.
Aşağıdaki örnekte bunu daha rahat anlayabilirsiniz:
<form>
<label>Adınız: </label> <input type="text"/> <br/><br/>
<label>Soyadınız: </label> <input type="text"/> <br/><br/>
<input type="submit" value="Gönder"/>
</form>
Çıktısı ise şu şekilde olacaktır:
Burada bilinmesi gereken önemli nokta type yani tür atfının iyi kullanılmasıdır. Örneğin; type="text" kullanıcıdan elde edilecek metinsel verileri sunucuya göndermek için kullanılır. Yazılımda buna textbox denir. type="submit" ise verinin onaylanıp sunucuya gönderileceği bir düğmedir. value atfı ile bu düğmenin görünen adını yazabilirsiniz.
<fieldset> etiketi form elemanlarını bir araya toplayarak bir kutu çizer. Bu etiketin başlık kısmını ise <legend> etiketi oluşturur.
Aşağıdaki örneği inceleyelim:
<form>
<fieldset>
<legend>Üye Bilgileri</legend>
<label>Adınız - Soyadınız: </label> <input type="text"/> <br/><br/>
<label>e-Posta Adresiniz: </label> <input type="text"/> <br/><br/>
<label>Doğum Tarihiniz: </label> <input type="text"/> <br/><br/>
<input type="button" value="Onayla"/>
</fieldset>
</form>
Çıktısı ise şu şekilde olacaktır:
Bazen adres bilgileri gibi birden fazla satırı ihtiva etmesi gereken metin girdilerine ihtiyacımız olabilir. Bunun için <textarea> etiketini kullanabiliriz.
<form>
<fieldset>
<legend>Mesaj Gönder</legend>
<label>Rumuzunuz: </label> <input type="text"/> <br/><br/>
<label>e-Posta Adresiniz: </label> <input type="text"/> <br/><br/>
<label>Doğum Tarihiniz: </label> <input type="text"/> <br/><br/>
<label>Mesajınız: </label> <textarea rows="2" cols="18"></textarea> <br/><br/>
<input type="submit" value="Onayla"/><br/><br/>
<input type="reset" value="Formu Temizle"/>
</fieldset>
</form>
Çıktımız:
<textarea> etiketi kullanılırken bilinmesi gereken önemli nokta rows ve cols, yani satırlar ve sütunlar atıfları ile metin alanımızın büyüklüğünü belirleyebilmemiz.
Bu örneğe ek olarak belirtmem gerekir ki <input type="submit" /> buton ile formu onaylayıp sunucuya gönderebilir; <input type="reset" /> buton ile ise formun verilerini temizleyebilirsiniz.
select dilimizde seçim anlamına gelmektedir. option ise seçenek anlamındadır. <select> ve <option> etiketlerinin birlikte kullanımı "açılır menü" oluşturmamıza yarar.
<select>
<option>Seçenek 1</option>
<option>Seçenek 2</option>
<option>Seçenek 3</option>
<option>Seçenek 4</option>
<option>Seçenek 5</option>
</select>
Çıktısı ise şu şekildedir:
Bazen seçim menüsünde seçimleri sınıflandırmak isteyebiliriz. Bunun için <optgroup> etiketini kullanmamız yeterlidir.
<select>
<option>Seçiniz</option>
<option>Sayılar</option>
<optgroup>
<option>Seçenek 1</option>
<option>Seçenek 2</option>
<option>Seçenek 3</option>
<option>Seçenek 4</option>
</optgroup>
<option>Harfler</option>
<optgroup>
<option>Seçenek a</option>
<option>Seçenek b</option>
<option>Seçenek c</option>
<option>Seçenek d</option>
</optgroup>
</select>
Çıktısı ise şu şekildedir:
Form etiketlerini bu kadar bilmeniz yeterli. CSS3 ve jQuery kullanmaya başladığımızda daha cafcaflı formlar oluşturacağız.