1. semester

Tema 4: Grundlæggende UI

Grundlæggende brugerflader med HTML forms, semantik, styling og enkel JavaScript-interaktion

Hvad er HTML forms?

4 emner

Hvad er HTML forms?

Forstå hvad en formular er, hvad den bruges til, og hvilke dele den typisk består af.
Input-typer, radio og checkbox

Vælg den rigtige type input, og lær forskellen på radio buttons og checkboxes.
Labels, semantik og gruppering

Forbind labels og inputs, gruppér relaterede felter, og giv formularen mere mening.
Textarea, select og andre form-controls

Ikke alle formularfelter er inputs. Brug textarea og select når opgaven kræver det.

6 emner

Form UX: Grundregler

Start med de enkle regler: én kolonne, tydelige grupper og felter der passer til inputtet.
Labels, placeholders og fejlmeddelelser

Brug labels rigtigt, undgå at placeholders bliver instruktioner, og vis fejl tæt på feltet.
CSS starter og input styling

Form-controls kommer med mange browser-defaults. Derfor hjælper en lille CSS-starter meget.
Form layout

Brug struktur, grupper og simple layout-greb til at gøre formularer lettere at læse og bruge.
Fokus og brugerhandlinger

Brug fokus- og interaktionstilstande til at gøre formularer tydeligere for både mus og tastatur.
Validering og input states

Lad HTML beskrive kravene, og brug CSS pseudo-klasser til at vise om et felt er gyldigt eller ugyldigt.

3 emner

Webtilgængelighed og usynlige krav

Forms skal ikke kun se rigtige ud. De skal også hjælpe brugeren med krav, instruktioner og struktur.
WAI-ARIA og form-navngivning

Når HTML ikke kan sige nok alene, kan ARIA hjælpe. Men først skal grundstrukturen være på plads.
Forbind fejlbeskeder og instruktioner

Brug `id` og `aria-describedby` til at koble et inputfelt til de tekster, der forklarer og hjælper.

4 emner

JavaScript recap til forms

Få styr på de få JS-greb, der går igen i simple formular-øvelser.
Form events, submit og reset

Lyt efter submit, stop browserens standardadfærd og nulstil formularen, når du er færdig.
FormData og feltværdier

Brug `FormData` til at samle værdierne fra formularen og vis dem i outputfelter.
Checkboxes og getAll()

Når flere checkboxes deler samme `name`, kan du hente alle de valgte værdier med `getAll()`.

3 emner

color-scheme og light-dark()

Aktivér browserens light/dark-forståelse og brug `light-dark()` til at vælge farver.
Custom properties og farvetemaer

Brug custom properties til at samle dine tema-farver ét sted.
Manuelt temaskift med JavaScript

Brug en knap til at tilføje og fjerne en `dark`-klasse på `html`.

3 emner

Hvad er popover?

Popover er en indbygget måde at vise små overlays på uden at starte med en tung specialløsning.
Popover-attributter og struktur

Forstå samspillet mellem `popover`, `id` og `popovertarget`.
Styling og animation af popovers

Brug selectors som `[popover]` og `:popover-open` til at style og animere en popover.

3 emner

details og summary

Brug de indbyggede HTML-elementer `details` og `summary` til åbn/luk-indhold.
Fra details til accordion

Grupér flere `details`-elementer, så de opfører sig mere som en accordion.
Animér details-indhold

Brug `::details-content` og `interpolate-size` til blødere åbn/luk-overgange.