---
title: 'Girdi Türleri'
source: 'https://academia.sh/tr/kurslar/web-temelleri-ve-html/girdi-turleri'
course: "Web'in Temelleri ve HTML"
language: tr
updated: '2026-08-17T18:09:32+00:00'
license: 'CC BY-SA 4.0'
---

# Girdi Türleri

Metin, sayı, tarih, seçim ve dosya alanlarının ayrımı; tür bilgisinin gönderimde ne kadarının kaldığı ve değerlerin sunucuya ulaşan biçimi.

Önceki ders formu tek tür alanla kurdu. Alınacak veri her zaman serbest metin değildir:
sayı, tarih, saat, tek seçim, çok seçim, uzun metin, dosya. `input` ögesinin `type`
özniteliği bu ayrımı yapar.

Tür seçimi üç şeyi birden etkiler: kullanıcının gördüğü arayüz, tarayıcının uyguladığı
doğrulama ve değerin gönderimdeki biçimi. Bu ders üçüncüsüne odaklanır, çünkü ilk ikisi
ancak üçüncüsü bilinerek doğru yorumlanır.

## Türün Üç Etkisi

Bir tür bildirildiğinde tarayıcı ona uygun bir arayüz sunar: sayı alanında artırma
düğmeleri, tarih alanında bir takvim, renk alanında bir seçici. Bu arayüzler tarayıcıya ve
aygıta göre değişir; dar ekranlarda tür bildirimi klavye düzenini de belirler — sayı için
rakam tuşları, e-posta için `@` karakterini içeren düzen.

Tür ayrıca bir kısıt getirir: geçersiz bir değer girildiğinde gönderim engellenir. Bu
davranış sonraki iki dersin konusudur.

Üçüncü etki gönderim biçimidir ve tanımlıdır.

## Değerler Sunucuya Nasıl Ulaşır

```js
// girdi.mjs — farkli turlerin urettigi degerler ve sunucudaki gorunumu
import { createServer } from "node:http";

// Isaretlenmemis onay kutusu ve devre disi alan giris listesine hic girmez.
const girisListesi = [
  ["ad", "Kuzey Yamaç"],           // type="text"
  ["sicaklik", "-4.2"],            // type="number"
  ["olcumTarihi", "2024-03-12"],   // type="date"
  ["olcumSaati", "07:30"],         // type="time"
  ["esik", "18"],                  // type="range"
  ["dogrulandi", "on"],            // isaretli type="checkbox", value yazilmamis
  ["kaynak", "otomatik"],          // secili type="radio"
  ["etiket", "nem"],               // <select> secili secenek
  ["etiket", "ruzgar"],            // <select multiple> ikinci secili secenek
  ["not", "ilk satır\r\nikinci satır"], // <textarea>: satir sonlari CRLF'e cevrilir
];

const sunucu = createServer((istek, yanit) => {
  const parcalar = [];
  istek.on("data", (parca) => parcalar.push(parca));
  istek.on("end", () => {
    const govde = Buffer.concat(parcalar).toString();
    console.log("ham govde:");
    console.log(govde);
    console.log("--- sunucuda cozulmus ciftler ---");
    for (const [ad, deger] of new URLSearchParams(govde)) {
      console.log(ad.padEnd(12), JSON.stringify(deger), "(" + typeof deger + ")");
    }
    yanit.writeHead(204).end();
  });
});

sunucu.listen(0, "127.0.0.1", async () => {
  await fetch("http://127.0.0.1:" + sunucu.address().port + "/olcum", {
    method: "POST",
    headers: { "content-type": "application/x-www-form-urlencoded" },
    body: new URLSearchParams(girisListesi).toString(),
  });
  sunucu.close();
});
```

