HTML FORMLARI
Web sayfamızda ziyaretçilerden bilgi almak ve bu bilgileri işlemek gerektiğinde formları kullanırız. Form içerisinde yer alan metin kutusu, onay kutusu, radyo buton gibi elemanlar sayesinde kullanıcı gerekli bilgi girişini gerçekleştirebilir.
Form ve form elemanlarını Html kodları ile oluşturabiliriz fakat forma girilen verilerle işlem yapabilmek için başka dillere ihtiyacımız vardır. Bilgileri istemci tarafında işlemek için Javascript, sunucu tarafında işlemek içinse ASP.NET ve PHP gibi programlama dilleri kullanılmaktadır.
Form Etiketi
Formun başlangıç ve bitişini belirler. Diğer bütün form elemanları bu etiketler arasında yer alır.
<form action=”url-adres” method=”get veya post” target=”pencere” >
….
</form>
Action parametresi forma girilen bilgileri işleyecek kodların yer aldığı dosyanın yolunu belirtir. Örneğin bir php dosyası kullanılarak forma girilen bilgilerle işlem yapılabilir.
Method parametresi forma girilen bilgilerin, ilgili yere hangi yöntemle gönderileceğini belirler. Get veya Post olmak üzere iki değer alabilir. Get değeri kullanıldığında bilgiler o anki adrese eklenerek taşınır ve adres çubuğunda görülebilir. Post değerini kullanmak daha güvenli bir yöntemdir.
input etiketi
metin kutusu (textbox), onay kutusu (checkbox), radyo buton (radiobutton), onay ve reset düğmeleri gibi elemanlar bu etiket ile oluşturulur. Parametreleri şunlardır:
type: Oluşturacağımız elemanın türünü burada belirtilir.
name: Oluşturacağımız nesneye isim veririz. Mutlaka kullanmalı ve her elemana farklı bir isim vermeliyiz. Yalnız radyo butonlarda, aynı gruba dahil olanlara aynı isim verilmektedir.
src: Eğer bir resim dosyası kullanılmışsa görüntülenmesi istenilen resim dosyasının adresini belirtmek için kullanılır.
align: Hizalama-konum belirlemek için kullanılır. (left, right, center).
maxlength: Metin kutuları için kullanılır ve o elemana kaç karakter veri girişine izin verileceğini belirler.
size: Metin kutusunun kaç karakter genişliğinde olacağını belirler
checked: Radiobutton ve checkbox elemanları için kullanılır. Checked=”checked” şeklinde kullanıldığında o elemanın sayfa ilk açıldığında işaretli olarak gelmesini sağlar.
disabled: disabled=”disabled” şeklinde kullanıldığında o elemanı devre dışı hale getirir. Eleman sayfada görünür fakat seçilemez ve değiştirilemez.
Metin kutusu (textbox) oluşturma
<input type=”text” name=”tcNo” maxlength=”11” size=”11” />
Parola (Password) alanı oluşturma
<input type=”password” name=”parola” />
Onay kutusu (checkbox) oluşturma
Onay kutuları, kullanıcının listelenen seçeneklerden istediği kadarını seçmesine izin verir. Birden fazla seçim yapılabileceği gibi, hiç seçim yapılmadan da bırakılabilir.
<input type=”checkbox” name=”hobiFutbol” />Futbol <br/>
<input type=”checkbox” name=”hobiBasketbol” />Basketbol<br/>
<input type=”checkbox” name=”hobiVoleybol” />Voleybol<br/>
Radyo düğmeleri (radiobutton) oluşturma
Radiobutton elemanları, kullanıcının aynı gruba dahil olan elemanlardan sadece bir tanesini seçmesine izin verir. Bunun için aynı gruptaki radyo düğmelerinin hepsine aynı isim (name parametresi ile) verilir.
<input type=”radio” name=”cinsiyet” value=”E” />Bay <br/>
<input type=”radio” name=”cinsiyet” value=”K” />Bay <br/>
Açılır liste ve liste oluşturma
Açılır menüler, tıklandığında alta doğru açılan ve bir seçim yapılmasını sağlayan elemanlardır. Liste elemanları ise açılır menülerin her zaman açık olan ve izin verildiğinde çoklu seçim yapılabilen halidir.
Size parametresi kullanılmazsa açılır menü yapılmış olur. Size parametresi kullanıldığı taktirde, bu parametrede belirtilen satır kadar yükseklikte bir liste elemanı oluşturulur.
Select parametresi listenin başlangıç ve bitişini belirler. Listede görüntülenecek seçeneklerin her biri ayrı ayrı option etiketleri arasına yazılır.
Listeler için multiple=”multiple” ifadesi kullanılarak çoklu seçim yapılmasına izin verilebilir.
<select name="iller" >
<option>Çanakkale</option>
<option>Ankara</option>
<option>İstanbul</option>
<option>İzmir</option>
</select>
Yukarıda size parametresi kullanılmayarak açılır menü oluşturulmuştur.
<select name="markalar" multiple="multiple" size="5">
<option>Honda</option>
<option>Ford</option>
<option>Renault</option>
<option>Mercedes</option>
</select>
Bu örnekte ise size parametresi kullanılarak 5 satır yüksekliğinde bir liste oluşturulmuş ve çoklu seçime izin verilmiştir.
Onay ve reset butonu oluşturma
Onay (submit) butonuna tıklandığında forma girilen bilgiler işlenmek üzere ilgili dosyaya gönderilir. Reset düğmesi ise tıklandığında forma girilen verileri temizler. Type parametresi ile düğmenin türü belirtilir.
<input type=”submit” value=”Gönder” />
<input type=”reset” value=”Formu Temizle” />
html form örnekleri, html form oluşturma, maxlength ne işe yarar, html metin kutusu, html radyo radio buton oluşturma
KONU İLE İLGİLİ ÖRNEKLER
Form nesnelerini düzgün yerleştirebilmek için tablo kullanmak faydalı olacaktır.
Kendin Dene butonuna tıklayarak kodları değiştirebilir ve sonucu görebilirsin.
21995 kez okundu.