HTML İletişim Formu Tasarımı

“Bana Ulaş” Demenin En Resmî, En Akıllı ve En Şık Yolu 📬

Bir web sitesine giriyorsun.
Tasarım güzel.
Yazılar okunaklı.
Ama…

👉 İletişim formu yok.

Bu durumda site şuna benzer:

WhatsApp’ı var ama çevrimdışı 📴

İşte bu yüzden iletişim formu:

• Kullanıcıyla ilk temas noktasıdır
• Güven verir
• “Bu site ciddiye alınmış” dedirtir

Ve evet…
Bunun kahramanı HTML <form> etiketi 🦸‍♂️

<form> Etiketi Nedir? (Formun Beyni 🧠)

<form> etiketi, kullanıcıdan bilgi toplayan ana kapsayıcıdır.

Yani:

• İsim
• Mail
• Mesaj
• Seçenekler
• Onay kutuları

Her şey onun içinden geçer.

En temel hali:

<form>
  <!-- Form elemanları burada yaşar -->
</form>

🧠 Altın bilgi:
Tarayıcı sadece <form> içindeki alanları gönderilebilir veri olarak görür.
Dışarıda kalan input = boşa yazılmış yazı ✍️❌

action ve method (Form Nereye Gidiyor? 🚚)

Şimdi işin biraz “arka mutfağına” girelim.

<form action="gonder.php" method="post">

• action → Veriler nereye gidecek?
• method → Nasıl gidecek?

method="get"

• URL’de görünür
• Arama formları için uygun

method="post"

• Gizli gönderir
• İletişim formları için ideal

📌 İletişim formlarında %90 POST kullanılır.

<label> Etiketi: Küçük Ama Efsane ✨

<label> etiketi çoğu beginner tarafından atlanır.
Ama senior’lar onsuz yazmaz.

<label for="name">İsim</label>
<input type="text" id="name">

🧠 Neden bu kadar önemli?

• Erişilebilirlik (screen reader’lar sever ❤️)
• Label’a tıklayınca input aktif olur
• UX + SEO + profesyonellik

📌 Kural:
for değeri = input içindeki id

Bu eşleşme bozulursa formun ruhu bozulur 😄

İsim Alanı (type="text") ✍️

Kullanıcının kendini tanıttığı yer:

<label for="name">İsim</label>
<input 
  type="text"
  id="name"
  name="name"
  placeholder="Adınızı girin"
>

Burada gizli kahraman:

• name attribute’u ✅

🧠 Çok kritik bilgi:
Form gönderildiğinde sunucu name üzerinden veri alır, id üzerinden değil.

E-posta Alanı (type="email") 📧

HTML diyor ki:

“Mail formatını bana bırak.”

<label for="email">E-posta</label>
<input 
  type="email"
  id="email"
  name="email"
  placeholder="ornek@mail.com"
>

Avantajları:

• @ yoksa tarayıcı uyarır
• Mobilde mail klavyesi açılır
• UX + doğrulama bedava 🎁

Mesaj Alanı (<textarea>) 💬

Kullanıcı burada içini döker:

<label for="message">Mesaj</label>
<textarea
  id="message"
  name="message"
  rows="5"
  placeholder="Mesajınızı yazın"
></textarea>

📌 <textarea> kapanış etiketi ister
📌 rows yüksekliği kontrol eder

Zorunlu Alanlar (required) 🚨

“Kullanıcı boş bırakmasın” diyorsan:

<input type="text" required>

Tarayıcı otomatik olarak:

• Boş alanı engeller
• Uyarı verir

🎯 JS yazmadan validation
HTML bazen aşırı yetenekli 😎

Placeholder vs Label (Kafa Karışıklığı 😵)

❌ Yanlış kullanım:

<input placeholder="İsminiz">

(ama label yok)

✅ Doğru kullanım:

<label for="name">İsim</label>
<input id="name" placeholder="Adınızı girin">

📌 Placeholder etiket değildir, sadece ipucudur.

Gönder Butonu (<button type="submit">) 🚀

Formun final boss’u:

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

📌 Asla şunu yapma:

<button>Gönder</button>

Çünkü:

• Varsayılan davranış tarayıcıya kalır
• Netlik yok ❌

Tam Profesyonel İletişim Formu (Hepsi Bir Arada 💎)

<form action="#" method="post">
  
  <label for="name">İsim</label>
  <input type="text" id="name" name="name" required>

  <label for="email">E-posta</label>
  <input type="email" id="email" name="email" required>

  <label for="message">Mesaj</label>
  <textarea id="message" name="message" rows="5" required></textarea>

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

</form>

Bu form:

• HTML standartlarına uygun
• Erişilebilir
• Profesyonel
• Gerçek projede kullanılabilir

Mini CSS ile “Ben Frontend’im” Demek 🎨

form {
  max-width: 500px;
  margin: auto;
  padding: 20px;
}

label {
  display: block;
  margin-top: 15px;
  font-weight: bold;
}

input,
textarea {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
}

button {
  margin-top: 20px;
  padding: 12px;
  cursor: pointer;
}

Artık form:

• Temiz
• Okunaklı
• Sunuma hazır ✨

En Sık Yapılan Hatalar (Form Katilleri 💀)

❌ <label> kullanmamak
❌ name attribute’u unutmak
❌ required kullanmamak
❌ Placeholder’ı label sanmak
❌ Her şeyi <div> ile boğmak

Gerçek Hayat İpuçları 🧠

• Her input = bir label
• email, tel gibi doğru type kullan
• Az alan, net form = daha çok dönüş
• Uzun form = kaçan kullanıcı 🏃‍♂️

Özet: İyi Bir İletişim Formu Şöyle Olur

• <form> → merkez
• <label> → rehber
• <input> → kısa bilgi
• <textarea> → uzun mesaj
• Doğru type + name → profesyonellik

🎯 Son Söz:
İletişim formu küçük bir detay gibi görünür
ama iyi yapılmış bir form,
kullanıcıyla siten arasındaki en güçlü bağdır 🔗