Adım 2 / 3
``` Düğmelerin sırası ve türü belirtimin parçasıdır. "İleri" düğmesi formun **ilk gönderim düğmesidir**; bir metin alanındayken giriş tuşuna basan kullanıcı bu düğmeyi çalıştırır. "Geri" düğmesi `type="button"` taşır; taşımazsa örtük gönderimde formu geriye götürür ve kullanıcı bir adım kaybeder. ## Adım Değişimi Sayfa Değişimi Değildir Sayfa yenilenerek yapılan bir geçişte odak belgenin başına döner ve kullanıcı yeni belgeye baştan girer. Sayfa yenilenmeden yapılan bir geçişte hiçbir şey kendiliğinden olmaz: ekranda içerik değişir, odak eski düğmede kalır, ekranı görmeyen kullanıcı için hiçbir şey olmamış gibi görünür. Belirtim üç şey ister: odak yeni adımın başlığına taşınır, geçiş kibar öncelikli bir durum bölgesiyle duyurulur, adım göstergesi kaçıncı adımda olunduğunu metinle söyler. Başlığın `tabindex="-1"` taşıması, sekme sırasına girmeden odak alabilmesi içindir. Aşağıdaki betik aynı senaryoyu iki düzende koşturur ve dört kuralı denetler. ```js // form.mjs — cok adimli formda odak yonetimi, duyuru ve deger korumasinin denetimi const ADIMLAR = [ { ad: "Kayıt onayı", baslik: "adim-1", alanlar: [ { id: "kayit", etiket: "Kayıt numarası", zorunlu: true, kural: (v) => /^K-\d{3}$/.test(v), ileti: "Kayıt numarası K-000 biçiminde olmalı." }, ] }, { ad: "Üye bilgisi", baslik: "adim-2", alanlar: [ { id: "uye-no", etiket: "Üye numarası", zorunlu: true, kural: (v) => /^\d{8}$/.test(v), ileti: "Üye numarası 8 hane olmalı." }, { id: "eposta", etiket: "Bildirim adresi", zorunlu: false, kural: (v) => v === "" || v.includes("@"), ileti: "Geçerli bir e-posta adresi yazın." }, ] }, { ad: "Süre ve onay", baslik: "adim-3", alanlar: [ { id: "sure", etiket: "Ödünç süresi", zorunlu: true, kural: (v) => ["14", "21", "28"].includes(v), ileti: "Bir ödünç süresi seçin." }, ] }, ]; const baslangic = () => ({ adim: 0, degerler: {}, hatalar: [], odak: "input#kayit", duyuru: "", bitti: false, }); function dogrula(adim, degerler) { const h = []; for (const a of ADIMLAR[adim].alanlar) { const v = degerler[a.id] ?? ""; if (a.zorunlu && v === "") h.push([a.id, a.etiket, "Bu alan zorunludur."]); else if (v !== "" && !a.kural(v)) h.push([a.id, a.etiket, a.ileti]); } return h; } // duzen: odagiTasi, gecisiDuyur, degerleriKoru function makine(duzen) { const odak = (hedef, eski) => (duzen.odagiTasi ? hedef : eski); const duyur = (m) => (duzen.gecisiDuyur ? m : ""); return (d, e) => { if (e.tur === "yaz") return { ...d, degerler: { ...d.degerler, [e.id]: e.deger } }; if (e.tur === "geri") { if (d.adim === 0) return d; const y = d.adim - 1; return { ...d, adim: y, hatalar: [], degerler: duzen.degerleriKoru ? d.degerler : {}, odak: odak("h2#" + ADIMLAR[y].baslik, d.odak), duyuru: duyur(`Adım ${y + 1} / ${ADIMLAR.length}: ${ADIMLAR[y].ad}`) }; } if (e.tur === "ileri" || e.tur === "gonder") { const hatalar = dogrula(d.adim, d.degerler); if (hatalar.length > 0) { return { ...d, hatalar, odak: odak("div#hata-ozeti", d.odak), duyuru: duyur(`${hatalar.length} alan düzeltilmeli`) }; } if (e.tur === "gonder" && d.adim === ADIMLAR.length - 1) { return { ...d, hatalar: [], bitti: true, odak: odak("h2#sonuc", d.odak), duyuru: duyur("Ödünç alma isteği kaydedildi") }; } const y = Math.min(d.adim + 1, ADIMLAR.length - 1); return { ...d, adim: y, hatalar: [], odak: odak("h2#" + ADIMLAR[y].baslik, d.odak), duyuru: duyur(`Adım ${y + 1} / ${ADIMLAR.length}: ${ADIMLAR[y].ad}`) }; } return d; }; } const SENARYO = [ { tur: "yaz", id: "kayit", deger: "K-118" }, { tur: "ileri" }, { tur: "yaz", id: "uye-no", deger: "1234" }, { tur: "ileri" }, { tur: "yaz", id: "uye-no", deger: "10045512" }, { tur: "ileri" }, { tur: "geri" }, { tur: "ileri" }, { tur: "yaz", id: "sure", deger: "21" }, { tur: "gonder" }, ]; const ODAKLANABILIR = new Set([ "input#kayit", "div#hata-ozeti", "h2#adim-1", "h2#adim-2", "h2#adim-3", "h2#sonuc", ]); function kosum(baslik, duzen, izYaz) { const sonraki = makine(duzen); let d = baslangic(); const iz = []; console.log(baslik); if (izYaz) console.log(" eylem".padEnd(24) + "adim".padEnd(18) + "odak".padEnd(18) + "duyuru"); for (const e of SENARYO) { const onceki = d; d = sonraki(d, e); iz.push({ e, onceki, d }); if (!izYaz) continue; const etiket = e.tur === "yaz" ? `yaz ${e.id}` : e.tur; const adimAdi = d.bitti ? "sonuc" : `${d.adim + 1}/${ADIMLAR.length} ${ADIMLAR[d.adim].ad}`; console.log(" " + etiket.padEnd(22) + adimAdi.padEnd(18) + d.odak.padEnd(18) + (d.duyuru || "-")); } const bulgular = []; for (const { e, onceki, d: s } of iz) { if (e.tur === "yaz") continue; if (s.odak === onceki.odak && s.adim !== onceki.adim) bulgular.push(`${e.tur}: adim degisti, odak tasinmadi`); if (s.hatalar.length > 0 && s.odak !== "div#hata-ozeti") bulgular.push(`${e.tur}: hata var, odak ozete tasinmadi`); if (!ODAKLANABILIR.has(s.odak)) bulgular.push(`${e.tur}: odak hedefi odaklanabilir degil (${s.odak})`); if (s.duyuru === "") bulgular.push(`${e.tur}: gecis duyurulmadi`); for (const k of Object.keys(onceki.degerler)) { if (onceki.degerler[k] !== s.degerler[k]) bulgular.push(`${e.tur}: ${k} alaninin degeri kayboldu`); } } console.log(` bulgu: ${bulgular.length}`); for (const b of bulgular) console.log(" " + b); return iz; } kosum("kusurlu duzen (odak tasinmiyor, gecis duyurulmuyor, geri gidiste degerler siliniyor):", { odagiTasi: false, gecisiDuyur: false, degerleriKoru: false }, false); console.log(""); const iz = kosum("duzeltilmis duzen:", { odagiTasi: true, gecisiDuyur: true, degerleriKoru: true }, true); const hatali = iz.find(({ d }) => d.hatalar.length > 0).d; console.log("\nhatali gecisteki ozet baglantilari:"); for (const [id, etiket, ileti] of hatali.hatalar) { console.log(` ${etiket}: ${ileti}`); } ``` ``` kusurlu duzen (odak tasinmiyor, gecis duyurulmuyor, geri gidiste degerler siliniyor): bulgu: 14 ileri: adim degisti, odak tasinmadi ileri: gecis duyurulmadi ileri: hata var, odak ozete tasinmadi ileri: gecis duyurulmadi ileri: adim degisti, odak tasinmadi ileri: gecis duyurulmadi geri: adim degisti, odak tasinmadi geri: gecis duyurulmadi geri: kayit alaninin degeri kayboldu geri: uye-no alaninin degeri kayboldu ileri: hata var, odak ozete tasinmadi ileri: gecis duyurulmadi gonder: hata var, odak ozete tasinmadi gonder: gecis duyurulmadi duzeltilmis duzen: eylem adim odak duyuru yaz kayit 1/3 Kayıt onayı input#kayit - ileri 2/3 Üye bilgisi h2#adim-2 Adım 2 / 3: Üye bilgisi yaz uye-no 2/3 Üye bilgisi h2#adim-2 Adım 2 / 3: Üye bilgisi ileri 2/3 Üye bilgisi div#hata-ozeti 1 alan düzeltilmeli yaz uye-no 2/3 Üye bilgisi div#hata-ozeti 1 alan düzeltilmeli ileri 3/3 Süre ve onay h2#adim-3 Adım 3 / 3: Süre ve onay geri 2/3 Üye bilgisi h2#adim-2 Adım 2 / 3: Üye bilgisi ileri 3/3 Süre ve onay h2#adim-3 Adım 3 / 3: Süre ve onay yaz sure 3/3 Süre ve onay h2#adim-3 Adım 3 / 3: Süre ve onay gonder sonuc h2#sonuc Ödünç alma isteği kaydedildi bulgu: 0 hatali gecisteki ozet baglantilari: Üye numarası: Üye numarası 8 hane olmalı. ``` Kusurlu düzen on dört bulgu üretiyor ve bunların ikisi zincirleme kusurdur: geri gidişte değerler silindiği için sonraki iki geçiş de doğrulamadan geçemiyor. Ekranda görülen tek şey "formun geri dönünce boşalması"dır; kalan on iki bulgu ekranda hiç görünmez. Düzeltilmiş koşumun izinde iki satır dikkat gerektirir. Dördüncü satırda doğrulama başarısız oluyor ve odak hata özetine gidiyor; adım numarası değişmiyor. Yedinci satırda geri gidiş de bir adım değişimidir ve ileri gidişle **aynı** odak ve duyuru işlemini gerektirir; geri gidişin sessiz bırakılması sık atlanan bir durumdur. ## Klavye Sözleşmesi | Tuş | Davranış | |---|---| | `Tab` / `Shift+Tab` | Alanlar arasında kaynak sırasıyla gezer. | | `Enter` (tek satırlık alanda) | Formun ilk gönderim düğmesini çalıştırır. | | `Enter` (çok satırlı alanda) | Satır sonu ekler; form göndermez. | | `Enter` (düğmede) | Odaktaki düğmeyi çalıştırır. | Sözleşmenin kısıtı, örtük gönderimin **hangi düğmeyi** çalıştıracağıdır. Formun ilk gönderim düğmesi "Geri" ise, alanda giriş tuşuna basan kullanıcı bir adım geriye düşer. Gönderim niteliği taşımayan her düğme `type="button"` yazılır. ## Kaydetme ve Geri Alma Ödünç alma isteği bir kayıt üretir; kullanıcının kendi verisi üzerinde bağlayıcı bir işlemdir. 3.3.4 Hata Önleme ölçütü bu tür gönderimlerde üç yoldan **en az birini** ister: gönderim geri alınabilir olmalı, girilen veri denetlenip düzeltilebilmeli, ya da gönderim öncesinde onaylanmalıdır. Üç adımlı formda ikinci yol kendiliğinden kurulur: son adım, girilen bütün değerleri özet olarak gösterir ve her satırın yanında ilgili adıma dönen bir bağlantı taşır. Özetin salt metin olması yetmez; kullanıcı düzeltmek istediği alana bir eylemle ulaşabilmelidir. İki ek kural belirtimde yazılır. Kaydedilmemiş değişiklik varken sayfadan ayrılmak uyarıyla karşılanır; uyarı bir kip pencere olduğunda odak yönetimi gerektirir ve bu, sonraki konunun sorumluluğudur. Oturum zaman aşımı varsa 2.2.1 Zamanlamanın Ayarlanabilirliği devreye girer: kullanıcı süreyi uzatabilmeli ya da veri korunmalıdır. Yirmi dakikada dolan bir oturumun uzun bir formu sessizce silmesi bu ölçütü kaldırır. ## Ölçülebilir Kısıtlar **3.3.2 Etiketler ve Yönergeler** her alanda etiket ya da yönerge ister; **3.3.1 Hata Belirleme** hatalı alanın metinle belirtilmesini; **3.3.3 Hata Önerisi** biliniyorsa düzeltme önerisinin verilmesini ister. Denetimdeki "Üye numarası 8 hane olmalı" iletisi bu üçüncü ölçütün karşılığıdır: hatayı bildirmekle kalmaz, doğru biçimi söyler. **1.3.5 Girdi Amacını Belirleme**, kullanıcının kendi bilgisini toplayan alanlarda amacın program yoluyla bildirilmesini ister; ödünç alma formunda ad ve bildirim adresi alanları bu kapsamdadır. **2.4.6 Başlıklar ve Etiketler** adım başlıklarının içeriği gerçekten tanımlamasını ister: "Adım 2" bir başlık değildir, "Üye bilgisi" başlıktır ve adım numarası ayrı bir metinle verilir. ## Sık Yapılan Hata **Adım göstergesinin yalnızca görsel olması.** Dolan bir çubuk ya da renklenen üç nokta, ekranı görmeyen kullanıcıya hiçbir şey söylemez. Saptaması, göstergenin metin karşılığının ağaçta bulunup bulunmadığının denetlenmesidir. **Hata özetinin bulunduğu yerde bırakılması.** Özet oluşturulup odak taşınmadığında kullanıcı gönderimin başarısız olduğunu öğrenemez. Saptaması denetimin ikinci kuralıdır: hata varken odağın özete taşınıp taşınmadığı sınanır. **Geri gidişin sessiz bırakılması.** İleri gidişte kurulan odak ve duyuru düzeni geri gidişte de gereklidir. Saptaması, iki yönün aynı kural kümesinden geçirilmesidir. **Tek alanlı grup kurulması.** Bir alanı `fieldset` içine almak, alanın adını grup adıyla birlikte iki kez duyurur. Saptaması, grup içindeki alan sayısının sayılmasıdır. ## Özet - Form, alan sayısına göre değil bağımsız karar kümelerine göre bölünür; kısa formlar tek görünümde kalır. - Gruplamanın ölçütü alanların ortak bir soruya yanıt vermesidir; tek alanlı grup kurulmaz. - Adım değişimi üç işlem gerektirir: odağın yeni adım başlığına taşınması, geçişin kibar öncelikle duyurulması ve adım göstergesinin metinle verilmesi. Geri gidiş de bir adım değişimidir. - Formun ilk gönderim düğmesi örtük gönderimde çalışır; gönderim niteliği taşımayan düğmeler `type="button"` yazılır. - 3.3.4 bağlayıcı gönderimlerde geri alma, düzeltme ya da onaylama yollarından en az birini ister; son adımdaki düzeltilebilir özet ikinci yolu kurar. - Denetimin ürettiği bulguların çoğu ekranda görünmez; odak ve duyuru kusurları yalnızca kural sınamasıyla ortaya çıkar. ## Sonraki Adım Bu konudaki bütün bileşenler bir eylemi çalıştırdı: aramayı koşturmak, süzgeci uygulamak, formu göndermek. Sonuç tablosundaki kayıt başlıkları ise farklı bir iş yapar — kullanıcıyı başka bir kaynağa götürür. İkisi ekranda birbirine benzetilebilir, ancak klavye sözleşmeleri, ağaçtaki rolleri ve kullanıcının onlardan beklediği şey ayrıdır. Sonraki ders bu ayrımı kurala bağlar ve karışmanın hangi somut kırılmaları ürettiğini gösterir.