En besøgendes internet falder ud, mens din formular indlæses. En udvidelse til Chrome ødelægger dit JavaScript. En ældre browser understøtter ikke det JavaScript, du bruger. Deres skærmlæser kan ikke bruge din formular, fordi labels er skjult med CSS.
Formularer er kritiske veje. Brugerne skal kunne sende dem. Formularen må ikke bare gå i stykker. Progressiv forbedring er princippet om at bygge formularer, der virker overalt, og så tilføje forbedringer til de browsere, der kan klare dem.
Her gennemgår vi, hvordan du bygger formularer, der klarer sig pænt, når noget fejler, virker uden JavaScript og er tilgængelige for alle.
Hvad er progressiv forbedring?
Progressiv forbedring vil sige, at du starter med en enkel formular, der virker i de ældste browsere og uden JavaScript, og så lægger forbedringer oven på til moderne browsere. Lag 1 (HTML) giver en enkel formular med felter, labels og en knap til at sende, som ikke har brug for JavaScript og virker overalt. Lag 2 (CSS) giver formularen farver, afstande og layout, så formularen stadig virker, hvis CSS ikke indlæses, men den ser bare grim ud. Lag 3 (JavaScript) tilføjer validering i realtid, glidende animationer og afsendelse med AJAX, så formularen stadig virker, hvis JavaScript fejler, og bare sendes på den traditionelle måde. Hvis et lag fejler, får brugeren stadig en formular, der virker. Det er robusthed.
Grundlaget: HTML, der virker
Start med semantisk HTML med rigtige labels, fieldsets og legend-elementer. En grundformular ser sådan ud: <form action="/submit" method="POST"> <label for="email">E-mail</label> <input type="email" id="email" name="email" required> <label for="message">Besked</label> <textarea id="message" name="message" required></textarea> <button type="submit">Send</button> </form>. Den formular virker uden JavaScript, uden CSS, i gamle browsere, med skærmlæsere og med tastaturet. Det er dit grundlag. Fjern aldrig elementer fra DOM og erstat dem med elementer, JavaScript tegner, for hvis JavaScript fejler, går formularen i stykker. Behold den semantiske HTML.
Sådan klarer CSS sig pænt, når noget fejler
Læg forbedringer med CSS oven på HTML. Giv formularen et pænt udseende. Men hvis CSS fejler, skal formularen stadig virke.
Skjul ikke labels med CSS, og stol ikke kun på placeholders, for nogle gange indlæses CSS ikke, og skærmlæsere har brug for labels i HTML. Brug ikke CSS til at skjule, hvilke felter der er obligatoriske, for hvis din egen »stjerne« ikke indlæses, kan brugerne ikke se, hvilke felter der er obligatoriske. Brug i stedet HTML-attributten required. Undgå at skjule labelen visuelt og vise en placeholder i stedet med label { display: none; } og input::placeholder { content: 'E-mail'; }. Behold i stedet labelen i HTML, og giv den den stil, du vil, med label { font-weight: bold; color: #333; }.
Forbedringer med JavaScript, der klarer sig pænt
Tilføj forbedringer med JavaScript, men kun hvis formularen allerede virker. Brug registrering af funktioner til at tjekke, om browseren understøtter det, du skal bruge, med if (window._blocked_) { // Brug _blocked_ til afsendelse med AJAX } else { // Formularen sendes traditionelt }. Antag ikke, at funktioner findes. Antag, at de måske ikke gør. Tjek først.
Validering i realtid med en reserveløsning
Brug validering i HTML som grundlag med <input type="email" required>, så browseren validerer, når formularen sendes. Tilføj så validering med JavaScript, der kører i realtid, med input.addEventListener('blur', () => { if (!isValid(input.value)) { input.classList.add('invalid'); showError(input, 'Ugyldig e-mail'); } });. Den viser fejl, mens brugeren skriver, og hvis JavaScript fejler, virker browserens egen validering stadig. Brugeren får fordelen ved feedback i realtid, og hvis JavaScript fejler, får de feedback fra browseren, når de sender. Under alle omstændigheder bliver der valideret.
Afsendelse med AJAX og traditionel reserveløsning
Byg en traditionel formular, der sender til serveren, og opfang så afsendelsen og brug AJAX i stedet med form.addEventListener('submit', async (e) => { e.preventDefault(); const response = await _blocked_('/submit', { method: 'POST', body: new FormData(form) }); if (response.ok) { showMessage('Success'); } });. Hvis JavaScript fejler, kører preventDefault aldrig, formularen sendes på den traditionelle måde, og brugeren får en side, der genindlæses, i stedet for en glidende oplevelse. Men formularen virker.
Tilgængelighed som progressiv forbedring
Tilgængelighed er ikke en ekstra funktion. Det er grundlaget. Byg tilgængelige formularer.
Labels skal kobles til felter med attributterne for og id. Ikke data-attributter, ikke aria-labels, der kan blive glemt. Rigtige labels.
<label for="email">E-mail</label>
<input id="email">
Brug semantiske HTML-elementer (fieldset, legend, button, input). Ikke div'er, der er stylet til at ligne knapper.
Navigation med tastaturet skal virke. Tab gennem alle felter. Shift+Tab for at gå tilbage. Enter for at sende. Mellemrum for at sætte kryds. Det virker som standard med semantisk HTML. Ødelæg det ikke med JavaScript.
Når grundlaget virker, kan du tilføje ARIA-labels til skærmlæsere. Tilføj markering af fokus til dem, der bruger tastaturet. Men det er forbedringer oven på tilgængelig HTML.
Test for robusthed
Test din formular med JavaScript slået fra. Slå JavaScript fra i din browser, og prøv at sende. Hvis formularen går i stykker, er den ikke robust.
Test på langsomme netværk. Sæt din forbindelse ned til 2G. Hvis formularen er ekstremt længe om at indlæses, forlader besøgende med dårligt internet den.
Test med ældre browsere. Brug et værktøj til at teste i flere browsere, også en meget gammel, hvis du stadig skal understøtte den. Se, hvilke funktioner der ikke understøttes.
Test med skærmlæsere. Brug en skærmlæser på Windows eller Mac. Lyt til, hvordan formularen læses op. Hvis det ikke giver mening for en skærmlæser, så ret det.
Test kun med tastaturet. Brug ikke en mus. Kan du komme rundt i formularen? Kan du sende den?
Registrering af funktioner, ikke af browsere
Tjek ikke for bestemte browsere. Tjek for funktioner i stedet for at bruge registrering af browsere som if (navigator.userAgent.includes('Chrome')) { /* brug _blocked_ */ }. Brug i stedet registrering af funktioner som if (window._blocked_) { /* brug _blocked_ */ }. Registrering af funktioner er mere pålidelig, for en opdatering af browseren, der tilføjer understøttelse af _blocked_, virker med din kode, mens registrering af browsere ikke gør.
Sådan bygger WEMASY robuste formularer
WEMASY-formularer er bygget efter principperne for progressiv forbedring. De virker uden JavaScript, har labels og semantisk HTML på plads og har valgfrie forbedringer med JavaScript, så ældre browsere får en formular, der virker, og moderne browsere får glidende interaktioner.
Se funktioner til robusthed i din WEMASY-pakke.