Form Yapısı

Belge bu noktada yapılı, bölümlenmiş ve medya taşır durumda; ancak tek yönlü. Okuyucu bilgi alıyor, veremiyor. Bu konu o yönü açar.

Form, kullanıcıdan alınan değerleri bir isteğe çeviren düzenektir. İnternet Nasıl Çalışır kursundaki HTTP İstek ve Yanıtı dersi isteğin parçalarını —istek satırı, başlıklar, gövde— tanımlamıştı. Bu ders, o parçalara giden değerin belgede nasıl toplandığını ve hangi biçimde yazıldığını ele alır.

Formun Parçaları

form ögesi bir gönderim birimidir. İki özniteliği gönderimin nereye ve nasıl yapılacağını belirler.

action isteğin gideceği adrestir. Yazılmadığında belgenin kendi adresi kullanılır.

method HTTP yöntemidir: get ya da post. Yazılmadığında get varsayılır.

Form içindeki alanlardan yalnızca adı olanlar gönderilir. name özniteliği bir alanı gönderime katan şeydir; adı olmayan bir alan ekranda görünür, değeri girilir ve sunucuya hiç ulaşmaz.

Giriş Listesi

Gönderim başladığında tarayıcı form içindeki alanları dolaşır ve ad–değer çiftlerinden oluşan bir giriş listesi (entry list) kurar. Bu liste sıralıdır ve belgedeki alan sırasını izler; aynı ad birden çok kez bulunabilir.

Listeye girmeyen alanlar vardır: adı olmayanlar, devre dışı bırakılmış olanlar ve işaretlenmemiş onay kutuları. Bu son kural sık gözden kaçar — işaretlenmemiş bir onay kutusu “yanlış” değeriyle gönderilmez, hiç gönderilmez.

Yöntem Gövdeyi Belirler

Giriş listesi kurulduktan sonra nereye yazılacağı yönteme bağlıdır. Aşağıdaki betik yerel bir sunucu açar, iki gönderimi de yapar ve sunucunun gördüğünü yazdırır.

// gonderim.mjs — get ve post gonderimlerinin sunucuda gorunumu
import { createServer } from "node:http";

// Formun urettigi ad-deger ciftleri (giris listesi).
const girisListesi = [
  ["istasyon", "kuzey-yamac"],
  ["olcum", "sicaklik"],
  ["deger", "-4.2"],
  ["not", "rüzgâr kuvvetli & yağış yok"],
];

const sunucu = createServer((istek, yanit) => {
  const parcalar = [];
  istek.on("data", (parca) => parcalar.push(parca));
  istek.on("end", () => {
    const govde = Buffer.concat(parcalar);
    console.log("istek satiri :", istek.method, istek.url);
    console.log("content-type :", istek.headers["content-type"] ?? "(yok)");
    console.log("govde        :", govde.length ? JSON.stringify(govde.toString()) : "(bos)");
    console.log("---");
    yanit.writeHead(204).end();
  });
});

sunucu.listen(0, "127.0.0.1", async () => {
  const taban = "http://127.0.0.1:" + sunucu.address().port;
  const sorgu = new URLSearchParams(girisListesi).toString();

  // method="get": eylem adresinin sorgu bolumu silinir, yerine giris listesi yazilir.
  const adres = new URL("/kayit?eski=deger", taban);
  adres.search = sorgu;
  await fetch(adres);

  // method="post", varsayilan enctype: giris listesi govdeye yazilir.
  await fetch(new URL("/kayit?eski=deger", taban), {
    method: "POST",
    headers: { "content-type": "application/x-www-form-urlencoded" },
    body: sorgu,
  });

  sunucu.close();
});

istek satiri : GET /kayit?istasyon=kuzey-yamac&olcum=sicaklik&deger=-4.2&not=r%C3%BCzg%C3%A2r+kuvvetli+%26+ya%C4%9F%C4%B1%C5%9F+yok
content-type : (yok)
govde        : (bos)
---
istek satiri : POST /kayit?eski=deger
content-type : application/x-www-form-urlencoded
govde        : "istasyon=kuzey-yamac&olcum=sicaklik&deger=-4.2&not=r%C3%BCzg%C3%A2r+kuvvetli+%26+ya%C4%9F%C4%B1%C5%9F+yok"
---

Çıktı dört şey söyler.

get yöntemi gövde göndermez. Liste, adresin sorgu bölümüne yazılır. Bunun sonucu, değerlerin tarayıcı geçmişinde, yer imlerinde ve sunucu kütüklerinde görünmesidir.

Eylem adresinin var olan sorgusu silinir. İstek satırındaki eski=deger çifti kaybolmuştur. get ile gönderilen bir formda action adresine sorgu yazmak işe yaramaz; gizli bir alanla taşınması gerekir.

post yöntemi listeyi gövdeye yazar ve adresteki sorguyu korur.

Kodlama biçimi aynıdır. İki durumda da liste ad=deger çiftleri hâlinde & ile birleştirilir; boşluklar +, ASCII dışı karakterler ve & yüzde kodlamasıyla yazılır. rüzgâr kuvvetli & yağış yok değerindeki ayıraç %26 olmuştur — Bağlantılar dersindeki yüzde kodlamasının aynısıdır. Bu biçimin adı application/x-www-form-urlencoded ve post gönderiminde bu ad Content-Type başlığında bildirilir.

Yöntem Seçimi

Seçim bir alışkanlık değil, isteğin doğasından çıkar. HTTP İstek ve Yanıtı dersinde tanımlanan iki özellik burada doğrudan kullanılır: güvenli yöntem sunucuda değişiklik yapmaz, değişmez yöntem birden çok kez uygulandığında aynı durumu bırakır.

