HTML ile Form Elementleri

Merhaba sevgili Webkolog okurları,

Bugün sizlere web sitenizi daha interaktif hale getirmenin ve ziyaretçilerinizden bilgi toplamanın en temel yolu olan HTML formlarını anlatacağım. Düşünün ki bir anket yapmak, bir sipariş almak ya da ziyaretçilerinizin yorumlarını toplamak istiyorsunuz. İşte tam da bu noktada HTML formları devreye giriyor! HTML 4.01 ile oluşturacağımız formlar sayesinde, kullanıcılarınızla etkileşim kurmak artık çok daha kolay.

<form> Etiketi: Her Şeyin Başlangıcı

Bir form oluşturmaya başlamadan önce, tüm form elementlerimizi sarmalayacak olan <form> etiketini kullanmalıyız. Bu etiket, formun nasıl davranacağını belirleyen önemli özelliklere sahiptir.

<form action="islem_sayfasi.php" method="POST" id="iletisim_formu">
  <!-- Form elementleri buraya gelecek -->
</form>

• action: Form gönderildiğinde verilerin nereye gönderileceğini belirler. Genellikle bu, sunucu tarafında verileri işleyecek bir PHP, ASP veya JSP dosyasıdır.
• method: Form verilerinin nasıl gönderileceğini belirtir. En yaygın kullanılan iki değer GET ve POST'tur. GET, verileri URL'de gösterirken, POST verileri daha güvenli bir şekilde gizli olarak gönderir. Özellikle hassas bilgiler (şifreler gibi) için POST tercih edilmelidir.
• id: Forma benzersiz bir kimlik verir. JavaScript ile forma erişmek istediğimizde bu kimliği kullanırız.

<input> Etiketi: Temel Giriş Alanları

<input> etiketi, formların olmazsa olmazıdır ve farklı türde veri giriş alanları oluşturmak için kullanılır. İşte en sık kullanılan type değerleri:

• text (Metin Kutusu): Tek satırlık metin girişi için kullanılır.

<input type="text" name="kullanici_adi" size="30" maxlength="50">

name özelliği, gönderilen veriye bir isim verir. size kaç karakterin görüneceğini, maxlength ise kaç karaktere kadar yazılabileceğini belirler.

• password (Şifre Kutusu): Girilen karakterleri yıldız veya noktalarla gizler.

<input type="password" name="sifre">

• file (Dosya Yükleme): Kullanıcıların bilgisayarlarından dosya seçmelerini sağlar.

<input type="file" name="yuklenecek_dosya">

• hidden (Gizli Alan): Kullanıcının görmediği, ancak formla birlikte gönderilen gizli veriler için kullanılır.

<input type="hidden" name="sayfa_id" value="123">

• checkbox (Onay Kutusu): Birden fazla seçeneğin seçilmesine olanak tanır.

<input type="checkbox" name="hobi" value="spor"> Spor
<input type="checkbox" name="hobi" value="kitap" checked> Kitap Okuma

checked özelliği, varsayılan olarak seçili gelmesini sağlar.

• radio (Seçenek Düğmesi): Bir gruptan yalnızca bir seçeneğin seçilmesine olanak tanır. Aynı name özelliğine sahip tüm radyo düğmeleri bir grup oluşturur.

<input type="radio" name="cinsiyet" value="erkek"> Erkek
<input type="radio" name="cinsiyet" value="kadin" checked> Kadın

• button (Genel Düğme): JavaScript ile belirli bir eylemi tetiklemek için kullanılır.

<input type="button" name="mesaj_goster" value="Mesaj Göster" onclick="alert('Merhaba!');">

• submit (Gönderme Düğmesi): Formu gönderir.

<input type="submit" name="form_gonder" value="Gönder">

• reset (Sıfırlama Düğmesi): Formdaki tüm alanları varsayılan değerlerine sıfırlar.

<input type="reset" name="form_sifirla" value="Temizle">

• image (Resimli Gönderme Düğmesi): Bir resim kullanarak formu göndermenizi sağlar. Tıklandığında resmin tıklandığı koordinatları da gönderir.

<input type="image" src="gonder_butonu.gif" name="gonder_resim" alt="Formu Gönder">

<textarea> Etiketi: Çok Satırlı Metin Girişi

Uzun yorumlar veya açıklamalar almak istediğinizde <textarea> etiketini kullanırız.

<textarea name="yorum" rows="5" cols="40">Yorumunuzu buraya yazın...</textarea>

• rows: Metin alanının yüksekliğini (satır sayısını) belirler.
• cols: Metin alanının genişliğini (karakter sayısını) belirler.
• Etiketler arasına yazılan metin, başlangıçta kutunun içinde görünen varsayılan metindir.

<select> ve <option> Etiketleri: Açılır Listeler

Kullanıcıların önceden tanımlanmış bir listeden seçim yapmasını sağlamak için <select> ve <option> etiketlerini kullanırız.

<select name="favori_dil">
  <optgroup label="Frontend Diller">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js" selected>JavaScript</option>
  </optgroup>
  <optgroup label="Backend Diller">
    <option value="php">PHP</option>
    <option value="asp">ASP</option>
  </optgroup>
</select>

• <select>: Açılır listenin kendisidir. name özelliği zorunludur.
• <option>: Listede yer alan her bir seçenektir. value özelliği, form gönderildiğinde bu seçeneğin değerini belirler. selected özelliği, varsayılan olarak seçili gelmesini sağlar.
• <optgroup>: Seçenekleri mantıksal gruplara ayırmak için kullanılır. label özelliği grubun başlığını gösterir.

<label> Etiketi: Giriş Alanlarını Etiketleme

Form elemanlarını etiketlemek, hem kullanıcı deneyimi hem de erişilebilirlik açısından çok önemlidir. <label> etiketi ile bir giriş alanını açıkça ilişkilendirebiliriz.

<label for="kullanici_adi_kutusu">Kullanıcı Adınız:</label>
<input type="text" id="kullanici_adi_kutusu" name="kullanici_adi">

Burada <label> etiketinin for özelliği, ilişkilendirdiği <input> etiketinin id özelliği ile aynı olmalıdır. Bu sayede, etikete tıklandığında ilgili giriş alanı odaklanır.

<fieldset> ve <legend> Etiketleri: Formu Gruplama

Uzun ve karmaşık formları daha düzenli hale getirmek için <fieldset> ve <legend> etiketlerini kullanabiliriz.

<fieldset>
  <legend>Kişisel Bilgiler</legend>
  <label for="ad">Adınız:</label>
  <input type="text" id="ad" name="ad"><br>
  <label for="soyad">Soyadınız:</label>
  <input type="text" id="soyad" name="soyad">
</fieldset>

<fieldset> etiketi, ilgili form elemanlarını görsel olarak gruplar. <legend> etiketi ise bu grubun başlığını belirler.

HTML 4.01 ile form oluşturmak, web sitenizi dinamik ve interaktif hale getirmenin ilk adımıdır. Bu etiketleri doğru kullanarak, ziyaretçilerinizden istediğiniz bilgileri kolayca toplayabilir ve onlarla daha güçlü bir bağ kurabilirsiniz. Unutmayın, iyi tasarlanmış bir form, kullanıcı deneyimini doğrudan etkiler!

Webkolog'u takipte kalın!

Hepinize bol kodlu ve keyifli öğrenme süreçleri dilerim!