[NODE JS] Express'te Form Verisi Parse Etme

Silverhand · 13 Tem 2026

[NODE JS] Express'te Form Verisi Parse Etme

HTML formları web'in en temel etkileşim aracıdır. Kullanıcı kayıt formu, giriş formu, iletişim formu, arama formu... Hepsi form verisi gönderir. Tarayıcı bir formu gönderdiğinde veriyi application/x-www-form-urlencoded formatında encode eder. Bu format JSON'dan farklı bir yapıdadır ve Express'te ayrı bir middleware ile parse edilmesi gerekir.

express.urlencoded() middleware'i form verilerini parse eder. Tıpkı express.json() gibi app.use() ile eklenir. extended opsiyonu önemlidir: true yaparsanız qs kütüphanesi ile parse edilir ve iç içe objeler desteklenir. false yaparsanız querystring modülü ile parse edilir ve sadece basit key-value çiftleri desteklenir. Ben genellikle extended: true kullanıyorum çünkü daha esnek.

Form verisi ve JSON verisi arasındaki fark sadece Content-Type header'ındadır. Form gönderiminde Content-Type: application/x-www-form-urlencoded olur, JSON'da ise Content-Type: application/json olur. Her iki durumda da veri req.body'de bulunur. Bu yüzden genellikle her iki middleware'i de ekliyorum: app.use(express.json()) ve app.use(express.urlencoded({ extended: true })).

Multipart form data farklı bir konudur ve dosya yükleme için kullanılır. express.urlencoded() multipart verileri parse edemez. Bunun için multer gibi özel bir paket gerekir. Bu konuyu dosya yükleme yazısında detaylıca anlatacağım. Şimdilik normal text form verileriyle ilgileniyoruz.

Form verisi parse ederken de validasyon yapmak zorunludur. Kullanıcılar formu manipüle edebilir, JavaScript ile form aksiyonunu değiştirebilir veya doğrudan HTTP isteği gönderebilir. Bu yüzden sunucu tarafında her zaman validasyon yapın, asla sadece frontend validasyonuna güvenmeyin.

CSRF (Cross-Site Request Forgery) saldırılarına karşı da önlem almanız gerekir. Form tabanlı uygulamalarda CSRF token kullanmak standart bir güvenlik önlemidir. csurf paketi bu işi kolaylaştırır ama artık deprecated oldu. Alternatif olarak csrf-csrf veya lusca paketlerini kullanabilirsiniz ya da SameSite cookie attribute'u ile koruma sağlayabilirsiniz.

Form gönderiminden sonra redirect yapmak önemli bir pratiktir. Buna PRG (Post/Redirect/Get) pattern'i deniyor. Kullanıcı formu gönderip başarılı bir sonuç aldıktan sonra sayfayı yenilerse formun tekrar gönderilmesini engeller. res.redirect() ile kullanıcıyı başka bir sayfaya yönlendirirsiniz.

Checkbox ve select-multiple gibi form elemanları birden fazla değer gönderebilir. Bu durumda extended: true kullandığınızda değerler array olarak gelir. Ama tek bir değer gönderildiğinde string olarak gelir. Bu tutarsızlığı bilmek ve kodunuzu buna göre yazmak önemli.

Gizli form alanları (hidden inputs) da güvenlik açısından dikkat edilmesi gereken bir konu. Kullanıcı tarayıcının geliştirici araçlarından gizli alanların değerlerini değiştirebilir. Bu yüzden gizli alanlarda hassas veri taşımayın ve sunucu tarafında mutlaka doğrulama yapın.

Form verilerinde Türkçe karakter sorunu da yaşanabilir. UTF-8 encoding kullanıldığından emin olun. HTML formunuzda accept-charset="UTF-8" attribute'unu ve sayfanızda meta charset="UTF-8" etiketini eklemeyi unutmayın.

JavaScript:

const express = require('express');
const app = express();

// Form verisi ve JSON icin middleware'ler
app.use(express.urlencoded({{ extended: true, limit: '1mb' }}));
app.use(express.json());

// Basit bir in-memory veritabani
const mesajlar = [];
const kullanicilar = [];
let mesajIdSayaci = 1;

