Çalıştırılabilir HTML Dokümanları: HTML form

Q: HTML'de form nasıl oluşturulur?

Alanları ile sar, her alana bir name ve bir ver ve ile bitir. Form gönderildiğinde tarayıcı her name=value çiftini action URL'sine gönderir.

Q: Bir formda GET ile POST arasındaki fark nedir?

method="get" (varsayılan) alanları /search?q=shoes gibi URL'ye koyar; bu da yer imlerine eklenebilmesi gereken aramalar ve filtreler için uygundur. method="post" onları isteğin gövdesinde gönderir; girişler, kayıtlar ve veriyi değiştiren her şey için istediğin budur.

Q: Form alanım neden gönderilmiyor?

Bir name özelliği yoktur ya da disabled durumundadır. Yalnızca adı olan, etkin alanlar gönderilir. İşaretlenmemiş bir checkbox ya da radio buton da tamamen dışarıda bırakılır.

Q: fieldset ve legend ne için kullanılır?

ilgili alanları gruplar, de grubun başlığıdır. Odak gruba girdiğinde ekran okuyucular legend'ı duyurur; bir radio buton grubunu anlaşılır kılan budur. Bir fieldset üzerindeki disabled de içindeki her alanı devre dışı bırakır.

Q: Bir formu JavaScript olmadan HTML ile nasıl doğrularım?

Özellikleri kullan: required, type="email", minlength, maxlength, min, max ve pattern. Tarayıcı gönderimi engeller ve ilk geçersiz alan için bir mesaj gösterir. Sunucuda da her zaman doğrula, çünkü bu kontroller okurun tarayıcısında çalışır ve atlatılabilir.

Q: Bir formun sayfayı yeniden yüklemesini nasıl engellerim?

Formun submit olayını dinle ve event.preventDefault() çağır, sonra veriyi fetch ile kendin gönder: form.addEventListener('submit', (e) => { e.preventDefault(); fetch(form.action, { method: 'POST', body: new FormData(form) }); }).

HTML'de form nasıl yapılır

Form, alanları ve bir gönder butonunu içeren bir <form> elementidir. Her alanın bir name değerine ihtiyacı vardır: değer bu anahtarla gönderilir. Formu doldur ve Send'e bas. Önizleme hiçbir yere bir şey göndermez; tarayıcının tam olarak neyi göndereceğini gösterir.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Contact form</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 10px; }
    input, textarea { display: block; font: inherit; margin-top: 4px; }
  </style>
</head>
<body>
  <form action="/contact" method="post">
    <label>Name <input name="name" autocomplete="name" required></label>
    <label>Email <input type="email" name="email" autocomplete="email" required></label>
    <label>Message <textarea name="message" rows="3"></textarea></label>
    <button type="submit">Send</button>
  </form>
</body>
</html>

Parçalar:

action verinin gittiği URL, method de nasıl gittiğidir (burada post).
Her alanda name. Değeri, okurun yazdığı şeydir.
<label> her alanı ekranda ve ekran okuyucular için adlandırır (bkz. HTML label).
required ve type="email", tarayıcının göndermeden önce alanları kontrol etmesini sağlar. Adı boş bırakarak ya da e-posta olarak abc yazarak göndermeyi dene.
Gönder butonu formu gönderir. Bir metin alanında Enter'a basmak da gönderir.

action ve method: veri nereye ve nasıl gider

Özellik	Değerler	Varsayılan
`action`	Herhangi bir URL	Geçerli sayfanın URL'si
`method`	`get`, `post`, `dialog`	`get`
`enctype`	`application/x-www-form-urlencoded`, `multipart/form-data`, `text/plain`	`application/x-www-form-urlencoded`

method="get" ile alanlar URL'nin sorgu dizesi olur: name="q" olan bir arama formu /search?q=blue+shoes adresine gider. Bu, aramalar ve filtreler için doğrudur, çünkü sonuç yer imlerine eklenebilir ve paylaşılabilir. method="post" ile alanlar isteğin gövdesine girer ve adres çubuğunda ya da geçmişte görünmez. Giriş yapan, bir şey oluşturan, değiştiren ya da silen her şey için ve şifreler için POST kullan.

Dosya yüklemesi (<input type="file">) olan bir formun method="post" ve enctype="multipart/form-data" değerlerine ihtiyacı vardır, yoksa yalnızca dosyanın adı gönderilir. method="dialog" bir <dialog> içindeki form içindir: gönderim bir istek yollamak yerine diyaloğu kapatır.

Neler gönderilir

Yalnızca name değeri olan alanlar ve yalnızca disabled değillerse gönderilir. Submit'e bas ve alanları formun gönderdikleriyle karşılaştır:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>What is sent</title>
  <style>
    label { display: block; margin-bottom: 6px; }
  </style>
