Formas

F-01–F-14 ievades, izvēles, validācija, meklēšana un formu izkārtojumi.

14 komponentesWCAG 2.2 AA

F-01 · F-02 · F-03 — Teksts, textarea un select

Redzama etiķete, autocomplete, palīgteksts un native select mobilajā.

DHAFXLE
Kā tas parādīsies sistēmā.
Maksimums 280 rakstzīmes. Skaitītājs ir dekoratīvs paraugā.
Rādīt koda paraugu
<label class="form-label" for="name">Vārds</label>
<input class="form-control" id="name" autocomplete="name">

F-04 · F-05 — Checkbox, radio un switch

Fieldset un legend sagrupē izvēles; switch lieto role="switch" un label.

DHAFXLE
Paziņojumu kanāli
Biežums
Slēdži
Rādīt koda paraugu
<div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="active"><label class="form-check-label" for="active">Aktīvs</label></div>

F-06 · F-07 — Faila augšupielāde un datums

Dropzone ir pieejama ar tastatūru; datuma lauks atbalsta manuālu ievadi.

DHAFXLE

Velciet failu šeit vai izvēlieties to

JPG, PNG vai WebP · līdz 2 MB

Formāts: dd.MM.yyyy

F-08 — Input group

Prefikss un sufikss paliek redzami un saistīti ar lauku. Mobilajā grupa pāriet jaunā rindā.

DHAFXLE
https://
EUR

F-09 · F-10 — Validācija un formu izkārtojums

Kļūdu kopsavilkums, inline kļūdas un sticky darbību josla. Demonstrācija izmanto drošu DOM API.

DHAFXLE
Ievadiet derīgu e-pasta adresi.
Obligātie lauki atzīmēti ar *

F-11 · F-12 — Meklēšana un filtri

Meklēšanas josla ir role="search"; filtri ir noņemami un atiestatāmi.

DHAFXLE
12 rezultāti
Statuss: Aktīvs Loma: Redaktors

F-13 · F-14 — Wizard un rich text

Stepper lieto aria-current="step"; redaktora rīkjoslā ir tastatūras pieejamas pogas.

DFXLE
  1. Pamatinformācija
  2. 2Piekļuve
  3. 3Apstiprinājums

F-02 — Automātisks augstums un skaitītājs

Textarea augstums seko saturam, bet skaitītājs paliek redzams un tiek paziņots tikai fokusā esošajam laukam.

DHAFXLE
Rakstiet īsi; teksts saglabājas melnrakstā.
0 / 280
Rādīt koda paraugu
<textarea class="form-control" maxlength="280" data-auto-grow data-counter="notes-count"></textarea><span id="notes-count">0 / 280</span>

F-03 — Meklējams select ar native fallback

Meklēšanai izmanto native datalist; grupētajam select vienmēr ir redzama etiķete un mobilajā paliek sistēmas vadīkla.

DHAFXLE
Native datalist ir fallback; produktā to var aizstāt ar uzlabotu select.
Rādīt koda paraugu
<input class="form-control" list="role-options" aria-describedby="role-help"><datalist id="role-options"><option value="Administrators"></option></datalist>

F-05 — Switch ar aprakstu

Switch lieto role=switch, redzamu label un aprakstošu palīgtekstu. Ieslēgtais stāvoklis ir arī tekstā.

DHAFXLE
Paziņojumi tiek sūtīti tikai par drošības un konta notikumiem.
Rādīt koda paraugu
<div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="alerts"><label class="form-check-label" for="alerts">Sūtīt paziņojumus</label></div>

F-10 — 1/2/3 kolonnas un sticky footer

Lauki plūst vienā, divās vai trijās kolonnās. Sticky footer paliek redzams garā formā un nemaina Tab secību.

DHAFXLE
Izmaiņas nav saglabātas
Rādīt koda paraugu
<div class="row g-3"><div class="col-md-6">…</div><div class="col-md-6">…</div></div><div class="form-actions form-actions--sticky">…</div>

F-11 · F-12 — Dzīvā meklēšana un filtri

Meklēšana ir debounced un notīrāma ar Esc vai pogu. Filtrus var noņemt atsevišķi vai atiestatīt vienā darbībā.

DHAFXLE
4 rezultāti
Statuss: Aktīvs Komanda: Platforma 2 aktīvi filtri
  • Jānis Bērziņšjanis.berzins@itlideris.lv · Platforma
    Aktīvs
  • Elīna Kalniņaelina.kalnina@itlideris.lv · Pārdošana
    Aktīvs
  • Mārtiņš Liepamartins.liepa@itlideris.lv · Dati
    Gaida
  • Anna Ozolaanna.ozola@itlideris.lv · Mārketings
    Aktīvs
Rādīt koda paraugu
window.App.search.init(); // search-field ar data-search, data-search-target un data-search-status