// Ana sayfa - Form iceren HTML
app.get('/', (req, res) => {{
  const basariMesaji = req.query.basari;
  const hataMesaji = req.query.hata;

  res.send(`
    <!DOCTYPE html>
    <html lang="tr">
    <head>
      <meta charset="UTF-8">
      <title>Form Ornekleri</title>
      <style>
        body {{ font-family: Arial, sans-serif; max-width: 800px; margin: 40px auto; padding: 0 20px; }}
        form {{ background: #f5f5f5; padding: 20px; border-radius: 8px; margin-bottom: 30px; }}
        label {{ display: block; margin-top: 10px; font-weight: bold; }}
        input, textarea, select {{ width: 100%; padding: 8px; margin-top: 4px; box-sizing: border-box; }}
        button {{ margin-top: 15px; padding: 10px 24px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; }}
        .basari {{ background: #d4edda; border: 1px solid #c3e6cb; padding: 12px; border-radius: 4px; color: #155724; }}
        .hata {{ background: #f8d7da; border: 1px solid #f5c6cb; padding: 12px; border-radius: 4px; color: #721c24; }}
      </style>
    </head>
    <body>
      <h1>Express Form Ornekleri</h1>
      ${{basariMesaji ? `<div class="basari">${{basariMesaji}}</div>` : ''}}
      ${{hataMesaji ? `<div class="hata">${{hataMesaji}}</div>` : ''}}

      <h2>Kayit Formu</h2>
      <form action="/kayit" method="POST">
        <label>Ad Soyad</label>
        <input type="text" name="adSoyad" required>

        <label>Email</label>
        <input type="email" name="email" required>

        <label>Sifre</label>
        <input type="password" name="sifre" required>

        <label>Sehir</label>
        <select name="sehir">
          <option value="istanbul">Istanbul</option>
          <option value="ankara">Ankara</option>
          <option value="izmir">Izmir</option>
          <option value="bursa">Bursa</option>
        </select>

        <label>Ilgi Alanlari</label>
        <input type="checkbox" name="ilgiAlanlari" value="frontend"> Frontend
        <input type="checkbox" name="ilgiAlanlari" value="backend"> Backend
        <input type="checkbox" name="ilgiAlanlari" value="mobile"> Mobile
        <input type="checkbox" name="ilgiAlanlari" value="devops"> DevOps

        <button type="submit">Kayit Ol</button>
      </form>

      <h2>Iletisim Formu</h2>
      <form action="/iletisim" method="POST">
        <label>Adiniz</label>
        <input type="text" name="ad" required>

        <label>Email</label>
        <input type="email" name="email" required>

        <label>Konu</label>
        <input type="text" name="konu" required>

        <label>Mesajiniz</label>
        <textarea name="mesaj" rows="5" required></textarea>

        <button type="submit">Gonder</button>
      </form>

      <h2>Son Mesajlar</h2>
      <ul>
        ${{mesajlar.map(m => `<li><strong>${{m.ad}}</strong>: ${{m.konu}} - ${{m.mesaj.substring(0, 100)}}</li>`).join('')}}
      </ul>
    </body>
    </html>
  `);
}});

// Kayit formu isleme
app.post('/kayit', (req, res) => {{
  console.log('Form verisi:', req.body);

  const {{ adSoyad, email, sifre, sehir, ilgiAlanlari }} = req.body;

  // Validasyon
  if (!adSoyad || adSoyad.trim().length < 3) {{
    return res.redirect('/?hata=Ad+Soyad+en+az+3+karakter+olmalidir');
  }}
  if (!email || !email.includes('@')) {{
    return res.redirect('/?hata=Gecerli+bir+email+giriniz');
  }}
  if (!sifre || sifre.length < 6) {{
    return res.redirect('/?hata=Sifre+en+az+6+karakter+olmalidir');
  }}

  // Checkbox'lar: tek deger string, birden fazla array gelir
  const ilgiListesi = ilgiAlanlari
    ? (Array.isArray(ilgiAlanlari) ? ilgiAlanlari : [ilgiAlanlari])
    : [];

  const yeniKullanici = {{
    id: kullanicilar.length + 1,
    adSoyad: adSoyad.trim(),
    email: email.trim().toLowerCase(),
    sehir,
    ilgiAlanlari: ilgiListesi,
    kayitTarihi: new Date().toISOString(),
  }};

  kullanicilar.push(yeniKullanici);
  console.log('Yeni kullanici:', yeniKullanici);

  // PRG Pattern - Post/Redirect/Get
  res.redirect('/?basari=Kayit+basarili!+Hosgeldiniz+' + encodeURIComponent(adSoyad));
}});

// Iletisim formu isleme
app.post('/iletisim', (req, res) => {{
  const {{ ad, email, konu, mesaj }} = req.body;

  if (!ad || !email || !konu || !mesaj) {{
    return res.redirect('/?hata=Tum+alanlar+zorunludur');
  }}

  mesajlar.push({{
    id: mesajIdSayaci++,
    ad: ad.trim(),
    email: email.trim(),
    konu: konu.trim(),
    mesaj: mesaj.trim(),
    tarih: new Date().toISOString(),
  }});

  res.redirect('/?basari=Mesajiniz+basariyla+gonderildi');
}});

// API endpoint - kullanicilari JSON olarak getir
app.get('/api/kullanicilar', (req, res) => {{
  res.json(kullanicilar);
}});

app.listen(3000, () => {{
  console.log('Form sunucusu http://localhost:3000 adresinde');
}});

Form verisi parse etme web geliştirmenin temel taşlarından biri. JSON API'ler ne kadar yaygınlaşsa da geleneksel form gönderimi hala çok fazla kullanılıyor. Özellikle server-side rendered uygulamalarda formlar vazgeçilmez. İyi bir Express geliştiricisi her iki yöntemi de bilmeli ve projelerine uygun olanını seçebilmelidir.

Best Studio · Çarşamba saat 16:50'de

Emeğiniz ve katkınız için teşekkür ederiz!
Konunuz gerekli incelemelerden geçerek onaylandı. Topluluğumuza katkılarınızın devamını bekliyoruz.
İyi forumlar!

[NODE JS] Express'te Form Verisi Parse Etme

Silverhand