</head>
<body>
  <form>
    <label>With a name <input name="city" value="Lisbon"></label>
    <label>No name <input value="not sent"></label>
    <label>Disabled <input name="country" value="Portugal" disabled></label>
    <label>Read only <input name="zip" value="1100" readonly></label>
    <label><input type="checkbox" name="newsletter" value="yes"> Unchecked box</label>
    <input type="hidden" name="source" value="footer">
    <button type="submit" name="action" value="save">Submit</button>
  </form>
</body>
</html>

Form city, zip, source ve action gönderir. Adı olmayan alan, devre dışı alan ve işaretlenmemiş checkbox dışarıda kalır. Gizli input'lar gönderilir ama asla gösterilmez; gönder butonu da kullanılan buton olduğu için kendi name ve value değerlerini gönderir.

fieldset ve legend ile alanları gruplamak

<fieldset> ilgili alanların çevresine bir kutu çizer, <legend> de onun başlığıdır. Odak gruba girdiğinde ekran okuyucular legend'ı duyurur; aşağıdakiler gibi bir radio buton setini anlaşılır kılan da budur: "Delivery, Standard, radio button".

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fieldset</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    fieldset { border: 1px solid #9ca3af; border-radius: 8px; margin-bottom: 12px; }
    legend { font-weight: 600; padding: 0 6px; }
    label { display: block; margin: 4px 0; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>Delivery</legend>
      <label><input type="radio" name="delivery" value="standard" checked> Standard</label>
      <label><input type="radio" name="delivery" value="express"> Express</label>
    </fieldset>

    <fieldset disabled>
      <legend>Gift options (unavailable)</legend>
      <label><input type="checkbox" name="wrap" value="yes"> Gift wrap</label>
      <label>Note <input name="note"></label>
    </fieldset>

    <button type="submit">Order</button>
  </form>
</body>
</html>

Bir fieldset üzerindeki disabled içindeki her alanı bir kerede devre dışı bırakır ve hiçbiri gönderilmez. Onu kaldır, hediye alanları kullanılabilir hâle gelir.

Yerleşik doğrulama: required, pattern ve diğerleri

Tarayıcılar göndermeden önce bu özellikleri kontrol eder ve başarısız olan ilk alanda bir mesaj gösterir:

Özellik	Kontrol eder
`required`	Alan boş değil (checkbox işaretli)
`type="email"`, `type="url"`	Değer bir e-posta adresine ya da URL'ye benziyor
`minlength`, `maxlength`	Metin uzunluğu
`min`, `max`, `step`	Sayı ve tarih aralığı
`pattern`	Değerin tamamı bir düzenli ifadeyle eşleşiyor

:invalid ve :valid alanlara durumlarına göre stil verir. :user-invalid genellikle daha iyidir: yalnızca okur alanı değiştirip ilerledikten ya da göndermeyi denedikten sonra uygulanır, böylece boş bir form kıpkırmızı açılmaz.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Validation</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 10px; }
    input { display: block; font: inherit; margin-top: 4px; border: 2px solid #9ca3af; border-radius: 6px; padding: 4px 8px; }
    input:user-invalid { border-color: #dc2626; }
    input:user-valid { border-color: #16a34a; }
    small { color: #4b5563; }
  </style>
</head>
<body>
  <form>
    <label>Username
      <input name="username" required minlength="3" maxlength="16" pattern="[a-z0-9_]+">
      <small>3 to 16 characters: lowercase letters, digits, underscore</small>
    </label>
    <label>Age
      <input type="number" name="age" min="13" max="120" required>
    </label>
    <label>Postcode
      <input name="postcode" pattern="[0-9]{5}" title="Five digits" required>
    </label>
    <button type="submit">Sign up</button>
  </form>
</body>
</html>

pattern ile ilgili üç şey insanları yanıltır. Değerin tamamıyla eşleşmelidir (^ ya da $ gerekmez). Yalnızca alan boş değilken çalışır, bu yüzden onu required ile birlikte kullan. Tarayıcının hata mesajı da geneldir, bu yüzden biçimi alanın yanında görünür bir metinle anlat. Chrome ve Firefox title metnini mesajlarına ekler, ama gözden kaçması kolaydır.

Kontrolleri kapatmak için, örneğin sunucunun doğrulamasını test ederken, <form> elementine novalidate ekle. Tek bir gönder butonu da formnovalidate ile onları atlayabilir.

Tarayıcı doğrulaması okurun rahatlığı içindir. Herkes sayfayı düzenleyebilir ya da onsuz bir istek gönderebilir, bu yüzden sunucu her değeri yeniden kontrol etmelidir.

setCustomValidity ile özel mesajlar

Bir kural, örneğin "iki şifre eşleşmeli", bir özellik olarak yazılamıyorsa mesajı JavaScript ile ayarla. Boş olmayan özel bir mesajı olan alan geçersizdir; boş bir string onu yeniden geçerli yapar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Custom validity</title>
  <style>
    label { display: block; margin-bottom: 8px; }
  </style>
</head>
<body>
  <form>
    <label>Password <input type="password" name="password" id="pw" minlength="8" required></label>
    <label>Repeat <input type="password" id="pw2" required></label>
    <button type="submit">Create account</button>
  </form>

  <script>
    const pw = document.querySelector('#pw');
    const pw2 = document.querySelector('#pw2');
    const check = () => {
      pw2.setCustomValidity(pw.value === pw2.value ? '' : 'The passwords do not match.');
    };
    pw.addEventListener('input', check);
    pw2.addEventListener('input', check);
  </script>
</body>
</html>

Tekrar alanının name değeri yoktur, bu yüzden şifrenin yalnızca bir kopyası gönderilir.

Gönderimi JavaScript ile işlemek

Formu sayfadan ayrılmadan göndermek için submit olayını dinle, preventDefault() çağır ve alanları FormData ile oku. Bir butonun click olayı yerine submit dinlemek, Enter dahil her gönderme yolunu yakalar ve yalnızca yerleşik doğrulama geçtikten sonra çalışır:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Submit with JavaScript</title>
  <style>
    pre { background: #e5e7eb; padding: 8px; }
  </style>
</head>
<body>
  <form id="signup">
    <input name="email" type="email" placeholder="Email" required>
    <select name="plan">
      <option value="free">Free</option>
      <option value="pro">Pro</option>
    </select>
    <button type="submit">Join</button>
  </form>
  <pre id="out"></pre>

  <script>
    const form = document.querySelector('#signup');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      const data = Object.fromEntries(new FormData(form));
      document.querySelector('#out').textContent = JSON.stringify(data, null, 2);
      // A real page would send it: fetch('/api/signup', { method: 'POST', body: new FormData(form) })
    });
  </script>
</body>
</html>

Object.fromEntries(new FormData(form)) alanları düz bir nesneye çevirir. Birkaç değeri olabilen alanlar için (aynı adı paylaşan checkbox'lar, çoklu bir select) onun yerine formData.getAll('name') kullan, çünkü nesne yalnızca son değeri tutar.

Sık yapılan hatalar

name olmayan alanlar. Gönderilen veriden sessizce çıkarılırlar.
Label yerine placeholder. Okur yazmaya başladığı anda ipucu kaybolur. Bir <label> kullan.
Gönderme dışında bir şey için kullanılan, type değeri olmayan bir <button>. Bir formun içinde o bir gönder butonudur.
Form içinde form. Formları iç içe yazmak geçersizdir; tarayıcı içteki <form> etiketini yok sayar.
Formdaki submit yerine gönder butonundaki click olayını dinlemek. Enter tuşuyla yapılan gönderimler kaçırılır.
Sunucu tarafında tarayıcı doğrulamasına güvenmek. Orada yeniden doğrula.
Şifreler için GET. URL'ye, geçmişe ve sunucu loglarına düşerler.

Sıkça Sorulan Sorular

HTML'de form nasıl oluşturulur?

Alanları <form action="/signup" method="post"> ile sar, her alana bir name ve bir <label> ver ve <button type="submit"> ile bitir. Form gönderildiğinde tarayıcı her name=value çiftini action URL'sine gönderir.

Bir formda GET ile POST arasındaki fark nedir?

method="get" (varsayılan) alanları /search?q=shoes gibi URL'ye koyar; bu da yer imlerine eklenebilmesi gereken aramalar ve filtreler için uygundur. method="post" onları isteğin gövdesinde gönderir; girişler, kayıtlar ve veriyi değiştiren her şey için istediğin budur.

Form alanım neden gönderilmiyor?

Bir name özelliği yoktur ya da disabled durumundadır. Yalnızca adı olan, etkin alanlar gönderilir. İşaretlenmemiş bir checkbox ya da radio buton da tamamen dışarıda bırakılır.

fieldset ve legend ne için kullanılır?

<fieldset> ilgili alanları gruplar, <legend> de grubun başlığıdır. Odak gruba girdiğinde ekran okuyucular legend'ı duyurur; bir radio buton grubunu anlaşılır kılan budur. Bir fieldset üzerindeki disabled de içindeki her alanı devre dışı bırakır.

Bir formu JavaScript olmadan HTML ile nasıl doğrularım?

Özellikleri kullan: required, type="email", minlength, maxlength, min, max ve pattern. Tarayıcı gönderimi engeller ve ilk geçersiz alan için bir mesaj gösterir. Sunucuda da her zaman doğrula, çünkü bu kontroller okurun tarayıcısında çalışır ve atlatılabilir.

Bir formun sayfayı yeniden yüklemesini nasıl engellerim?

Formun submit olayını dinle ve event.preventDefault() çağır, sonra veriyi fetch ile kendin gönder: form.addEventListener('submit', (e) => { e.preventDefault(); fetch(form.action, { method: 'POST', body: new FormData(form) }); }).

İlgili kavramlar