Formlar site ziyaretçilerin veya kullanıcıların bilgi alma amaçlı kullandıkları alanlar diyebiliriz. Bu alanlar

<form>

ile başlar

</form>

etiketi ile biter. Bu iki etiket arasında kişilerden metinler, şifreler, eposta adresini almak içi kullanırız diyebilirim. Böylece form elemanları ile kullanıcılardan bilgileri alırız. Form elemanları ihtiyaca göre değişkenlik gösterebilir. Bunlar: metin alanları, açılır kapanır menü, kontrol kutucukları, seçim gibi.

Metin alanları ve Gönderme

<!DOCTYPE html>
<html>
<head>
 <title>linkler</title>
 <meta charset="utf-8">
</head>
<body>
<form name="form" action="index.html" method="post">
 <b>Kullanıcı Adı:</b><br />
 <input type="text" name="ad" size="24"><br /><br />
 <b>Şifre:</b><br />
 <input type="password" name="sifre" size="24"><br /><br />
 <input type="submit" name="gonder" value="Gönder"><br /><br />
 </form>
</body>
</html>

Çıktısı

Kodlarını ele alalım. Şekildeki gibi kullanıcı giriş ekranı hemen hemen her yerde karşımıza çıkmıştır. Bunun için kullanıcıdan bilgi almak amacıyla kontrolümüz input olmalıdır. Daha sonra type özelliği ile kontrolümüze çeşitli özellikler ekleyebiliriz. Eğer kullanıcı şifresini girecekse tabi ki bunun özelliği hiç kimse tarafından yazılırken görünmemesidir. Bu yüzden type kısmı input alanlarında kullanıldığı yere göre değişmektedir. Şimdi kodumuzda yer alan kod parçalarını özetleyelim.

name=”isim” – Formumuz için bir isim belirleriz ve formumuza erişim böylece kolay olur.

action=”gideceği yer” – Formumuzdan alınan bilgiler nereye kaydedilecekse o dosyanın adı yazılır.

method=”post” – bu komut ile formdan alınan bilgilerin hangi method ile teslim edileceğini belirtir. Post olursa bilgiler görünmez, get olursa bilgiler görünür.

type=”tür” – Nesnemizin türünü type özelliği ile belirleriz. Text ise düz metin, password ise şifre submit ise gönderme butonu olarak belirleriz.

size=”boyut” – Nesnenin boyutunu verir. Bu text veya password için geçerlidir.

value=”deger” – Metin kutusunda ya da butonda yazacak yazıyı buradan belirleriz.

<form name="form" action="index.html" method="post">
      <b>Yorumunuzu Yazın:</b><br />
      <textarea cols="40" rows="5">bir şeyler yazınız..</textarea><br /><br />
   </form>

Çıktısı

Buradaki textarea değerimiz metin alanını oluşturuyorken cols ve rows değerleri bu kontrolümüzün büyüklüğünü ayarlıyor. Cols değeri sütün sayısını rows değeri satır sayısını ayarlamaktadır.

Seçim alanları

Seçim alanları yıne input kontrolümüz ile gerçekleşir. Bu kontrolün type özelliği ile radiobuton veya checkbox olmasını sağlayabiliriz. Radiobuton tek seçim yapılmasını sağlıyorken birden fazla seçimi yapmamıza checkbox buton devreye giriyor.

<input type="radio" name="cinsiyet" value="erkek">Bayan<br />
<input type="radio" name="cinsiyet" value="kiz">Erkek<br />
<b>İlgi alanlarınız:</b><br />
<input type="checkbox" name="secim1" value="araba">Araba<br />
<input type="checkbox" name="secim2" value="ev">Teknoloji<br />
<input type="checkbox" name="secim3" value="araba">Gazete<br />
<input type="checkbox" name="secim4" value="ev">Magazin<br />

Çıktısı

Açılır seçim menüsü

Bazen açılır kapanır menü yapmanız gerekebilir. Kullanıcının bu seçimler dışında başka bir seçim yapmasına olanak tanımazsınız. Bu yüzden sizin tek ihtiyacınız açılır menü seçim menüsü yapmak olacaktır.

<select name="Ankara">
         <option value="ilceler">Çankaya</option>
         <option value="ilceler">Etlik</option>
         <option value="ilceler">Eryaman</option>
         <option value="ilceler">Keçiören</option>
         <option value="ilceler">Mamak</option>
      </select>

Çıktısı

Written by Sümeyra Akbıyık
hakkımdaki her şeyi bu blogda bulabilirsin. Haydi sende bir göz gezdirmeye ne dersin?

Leave a Comment