HTML Form Elemanları

Web sitelerimizde formları kullanıcı bilgilerini almak için kullanırız.
Sitemize kayıt olmak, yorum yapmak veya bize mesaj göndermek isteyen kullanıcılar için formlar oluştururuz ve buradan aldığımız bilgileri de sitelerimizin veri tabanına kaydederiz.
Şimdi form etiketini tanıyalım:

<form> – Kullanıcı arayüzünde görünecek olan text, checkbox, radio button gibi elemanlar <form> etiketi içerisine yazılır.

<input> en önemli form elemanıdır.
<input> öğesine type özelliğiyle çeşitli türler verilir; bu türler az önce bahsettiğim checkbox, text gibi türlerdir.

İşte size bu türlerin kullanımından birkaç örnek:

Metin Kutucuğu (Text)

<input type="text"> tek satırlık kısa metinler için kullanılır; örneğin ad, soyad, kimlik no, seri no vb.

Kullanımı ise şu şekildedir:

<form>
  Ad:<br>
  <input type="text" name="isim"><br>
  Soyad:<br>
  <input type="text" name="soyisim">
</form>

Radio Düğmesi (Radio)

<input type="radio"> – Bir formda birden fazla seçenek varsa ve bunlardan yalnızca birinin seçilmesini istiyorsak (cinsiyet, müzik tarzı, sevdiğiniz spor gibi) radio button kullanılır. Aynı name değerini taşıyan radio düğmelerinden yalnız biri seçilebilir.

Peki nasıl kullanılır, hemen bakalım:

<form>
  <input type="radio" name="cinsiyet" value="erkek" checked> Erkek<br>
  <input type="radio" name="cinsiyet" value="kadin"> Kadın<br>
  <input type="radio" name="cinsiyet" value="diger"> Diğer
</form>

Gönder Düğmesi (Submit)

<input type="submit"> öğesinin formlardaki genel kullanım amacı gönder düğmesidir.

Kullanımını bir örnekle görelim:

<form action="kullanici.php">
  Ad:<br>
  <input type="text" name="ad" value="Mustafa Kemal"><br>
  Soyad:<br>
  <input type="text" name="soyad" value="Atatürk"><br><br>
  <input type="submit" value="Gönder">
</form>

Form action nedir, nasıl kullanılır?

Dersimizin başında da belirttiğim gibi, web tasarım çalışmalarımızda formlara bilgi giren kişilerin bilgilerini alıp veri tabanlarımıza kaydederiz.
Bu işlemi gerçekleştirmek ne yazık ki sadece HTML ve CSS ile mümkün olmuyor; bunun için PHP gibi bir sunucu tarafı dil bilgisi de gerekiyor.

Şimdilik o konulara girip aklımızı karıştırmaya hiç gerek yok; ben sadece form verilerinin hangi dosyaya gönderileceğini belirleyen kodu göstereceğim.

<form action="kullanici.php">

Bu örnekteki gibi action özelliğiyle form gönderildiğinde verilerin hangi dosyaya gideceğini belirleriz; o dosya da bilgileri veri tabanımıza kaydeder.

Şimdi öğrendiğimiz tüm etiketleri kullanarak bir form oluşturalım ve dersimizi bitirelim.

<!DOCTYPE html>
<html>
<body>

<h2>İletişim formu</h2>

<form action="iletisim.php" method="post">
Ad:<br>
<input type="text" name="ad"><br>
E-posta:<br>
<input type="email" name="eposta"><br>
Mesaj:<br>
<input type="text" name="mesaj" size="50"><br><br>
<input type="submit" value="Gönder">
<input type="reset" value="Temizle">
</form>

</body>
</html>

Bu dersimizde HTML’de form elemanlarını işledik. Bir sonraki derste görüşmek üzere.