BS műhely.
← Minden modul

04. MODUL · BOOTSTRAP 5

Űrlapok.

Mezők, címkék, jelölők, beviteli csoportok, validáció

A MODULRÓL

Mit tanulsz meg?

  • a mezők, címkék és jelölők osztályai
  • lebegő címke, beviteli csoport, kapcsoló
  • visszajelzés helyes és hibás értékre
  • működő ellenőrzés egy regisztrációs űrlapon

1. FEJEZET

Mezők és címkék

Minden mezőhöz tartozzon címke: a <label for="…"> értéke egyezzen meg a mező id-jával. Így a címkére kattintva a mező kapja a fókuszt, és a képernyőolvasó is felolvassa, mit kell beírni. Az osztályok: form-label (címke), form-control (szövegmező), form-select (legördülő lista), form-check + form-check-input + form-check-label (jelölőnégyzet, rádiógomb). A mb-3 térközt ad a mezők között.

  • form-label
  • form-control
  • form-select
  • form-check, form-check-input, form-check-label
  • form-text segédszöveg (aria-describedby)

A placeholder nem címke: amint gépelni kezdenek, eltűnik, és a halvány színe miatt sokan nem is olvassák el. Csak példát mutass benne, a címke mindig legyen ott.

2. FEJEZET

Lebegő címke, beviteli csoport, kapcsoló

A form-floating a címkét a mezőn belülre teszi, és gépeléskor felúsztatja (a mezőnek ilyenkor kötelező placeholder-t adni, és a címke a mező után áll). Az input-group a mező elé vagy mögé ragaszt egy szöveget vagy gombot. A form-switch a jelölőnégyzetet kapcsolóvá alakítja. A színes jelölőnégyzeteket saját osztály színezi – de csak bejelölt állapotban, hogy a két állapot megkülönböztethető maradjon.

  • form-floating
  • input-group, input-group-text
  • form-control-lg / -sm
  • form-switch
  • form-check-inline egymás mellett

3. FEJEZET

Kereső, csúszka, fájl, szín

Néhány különleges mezőtípus: a keresőmező gombbal (beviteli csoportban; az ikonos gomb aria-label-t kap), a csúszka (form-range), a fájlválasztó (type="file" + form-control) és a színválasztó (form-control-color). A csúszka mellé érdemes kiírni az aktuális értéket – ehhez egy sor JavaScript kell.

4. FEJEZET

Visszajelzés: helyes és hibás mező

Az is-valid és az is-invalid osztály zöld, illetve piros keretet és ikont ad a mezőnek, és megjeleníti a mögötte álló valid-feedback / invalid-feedback szöveget. Ezeket az osztályokat általában a szkript teszi rá a mezőre, ellenőrzés után.

Egy valódi űrlapon a böngésző saját ellenőrzését használjuk (required, type="email", minlength, pattern), csak a megjelenést bízzuk a Bootstrapre. A novalidate kikapcsolja a böngésző buboréküzeneteit, a szkript pedig beküldéskor a was-validated osztályt teszi az űrlapra: ettől kezdve minden mező zöld vagy piros. A jelszó megerősítését a setCustomValidity() ellenőrzi. Próbáld beküldeni üresen, majd töltsd ki!

5. FEJEZET

Saját színvilág – a Bootstrap felülírása nélkül

Ha az űrlapnak más színű keret, fókuszgyűrű és jelölő kell, ne írd át a .form-control osztályt mindenhol (a régi változat így tett, ezért minden más példa is lila lett). A Bootstrap 5.3 a színeit CSS-változókból veszi: elég egy saját osztályon belül átállítani őket, és csak az az űrlap változik meg.

GYAKORLÁS

Gyakorló feladatok

  1. Készíts bejelentkezési űrlapot (e-mail, jelszó, „emlékezz rám” jelölő, gomb) lebegő címkékkel.
  2. Készíts kapcsolatfelvételi űrlapot: név, e-mail, téma (lista), üzenet (textarea), adatkezelési jelölő. Minden mezőnek legyen összekötött címkéje!
  3. Tedd a kapcsolati űrlapot ellenőrzötté: kötelező mezők, e-mail formátum, hibaüzenetek invalid-feedback-kel.
  4. Próbáld ki az űrlapot csak billentyűzettel: eléred-e minden mezőt a Tab-bal, és látszik-e, hol a fókusz?

Válaszd a megfelelő mezőtípust (email, tel, number, date): telefonon ettől a megfelelő billentyűzet jelenik meg, és a böngésző is ellenőrizni tud. Az autocomplete attribútummal a böngésző automatikusan kitöltheti a mezőt. Ne kérj több adatot, mint amennyi feltétlenül szükséges.