Yazılım Yazarı Menu

Permalink:

HTML Form ve Form Elementleri

Bir önceki yazımızda bahsettiğimiz gibi html form ve form elementlerini bu yazımda işleyeceğiz.

Kısaca hatırlayacak olursak;

Bir html tagı “<” ile açılır ve “/>” ile kapatılır. HTML kullanacağımız bir sayfaya “<html>” tagıyla başlanır ve “</html>” tagıyla bitirilir.

demiştik. Formların yapısında ise aynı şekilde “<form>” ile başlar ve “</form>” ile bitiririz..

Burada form tagını direk olarak kullanamayız, form tagımızın yanına bazı parametreler getirmek zorundayız. Bu parametreler şunlardır;

  • action=”index.php” : Bu parametre formun doldurulup yollandığı zaman formda girilen bilgilerin nereye, hangi sayfaya veya adrese gönderileceğini belirler. Eğer action’ı boş bırakırsanız verileri aynı sayfaya gönderecektir.
  • method=”post” veya method=”get” : Formun en önemli ve mutlaka olması gereken parametresidir. Siz bir formu doldurup, gönder butonuna bastığınız zaman veriler farkında olmasanızda iki türlü gider.
  1. “Get”verileri url üzerinden gönderir, örneğin mail diye bir alandan kullanıcının mailini istiyoruz, kullanıcı mailini girip göndere bastığı zaman mail alanına girdiği veri url üzerinden gönderilir.
    Örn: http://siteadi.com/index.php?mail=mail%40hotmail.com

    Get metodu önemsiz verilerde kullanılmalıdır, kullanıcı adı ve şifre gibi bilgilerin bu metodla formdan aktarılması uygun değildir.

  2. “Post” verileri arka planda gönderir, kullanıcı mail adresini girip gönder butonuna bastığı zaman veriler kullanıcıya gözükmeyecek şekilde sayfaya gönderilir.

Yukarıdaki bilgilere dayanarak üç örnek form tagı açalım:

<form action="orneksayfa.php" method="post">
</form>

Bu tarz bir kullanımda formdaki veri orneksayfa.php ye post methoduyla yani kullanıcıya gösterilmeden gidecektir.

<form action="orneksayfa.php" method="get">
</form>

Bu tarz bir kullanımda ise formdaki veri orneksayfa.php’ye get metoduyla adres (url) üzerinden gönderilecektir.

<form action="" method="post">
</form>

Bu tarz bir kullanımda veri, action boş olduğu için bulunduğu sayfaya gider, post metoduyla gönderilecektir.

Form taglarının nasıl açılıp kapandığını ve gereken parametrelerini öğrendik şimdi sıra bir formu form yapan form elementlerinde şimdiki aşamada bunları inceleyeceğiz.

  • input : Form yapısı oluştururken en sık kullandığımız türdür. Bir çok form elementini bu tag ile çağırmak mümkün.
  • select : Seçmeli menüler için kullanılır.

Bir form bu iki tagdan oluşur bizi şuan ilgilendiren kısım input tagı bunun üzerine duracağız.İnput tagları da form tagı gibi parametreler içerir.

Bu parametreler:

  • name = “alanadi” : Alanın ismidir form gönderildiği zaman burada atanan ada göre veriler çağırılır, örneğin get ile gönderilen bir formda, name’i mail olan bir input düşünün bu durumda girilen veri adrese buradaki name ile yansıyacaktır.