get güvenlidir. Yalnızca sunucuda bir değişiklik yapmayan gönderimlerde kullanılır: bir arama, bir süzme, bir sorgu. Sonucun adres olarak paylaşılabilir ve yer imine eklenebilir olması bir kazançtır.

post güvenli değildir. Sunucuda bir değişiklik yapan her gönderim bu yöntemle yapılır: bir kayıt eklemek, bir bildirim göndermek. Değerler adreste görünmez ve gönderimin yinelenmesi tarayıcı tarafından uyarıyla karşılanır.

Bir kayıt gönderimini get ile yapmak, bağlantının paylaşılması ya da adresin yenilenmesi durumunda işlemin yeniden yapılmasına yol açar. Ayrım bir gizlilik önlemi değildir — post gövdesi de şifresizdir; koruma HTTPS’in Rolü dersinde anlatılan taşıma katmanından gelir.

Alanların Gruplanması

fieldset ögesi birbirine bağlı alanları gruplar, legend ögesi gruba bir ad verir ve grubun ilk çocuğu olarak yazılır.

<fieldset>
  <legend>Ölçüm kaynağı</legend>
  <p><label><input type="radio" name="kaynak" value="otomatik" checked> Otomatik</label></p>
  <p><label><input type="radio" name="kaynak" value="elle"> Elle girildi</label></p>
</fieldset>

Gruplama, seçenek düğmeleri için isteğe bağlı değildir. Tek tek etiketler yalnızca “Otomatik” ve “Elle girildi” der; grubun neyin seçeneği olduğunu söyleyen şey legend metnidir. Ekran okuyucu her seçeneği duyururken grup adını da duyurur.

fieldset ögesine yazılan disabled özniteliği içindeki tüm alanları devre dışı bırakır ve devre dışı alanlar giriş listesine girmez; çok adımlı formlarda bir bölümü toptan kapatmanın yolu budur.

Gönderim Düğmesi

button ögesinin type özniteliği üç değer alır: submit formu gönderir, reset alanları başlangıç değerlerine döndürür, button hiçbir şey yapmaz. Bir form içinde yazılmayan type özniteliği submit sayılır — bir formun içine konan sıradan bir düğme, farkında olunmadan formu gönderir.

formaction ve formmethod öznitelikleri, o düğmeyle yapılan gönderim için formun kendi ayarlarını geçersiz kılar; aynı formun iki farklı adrese gönderilmesi böyle sağlanır.

Form Dışındaki Alanlar

Bir alanın hangi forma ait olduğu genellikle iç içelikten çıkar: form ögesinin içinde duran her alan ona aittir. Formlar iç içe yazılamaz, dolayısıyla bu ilişki tektir.

İç içelik her zaman istenen düzeni vermez — bir tablonun içindeki alanların tablo dışındaki bir forma ait olması gibi. Bu durumda alana yazılan form özniteliği, ait olduğu formun kimliğini bildirir.

<form id="duzeltme" action="/olcum/duzeltme" method="post"></form>

<table>
  <tr>
    <th scope="row">Pazartesi</th>
    <td><input form="duzeltme" name="pzt" type="number" value="-4"></td>
  </tr>
</table>

<button type="submit" form="duzeltme">Düzeltmeyi gönder</button>

Gönderim düğmesi de bu özniteliği kullanabilir; formun kendisi boş kalır ve yalnızca gönderim ayarlarını taşır.

autocomplete özniteliği tarayıcının daha önce girilmiş değerleri önermesini düzenler. Alan düzeyinde yazıldığında değerin türünü de bildirir; bu bildirim, bilişsel yük veya devinim güçlüğü olan kullanıcılar için formu doldurulabilir kılan tek düzenektir. Yalnızca paylaşılan makinelerde saklanmaması gereken alanlarda kapatılır.

İstasyon Belgesinde

<section aria-labelledby="bildirim">
  <h2 id="bildirim">Ölçüm Düzeltmesi Bildir</h2>

  <form action="/olcum/duzeltme" method="post">
    <fieldset>
      <legend>Ölçüm bilgisi</legend>
      <p><label for="istasyon">İstasyon kodu</label>
         <input id="istasyon" name="istasyon" type="text" value="kuzey-yamac"></p>
      <p><label for="deger">Ölçülen değer (°C)</label>
         <input id="deger" name="deger" type="number"></p>
    </fieldset>

    <p><button type="submit">Düzeltmeyi gönder</button></p>
  </form>
</section>

Yöntem post seçilmiştir çünkü gönderim sunucuda bir kayıt oluşturur. Alanlar bir grupta toplanmış ve gruba ad verilmiştir.

Özet

• Form, alanlardan bir giriş listesi kurar; yalnızca adı olan, devre dışı olmayan ve işaretli olan alanlar bu listeye girer.
• get yönteminde liste adresin sorgu bölümüne yazılır ve eylem adresindeki var olan sorgu silinir; post yönteminde gövdeye yazılır ve adresteki sorgu korunur.
• İki yöntemde de varsayılan kodlama aynıdır: ad=deger çiftleri, boşluk +, özel karakterler yüzde kodlamasıyla.
• Yöntem seçimi güvenli ve değişmez olma özelliklerinden çıkar; sunucuda değişiklik yapan gönderim post ile yapılır.
• fieldset ve legend, seçenek gruplarında zorunludur: grubun neyin seçeneği olduğunu yalnızca grup adı söyler.

Sonraki Adım

Bu ders formu tek tür alanla kurdu. Oysa alınacak veri her zaman serbest metin değildir: sayı, tarih, saat, seçim, çoktan seçim, dosya. Sonraki ders girdi türlerini ele alır ve tümünün sunucuya nasıl ulaştığını —tür bilgisinin gönderimde ne kadarının kaldığını— gerçek bir gövde üzerinden gösterir.