---
title: 'Form Yapısı'
source: 'https://academia.sh/tr/kurslar/web-temelleri-ve-html/form-yapisi'
course: "Web'in Temelleri ve HTML"
language: tr
updated: '2026-08-17T18:09:32+00:00'
license: 'CC BY-SA 4.0'
---

# Form Yapısı

Formun ürettiği giriş listesi, gönderim yönteminin adres ve gövdeye etkisi, yöntem seçiminin gerekçesi ve alanların gruplanması.

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.

```js
// 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.

```html
<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.

```html
<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

```html
<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.