Haladó űrlapok.

Összetett űrlapok, amelyek működnek is: a régi változat ezeket csak megrajzolta (a „Következő” gomb nem lapozott, a jelszó-ellenőrző lista nem reagált, a fájllista kitalált fájlokat mutatott). A megjelenést itt is a CSS adja; a viselkedést rövid, kommentezett JavaScript – mindegyik példánál a JS fülön olvasható.

• többlépéses űrlap folyamatjelzővel és összegzéssel
• fájlfeltöltés ráhúzással, méretellenőrzéssel
• élő ellenőrzés a :user-invalid pszeudo-osztállyal
• címkeválasztó, többes választó, színséma, dátumtartomány

Egy hosszú űrlap négy rövid lépésre bontva. A „Következő” gomb csak akkor lapoz, ha az aktuális lépés kötelező mezői rendben vannak (a böngésző saját ellenőrzése: reportValidity()); a folyamatjelző mutatja, hol tartunk. A jelszó feltétellistája gépelés közben frissül, a szem ikon megmutatja a jelszót, az utolsó lépés pedig a ténylegesen beírt adatokat összegzi – a „Szerkesztés” gombbal vissza lehet ugrani.

A zóna valójában egy <input type="file" multiple> címkéje: kattintásra a szokásos fájlválasztó nyílik, és billentyűzettel is elérhető. A ráhúzást (dragover, drop esemény) a szkript kezeli; minden fájl a listába kerül a méretével, a 10 MB-nál nagyobb hibát kap. A fájl nem hagyja el a gépet – a példa semmit nem tölt fel.

A zöld pipa és a piros hibaüzenet szkript nélkül jelenik meg: a böngésző a type="email", type="url", pattern, required alapján tudja, érvényes-e a mező, a CSS pedig a :user-valid és :user-invalid pszeudo-osztályokkal reagál. Ezek csak akkor illeszkednek, ha a felhasználó már hozzányúlt a mezőhöz – így nem kiabál hibát egy üres, még ki sem töltött űrlap. (A régi változatban ehhez a részhez egyáltalán nem tartozott CSS.) A jelszó feltétellistája szkripttel frissül.

Címkeválasztó (írj be egy címkét és nyomj Entert, vagy kattints egy javaslatra; a × töröl), többes választó lenyíló listával és kereséssel, színséma-választó rádiógombokkal, és dátumtartomány gyors gombokkal. A színséma CSS-only (rejtett rádiógomb + :checked); a többihez rövid szkript tartozik.

1. Egészítsd ki a többlépéses űrlapot állapotmentéssel: a beírt adatok oldal-újratöltés után is maradjanak meg (localStorage).
2. A fájlfeltöltőben jelenjen meg a képek előnézete (URL.createObjectURL()), és csak képet fogadjon el (accept="image/*").
3. Készíts összetett szűrőt egy terméklistához: kategória (többes választó), árkategória (két csúszka), címkék.
4. Ellenőrizd az összes példát csak billentyűzettel: minden vezérlő elérhető, látszik a fókusz, a hibaüzenet érthető?