HTML Formlar: Kullanıcıdan Veri Almanın Temel Yolu

Web sitelerinin yalnızca bilgi sunan statik yapılar olmaktan çıkıp, kullanıcılarla etkileşim kurabilen dinamik platformlara dönüşmesinde en önemli unsurlardan biri HTML formlardır. Formlar sayesinde ziyaretçilerden geri bildirim alınabilir, kayıt formları oluşturulabilir, arama kutuları eklenebilir veya alışveriş sitelerinde ödeme bilgileri toplanabilir.

Bu yazıda HTML formların temellerini, kullanılan etiketleri, en yaygın örnekleri ve doğru form tasarımı için dikkat edilmesi gereken noktaları inceleyeceğiz.

Form Nedir?

Form, kullanıcıların tarayıcı üzerinden veri girmesini ve bu verilerin bir sunucuya gönderilmesini sağlayan HTML bileşenidir.

<form action="/veri-gonder" method="post">
  <!-- Form elemanları buraya gelecek -->
</form>

• action → Formun gönderileceği hedef URL.
• method → Verinin gönderim yöntemi (GET veya POST).

Form Elemanları

1. Text Input (Yazı Alanı)

<input type="text" name="ad" placeholder="Adınızı girin">

2. Password Input (Şifre Alanı)

<input type="password" name="sifre" placeholder="Şifrenizi girin">

3. Radio Button (Seçim Düğmesi)

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

4. Checkbox (Onay Kutusu)

<input type="checkbox" name="hobi" value="spor"> Spor  
<input type="checkbox" name="hobi" value="muzik"> Müzik

5. Select (Açılır Menü)

<select name="sehir">
  <option value="istanbul">İstanbul</option>
  <option value="ankara">Ankara</option>
  <option value="izmir">İzmir</option>
</select>

6. Textarea (Metin Kutusu)

<textarea name="mesaj" rows="5" cols="30"></textarea>

7. Buton (Gönderme Tuşu)

<button type="submit">Gönder</button>

Örnek: Basit Kayıt Formu

<form action="/kayit" method="post">
  <label>Ad Soyad:</label><br>
  <input type="text" name="adsoyad"><br><br>

  <label>E-Posta:</label><br>
  <input type="email" name="email"><br><br>

  <label>Şifre:</label><br>
  <input type="password" name="sifre"><br><br>

  <label>Şehir:</label><br>
  <select name="sehir">
    <option value="istanbul">İstanbul</option>
    <option value="ankara">Ankara</option>
    <option value="izmir">İzmir</option>
  </select><br><br>

  <button type="submit">Kayıt Ol</button>
</form>

Form Kullanırken Dikkat Edilmesi Gerekenler

• Zorunlu Alanlar: Kullanıcının doldurması gereken alanlara required ekleyin.
• Veri Doğrulama: Email, sayı gibi alanlarda doğru formatı kontrol edin.
• Güvenlik: Form verilerini işlerken XSS ve SQL Injection saldırılarına karşı önlem alın.
• Kullanıcı Deneyimi: Basit ve anlaşılır formlar her zaman daha çok doldurulur.

Sonuç

HTML formlar, kullanıcılarla etkileşimin temel yapı taşlarından biridir. İyi tasarlanmış bir form; kullanıcı deneyimini artırır, güvenliği sağlar ve sitenizin profesyonel görünmesine katkıda bulunur.

Bir sonraki yazımızda, HTML formların CSS ile nasıl daha şık hale getirilebileceğini ve JavaScript ile nasıl doğrulama eklenebileceğini inceleyeceğiz. 🚀