```
ham govde:
ad=Kuzey+Yama%C3%A7&sicaklik=-4.2&olcumTarihi=2024-03-12&olcumSaati=07%3A30&esik=18&dogrulandi=on&kaynak=otomatik&etiket=nem&etiket=ruzgar&not=ilk+sat%C4%B1r%0D%0Aikinci+sat%C4%B1r
--- sunucuda cozulmus ciftler ---
ad           "Kuzey Yamaç" (string)
sicaklik     "-4.2" (string)
olcumTarihi  "2024-03-12" (string)
olcumSaati   "07:30" (string)
esik         "18" (string)
dogrulandi   "on" (string)
kaynak       "otomatik" (string)
etiket       "nem" (string)
etiket       "ruzgar" (string)
not          "ilk satır\r\nikinci satır" (string)
```

Çıktının son sütunu dersin en önemli sonucudur: **her değer dizgidir.** Tür bilgisi
gönderimde taşınmaz. Sunucu, `sicaklik` alanının bir sayı alanı olduğunu bilmez;
`"-4.2"` dizgisini alır ve sayıya çevirmek onun işidir.

Bunun doğrudan sonucu, tür bildiriminin bir sunucu güvencesi olmamasıdır. Konu, dördüncü
derste ayrıntılandırılacaktır.

Üç ayrıntı daha görünür.

**Tarih ve saat biçimi tanımlıdır.** Kullanıcının gördüğü arayüz yerel biçimi kullansa da
gönderilen değer `YYYY-AA-GG` ve `SS:DD` düzenindedir. Sunucu, kullanıcının hangi ülkede
olduğunu bilmeden değeri çözebilir.

**Aynı ad birden çok kez bulunabilir.** `etiket` alanı iki kez gönderilmiştir — çoklu
seçim listesinin iki seçili seçeneği. Sunucu tarafında bu alanın bir liste olarak
okunması gerekir; yalnızca ilk değeri alan bir çözümleme sessizce veri kaybeder.

**Uzun metin alanındaki satır sonları CRLF'e çevrilir.** Gövdede `%0D%0A` görülür.
Kullanıcı hangi işletim sisteminde olursa olsun gönderilen değer aynıdır.

## Tür Kümesi

| Tür | Toplanan veri | Gönderilen değer |
|---|---|---|
| `text` | tek satır metin | girilen metin |
| `search` | arama terimi | girilen metin |
| `email` | e-posta adresi | girilen metin |
| `url` | adres | girilen metin |
| `tel` | telefon numarası | girilen metin, biçim denetlenmez |
| `password` | gizlenen metin | girilen metin, şifresiz |
| `number` | sayı | ondalık ayıracı nokta |
| `range` | aralıktan sayı | sayı; alan değeri göstermez |
| `date`, `time`, `month`, `week` | tarih ve saat | tanımlı biçimde |
| `checkbox` | evet/hayır ya da çoklu seçim | `value` ya da `on`; işaretsizse hiç |
| `radio` | gruptan tek seçim | seçilinin `value` değeri |
| `file` | dosya | ayrı bir kodlama gerektirir |
| `hidden` | görünmeyen taşınan değer | `value` değeri |

`password` türü değeri yalnızca ekranda gizler. Gövde şifresiz gider; koruma HTTPS'in
Rolü dersindeki taşıma katmanından gelir.

`range` türü seçilen değeri kullanıcıya göstermez ve bir değeri kesin olarak girmek
gerektiğinde uygun değildir; kesin olmayan bir ayar için uygundur.

`hidden` türü bir gizlilik düzeneği değildir: değeri kaynak metinde görünür ve
değiştirilebilir. Yalnızca sunucudan gelen bir bilgiyi geri taşımak içindir.

## Ayrı Ögeler

Üç girdi türü `input` ögesiyle yazılmaz.

`textarea` çok satırlı metindir. Başlangıç değeri `value` özniteliğiyle değil, ögenin
içeriğiyle verilir.

`select` bir listeden seçimdir; `option` ögeleri seçenekleri, `optgroup` ögesi seçenek
gruplarını taşır. `multiple` özniteliği çoklu seçime izin verir ve yukarıdaki çıktıdaki
yinelenen adı üretir.