http://yazilimyazar.com/index.php?mail=veri
  • type = “tur” :Alanın, ne alanı olduğunu, türünün ne olduğunu belirtir. Bir input birkaç türe sahiptir.
    • Yazı alanı ( text ) : Textbox diye tabir edilen yazı girilen kutuları oluşturmamızı sağlar.
    • Parola alanı ( password ) : Parolalar ve özel veriler için özel bir alandır kullanıcının girdiği verileri ●●●● şeklinde gizler.
    • Çoklu Seçmeli Kutu alanı ( checkbox ) : Kare kutu şeklinde alanlar oluşturmaya yarar, kullanıcı bu alanlardan bir veya daha fazla seçeneceğini seçebilir.
    • Tek seçmeli yuvarlak alan ( radiobutton ) : Kare kutuya benzer seçme alanıdır aralarındaki fark; radiobutton yuvarlaktır ve kullanıcı aynı tek bir seçeneği seçebilir. Anket tarzı sistemlerde yada tek cevabı olan sorularda bu tür kullanılır.
    • Buton alanı ( button ) : Her forumda olması gereken formu göndermeye yarayan butonları oluşturmamızı sağlayan türdür. Buton olmadan form gönderilemez, form gönderilmediği sürece bir işimize yaramaz, yani buton türü formlarımızın olmazsa olmazlarındandır.
  • value = “deger” : Alanın varsayılan değerini atamamızı sağlar.

Aldığımız bu bilgilere dayanarak örnek birkaç kod yazalım.

<form action="orneksayfa.php" method="get">
Kullanıcı Adı: <input type="text" name="kullaniciadi" />
Parola: <input type="password" name="sifre" />
<input type="submit" value="Giriş yap" />
</form>

Bu kodun çıktısı şu şekilde olur:

HTML Form ve Form Elementleri Örnek Kod Çıktısı - 1

Bu formda kullanıcı adı kısmına admin ve parola kısmına 1234 yazarak, “Giriş yap” a bastığımızı düşünürsek verilerimiz “get” ile yollanacaktır. Yani adres çubuğu üzerinden ve karşımıza şöyle bir adres çubuğu çıkacaktır;

http://yazilimyazari.com/orneksayfa.php?kullaniciadi=admin&sifre=1234

Programlamada bu bilgileri url den alıp giriş yapabiliriz. Bu noktada html ile programlama dillerini birbirinden ayıran mantığı da yine burada görüyorsunuz. Verileri html ile iletebiliyoruz ama işleyemiyoruz. Aynı kodu post metoduyla gönderseydik verimiz aynı şekilde gidecekti sadece adres üzerinden değil arkaplanda gidecekti.

<form action="orneksayfa.php" method="post">
Adınız/Soyadınız: <input type="text" name="adsoyad" /><br>
Mail Adresiniz: <input type="text" name="mail" /><br><br>
Aşağıdakilerden hangilerini seviyorsunuz? <br>
<input type="checkbox" name="sevdigi" value="Müzik dinlemek" /> Müzik dinlemek
<input type="checkbox" name="sevdigi" value="Spor Yapmak" /> Spor yapmak
<input type="checkbox" name="sevdigi" value="Kitap okumak" /> Kitap okumak
<input type="checkbox" name="sevdigi" value="Tv izlemek"> Tv izlemek <br><br>
Sitemizi beğendiniz mi? <br>
<input type="radio" name="begeni" value="Beğendim" /> Beğendim
<input type="radio" name="begeni" value="Kararsızım" /> Kararsızım
<input type="radio" name="begeni" value="Beğenmedim" /> Beğenmedim <br>
<input type="submit" value="Gönder" />
</form>

Bu kodun ekran çıktısı şu şekilde olur:

 

Böylelikle bilmemiz gereken html form oluşturmayı öğrenmiş olduk. Bundan sonraki konumuzda birkaç daha düzenli form oluşturma tekniğinden kısaca bahsettikten sonra programlama örneklerine geçeceğiz.

Yorumlarınızı esirgemeyiniz :)

İyi günler, Yazılım Yazarı

(2144) kez okundu.

      • WhiteBeard

        Admin, Çok Sade,Kaliteli ve Yeni Başlayanların Anlayabileceği Düzeyde Bir Anlatımınız Var.Sayfanızı Çok Beğendim ve Paylaşımlarınızında Devamını Bekliyorum..

      • asteo

        Emeğinize Sağlık:)

      • Yorum bırakıyor olduğunuz için teşekkürler.