Girdi Türleri

Ö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

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

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

<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

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