CodeBlanks Logo Icon CodeBlanks

Hidden input

HTML kursu · İleri seviye · Ders 19/56

<input type="hidden"> ile form meta verisi gönderirsin.

Gizli input nedir?

Bazen forma kullanıcıya görünmeyen ama sunucuya gönderilmesi gereken veri koyarsın: sipariş kimliği, CSRF token'ı, oturum değeri gibi. Bunun için <input type="hidden"> kullanılır.

Gizli input ekranda yer kaplamaz. Yine de name ve value öznitelikleriyle birlikte form gönderildiğinde sunucuya gider.

Örnek: <input type="hidden" name="product_id" value="4271">. Kullanıcı bunu görmez; ama form gönderildiğinde product_id=4271 sunucuya ulaşır.

Gizli input'un kullanımları

Gizli input'un üç yaygın kullanımı vardır:

  • CSRF token: kötü niyetli form gönderimini engellemek için sunucunun verdiği rastgele değer.
  • Kayıt kimliği: hangi kaydın düzenlendiğini sunucuya bildirmek (örneğin product_id).
  • Oturum ya da adım: çok adımlı formlarda hangi adımda olduğunu söylemek.

Gizli input güvenlik sağlamaz; kullanıcı HTML'i inceleyip değeri görebilir. Onu yalnızca 'kullanıcının değiştirmesini istemediğin veri' için kullan.

Uygulama Gizli input'lu sipariş formu yaz

Body içine bir <form> ekle. İçine görünür bir <input type="text" name="full_name"> koy. Ardından iki gizli input ekle: birincinin name="product_id" ve value="4271", ikincinin name="csrf_token" ve value="abc123" olsun.

Örnek çözümü göster
<body>
  <form>
    <label for="ad">Ad Soyad</label>
    <input type="text" id="ad" name="full_name">
    <input type="hidden" name="product_id" value="4271">
    <input type="hidden" name="csrf_token" value="abc123">
  </form>
</body>

Kendini test et

  1. Hangi durumda <input type="hidden"> kullanmak uygundur?

    • Sayfanın başlığını saklamak
    • Bir düğmeyi gizlemek
    • Sunucuya form kimliği göndermek
    • Bir paragrafı gizlemek
    Cevabı göster

    Sunucuya form kimliği göndermek — Doğru. Gizli input, sunucuya görünmeden veri (örneğin form kimliği) göndermek için kullanılır.

  2. Gizli input'u tamamla

    <input type="____" name="product_id" value="4271">
    Cevabı göster
    <input type="hidden" name="product_id" value="4271">
  3. Kullanımı değerle eşleştir

    CSRF token
    Rastgele güvenlik değeri
    product_id
    Kayıt kimliği
    step
    Form adımı
    session_id
    Oturum kimliği

İleri seviye bölümündeki tüm dersler