```html
<p><label for="etiket">Etiketler</label>
   <select id="etiket" name="etiket" multiple size="4">
     <optgroup label="Atmosfer">
       <option value="nem" selected>Bağıl nem</option>
       <option value="ruzgar" selected>Rüzgâr</option>
     </optgroup>
     <optgroup label="Yüzey">
       <option value="toprak">Toprak sıcaklığı</option>
     </optgroup>
   </select></p>

<p><label for="not">Açıklama</label>
   <textarea id="not" name="not" rows="4">ilk satır
ikinci satır</textarea></p>
```

Seçeneğin `value` özniteliği yazılmazsa, gönderilen değer seçeneğin metni olur. Görünen
metin değiştiğinde gönderilen değerin de değişmemesi için `value` yazılır.

`output` ögesi bir hesap sonucunu taşır ve gönderime katılmaz; hesabı yapan davranış
katmanıdır.

## Öneri Listesi

Bir alanın hem serbest metin kabul etmesi hem de hazır seçenekler önermesi gerekebilir.
`datalist` ögesi bu iki davranışı birleştirir: seçenekleri taşır ancak alanı onlarla
sınırlamaz.

```html
<p><label for="sensor">Sensör kodu</label>
   <input id="sensor" name="sensor" type="text" list="sensor-listesi">
   <datalist id="sensor-listesi">
     <option value="NEM-01">
     <option value="SIC-02">
     <option value="RZG-03">
   </datalist></p>
```

Alanın `list` özniteliği listenin kimliğini gösterir. Kullanıcı listedeki bir değeri
seçebilir ya da kendi değerini yazabilir; gönderilen değer her iki durumda da alanın
metnidir. `select` ögesiyle ayrım budur: `select` seçenekleri kısıtlar, `datalist` yalnızca
önerir.

Listenin görünüp görünmediği ve nasıl sunulduğu tarayıcıya bağlıdır. Bu nedenle
`datalist` içeriği bir kısıt olarak değil, bir kolaylık olarak yazılır; gerçekten
kısıtlanması gereken bir alanda `select` ya da bir doğrulama kuralı kullanılır.

## İstasyon Belgesinde

```html
<fieldset>
  <legend>Ölçüm bilgisi</legend>
  <p><label for="tarih">Ölçüm tarihi</label>
     <input id="tarih" name="tarih" type="date"></p>
  <p><label for="saat">Ölçüm saati</label>
     <input id="saat" name="saat" type="time" step="600"></p>
  <p><label for="deger">Ölçülen değer (°C)</label>
     <input id="deger" name="deger" type="number" step="0.1"></p>
  <input type="hidden" name="istasyon" value="kuzey-yamac">
</fieldset>
```

Saat alanındaki `step="600"` değeri, ölçüm aralığının on dakika olmasının işaretlemedeki
karşılığıdır: saniye cinsinden altı yüz. Gizli alan istasyon kodunu taşır ve kullanıcının
girmesi gerekmez.

## Özet

- Tür seçimi arayüzü, doğrulamayı ve gönderim biçimini birlikte etkiler.
- Gönderilen her değer dizgidir; tür bilgisi sunucuya taşınmaz ve çevirme sunucunun işidir.
- Tarih ve saat değerleri tanımlı bir biçimde gönderilir; kullanıcının gördüğü yerel biçim
  gönderime yansımaz.
- İşaretlenmemiş onay kutusu hiç gönderilmez; çoklu seçim aynı adı birden çok kez üretir.
- `password` ve `hidden` türleri gizlilik sağlamaz; ilki yalnızca ekranda gizler, ikincisi
  kaynak metinde görünür.

## Sonraki Adım

Alanlar tanımlandı ama her birinin ne istediği yalnızca yanındaki metinden anlaşılıyor. Bu
metnin alana bağlı olduğu belgede bildirilmedikçe, alan adsızdır: fareyle etikete
tıklandığında odak alana gitmez, ekran okuyucu alanı "düzenlenebilir metin" diye duyurur.
Sonraki ders bu bağı kurar ve bağın kurulmadığı durumları bir denetimle görünür kılar.