HTML’de Form Kullanımı

Formları site ziyaretçileri veya kullanıcılarından bilgi alma ve bunları işleme amaçlı kullanırız. Form ile düz metin, şifre ve seçim kutuları gibi nesneler oluşturarak, istediğimiz türde bilgiyi alırız.

Bir form alanı <form> ile başlar ve</form> ile biter. Bu konu varolma bakımından tek başına işlenemez. Ben PHP kullandığım için bazı PHP öğelerini de bu konunun içinde göreceksiniz. Formları HTML ile işleyemeyeceğimiz için PHP gibi Server-Side bir dil kullanmamız gerekir. Şimdi tek tek form nesnelerini tanıyalım.

Form Giriş (input)

Şimdi en çok kullanılan form etiketi <input> u tanıyacağız.

Metin / Yazı Alanları

Bunu güzel bir örnekle öğrenelim;

 <form name="form" action="index.php" method="post">
      <b>Kullanıcı Adı:</b><br />
      <input type="text" name="kullaniciisim" size="30"><br />
      <b>Şifre:</b><br />
      <input type="password" name="kullanicisifre" size="30"><br />
      <input type="submit" name="gonder" value="Gönder"><br />
   </form>

Bu örnekle çoğu şeyi öğreniyoruz.

  • form name=”form” – Form için belirlediğiniz isimdir. Türkçe karakter kullanmamaya özen gösterin.
  • action=”index.php” – Formdan alınan bilgilerin nerede işlem göreceğini belirtir.
  • method=”post” – Formun hangi yöntemle gönderileceği yazmaktadır. PHP gibi dillerde POST ve GET bulunmaktadır. POST olursa bilgiler görünmez, GET olursa form nesnelerine göre dinamik şekilde adreste görünür.
  • type=”tür” – İnput’un türünü belirtir. Örnekte text ile düz metin, password ile şifre kutusu, submit ile formu gönderme butonu olduğunu belirttik.
  • size=”boyut” – Form nesnesinin uzunluğunu belirtir. Sadece text ve password type’ında kullanılır.
  • input name=”kullaniciisim” – Forma isim verdiğimiz gibi nesnelere de isim vermeliyiz. Türkçe karakter kullanmamaya özen gösterin. Yoksa form öğelerinizde sorun oluşabilir. Bilgileri gönderdiğimiz dosyadan veriyi alırken buradaki ismi kullanırız.
  • value=”deger” – Metin kutusunda veya butonda yazacak yazıyı buradan belirleriz.

TextArea Kullanımı

Bazı durumlarda kullanıcıdan uzun bir bilgi almamız gerekebilir. Bunun için <textarea>…</textarea> kodunu kullanırız.

   <form name="form" action="index.php" method="post">
      <b>Açıklamanızı Yazın:</b><br />
      <textarea cols="50" rows="5">Açıklama Kutusu</textarea>
   </form>

Burada cols=”sutun sayısı” Sütun sayısını; rows=”satır sayısı” Satır sayısını belirtir.

Seçenek Butonu (Radio Buttons)

Form’a gelen kullanıcının bir çok seçenek içinden bir tanesini seçmesini istediğimiz durumlarda radio butonları kullanılır.

   <form name="form" action="index.php" method="post">
      <input type="radio" name="cinsiyet" value="erkek"> Erkek <br />
      <input type="radio" name="cinsiyet" value="kiz"> Kız <br />
   </form>

Kontrol Kutuları (Checkboxes)

Form’a gelen kullanıcının sunulan seçenekler içerisinden istediği kadarını seçmesini sağlamak için kullanılır. Örneğin kullanıcının ilgilendiği yazı kategorilerini böylece seçtirebiliriz.

   <form name="form" action="index.php" method="post">
      <input type="checkbox" name="teknoloji_ekle" value="teknoloji"> Teknoloji<br />
      <input type="checkbox" name="internet_ekle" value="internet"> Internet<br />
      <input type="checkbox" name="html_ekle" value="html"> HTML<br />
      <input type="checkbox" name="mobil_ekle" value="mobil"> Mobil<br />
   </form>

Açılır Seçim Kutusu

Form’a seçim kutusu eklemenin bir yolu da <select> kodudur. Kullanımını bir örnekle görelim;

   <form name="form" action="index.php" method="post">
      <select name="kategori">
         <option value="">Kategori Seç</option>
         <option value="teknoloji">Teknoloji</option>
         <option value="internet">İnternet</option>
         <option value="mobil">Mobil</option>
         <option value="yazilim">Yazılım</option>
      </select>
   </form>

Bu Örnekte value=”” ile belirtilen değer form için bilgi, option kodları arasına yazdığımız Kategoriler ise seçim kutusunda kullanıcıya görünen kısımdır. Seçim Kutumuzun ismini select komutunun içinde name=”kategori” şeklinde belirleriz.

DAHA FAZLA İÇERİK

Nexus Root Toolkit ile Kolay Root Nexus Root Toolkit ile Kolay Root

2 Aralık 2014, Salı

SİZDE YORUM YAPIN

Samsung Galaxy Note 5 geliyor

Samsung Galaxy Note 5 geliyor 1 Ağustos 2015, Cumartesi

Cep Telefonlarının Patlama Sebepleri

Cep Telefonlarının Patlama Sebepleri 20 Aralık 2014, Cumartesi

Android Öğreniyorum Android Dersleri

Android Öğreniyorum Android Dersleri 5 Mayıs 2016, Perşembe