Webformulieren, tabellen en media in HTML

Een formulier verzamelt samenhangende antwoorden en verstuurt die naar een URL. Het <form>-element omvat de bedieningselementen en de verzendknop. Houd afzonderlijke formulieren gescheiden: HTML staat geen formulier binnen een ander formulier toe.

Kies de bestemming en methode

action geeft de ontvangende URL op. Zonder dit attribuut gaat het verzoek naar de huidige pagina. method bepaalt hoe de browser de gegevens verstuurt; standaard is dat GET.

GET-gegevens kunnen verschijnen in de geschiedenis, bladwijzers en serverlogboeken. POST houdt ze buiten de querystring, maar versleutelt ze niet. Gebruik HTTPS om gegevens tijdens het verzenden te beschermen. Het serverprogramma ontvangt en verwerkt het verzoek; het HTML-formulier slaat antwoorden niet zelf op en e-mailt ze niet zelf.

Volg een zoekverzoek

<form action="/search" method="get">
  <label for="query">Search</label>
  <input id="query" type="search" name="q">
  <label for="language">Language</label>
  <select id="language" name="lang">
    <option value="en">English</option>
  </select>
  <button type="submit">Search</button>
</form>

Als de gebruiker “html tables” invoert, vraagt de browser /search?q=html+tables&lang=en op. Die neemt de veldnaam q en de huidige waarde, codeert de spatie als + en verbindt de twee paren met &. De ? begint de querystring.

Een bedieningselement heeft een name nodig om gegevens mee te sturen. De id heeft een ander doel: het element op de pagina identificeren, onder meer om een label te koppelen. Een invoerveld met id="query" maar zonder name kan er normaal uitzien en normaal werken, terwijl het geen antwoord aan het verzoek toevoegt.

Weet welke bedieningselementen gegevens meesturen

Een leeg tekstveld met een naam stuurt een lege waarde mee, zoals comment=. Een aangevinkt selectievakje stuurt zijn value mee; zonder waarde stuurt het on mee. Een niet-aangevinkt selectievakje stuurt niets mee. Een uitgeschakeld bedieningselement is niet beschikbaar en wordt weggelaten. Een ondersteund readonly veld kan niet worden bewerkt, maar stuurt zijn waarde wel mee.

Een verborgen invoerveld, zoals <input type="hidden" name="source" value="newsletter">, stuurt een waarde mee zonder zichtbaar bedieningselement. Die waarde is niet geheim: bezoekers kunnen die in ontwikkelaarstools bekijken en wijzigen.

Maak het gedrag van knoppen expliciet

Binnen een formulier verzendt een gewone <button> standaard het formulier. Schrijf type="submit" voor de verzendknop en type="button" voor een knop die een script nodig heeft. type="reset" herstelt de beginwaarden en kan het werk van een gebruiker wissen. Als je in een veld met één regel op Enter drukt, wordt het formulier ook vaak verzonden. <input type="submit" value="Send"> is een ander verzendelement; een <button> kan ook inline-inhoud bevatten, zoals een pictogram.

Verstuur de inhoud van een bestand

<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="attachment">Attachment</label>
  <input id="attachment" type="file" name="attachment">
  <button type="submit">Upload</button>
</form>

Voor een gewone bestandsupload zijn zowel POST als enctype="multipart/form-data" nodig. Met de standaardcodering van formulieren gaan bestandsnamen als tekst mee, maar de inhoud van de bestanden niet.

Een <input> is een leeg element en heeft dus geen inhoud en geen sluittag. Het type bepaalt het bedieningselement en de bijbehorende hulp van de browser. Ontbrekende of onbekende typen vallen terug op een tekstveld.

Stem tekst af op het doel

Een e-mailveld controleert de syntaxis, niet of een mailbox bestaat. Zelfs “ana@example” komt door de basissyntaxiscontrole. Voeg multiple toe om een lijst met adressen gescheiden door komma's te accepteren. Een URL-veld verwacht een URL-schema: “https://example.com” wordt geaccepteerd, “example.com” niet. Telefoonformaten verschillen, dus tel legt geen formaatregel op. Het verbergen van wachtwoorden voorkomt dat mensen in de buurt op het scherm kunnen meelezen; HTTPS zorgt nog steeds voor versleuteling tijdens de verzending.

Maak onderscheid tussen hoeveelheden en cijfercodes

Gebruik number voor een hoeveelheid, zoals een aantal of een massa. Het heeft vaak pijltjesknoppen om de waarde te verhogen of te verlagen. Gebruik range voor een instelling bij benadering, zoals volume; het standaardbereik is 0–100 en de standaardwaarde is 50.

Een lidmaatschapscode is geen hoeveelheid. Gebruik <input type="text" inputmode="numeric"> voor een cijfercode, zodat voorloopnullen tekst blijven en pijltjesknoppen de code niet veranderen. inputmode stelt alleen een schermtoetsenbord voor: het valideert de invoer niet. decimal, tel, email en url zijn andere nuttige toetsenbordaanwijzingen.

Houd weergave en verzonden formaat gescheiden

Datumkiezers volgen de regionale instellingen van de gebruiker. 15 maart 2026 kan verschijnen als “03/15/2026” of “15/03/2026”, maar de verzonden datum is 2026-03-15.

Deze bedieningselementen slaan geen tijdzone op. Als het van belang is, moet bij een lokale afspraaktijd de locatie of tijdzone dus apart worden toegelicht.

Bied onafhankelijke keuzes of één keuze aan

Selectievakjes zijn onafhankelijk: er kunnen er meerdere zijn aangevinkt. Keuzerondjes vormen een groep voor één keuze wanneer hun name-waarden overeenkomen. Geef elk keuzerondje een eigen value en gebruik checked voor een standaardkeuze.

<label><input type="radio" name="size" value="S"> Small</label>
<label><input type="radio" name="size" value="M" checked> Medium</label>
<label><input type="radio" name="size" value="L"> Large</label>

De standaardkeuze verstuurt size=M. Verschillende namen zouden afzonderlijke groepen maken en meerdere keuzes toestaan.

Kies kleuren en bestanden

color biedt een kleurkiezer en kan een RGB-kleur zoals #ff8800 versturen. file opent een bestandskiezer; accept=".pdf,image/*" stelt pdf's en afbeeldingen voor en multiple staat meerdere bestanden toe. Het filter helpt gebruikers bij het kiezen; de server moet het type en de inhoud van het ontvangen bestand nog steeds controleren. Bij bedieningselementen die het gebruiken, stelt value de beginwaarde in. Die blijft de verzonden waarde als de gebruiker niets verandert.

Een invoerveld met één regel past niet bij elk antwoord. Langere tekst heeft ruimte nodig, terwijl een vaste reeks keuzes bedieningselementen nodig heeft die laten zien wat is toegestaan. Bepaal voordat je het element kiest of de gebruiker iets buiten de keuzes mag invoeren.

Geef langere tekst een tekstgebied

<label for="message">Message</label>
<textarea id="message" name="message" rows="5" cols="40"></textarea>

rows geeft het zichtbare aantal regels en cols de breedte bij benadering in tekens. Geen van beide beperkt hoeveel tekst kan worden ingevoerd; gebruik maxlength voor een lengtebeperking. Begintekst hoort tussen de tags, niet in een value-attribuut. Spaties en regeleinden op die plaats worden onderdeel van de beginwaarde. Openings- en sluittags direct naast elkaar maken dus een echt leeg veld.

Verstuur een waarde uit een uitklaplijst

<label for="delivery">Delivery</label>
<select id="delivery" name="delivery" required>
  <option value="">Choose delivery</option>
  <option value="standard">Standard (3–5 days)</option>
  <option value="express">Express (next day)</option>
</select>

De keuze voor “Express (next day)” verstuurt delivery=express. De zichtbare tekst kan een keuze toelichten terwijl de value kort en stabiel blijft. Als een optie geen value heeft, wordt de tekst verstuurd. Voeg selected toe om een optie vooraf te selecteren. Hier heeft de eerste optie een lege waarde, zodat de verplichte lijst met één keuze pas kan worden verzonden nadat de gebruiker een bezorgmethode kiest.

Groepeer opties of sta meerdere opties toe

Een <optgroup label="Hot drinks"> geeft samenhangende opties een kop. Die kop is zelf geen keuze. Een select met multiple staat meerdere geselecteerde opties toe en size bepaalt het aantal zichtbare rijen. Elke geselecteerde waarde wordt een afzonderlijk paar met dezelfde naam: topics=html&topics=css.

Op een computer vereist meervoudige selectie vaak Ctrl-klik of Cmd-klik. Voor een korte lijst met onafhankelijke keuzes maken selectievakjes de selectie meestal duidelijker. Voor een korte lijst met één keuze houden keuzerondjes elke optie zichtbaar. Een select is handig voor een lange vaste lijst.

Geef suggesties zonder te beperken

<label for="city">City</label>
<input id="city" name="city" list="cities">
<datalist id="cities">
  <option value="Nairobi">
  <option value="Osaka">
</datalist>

De list van het invoerveld komt overeen met de id van de datalist. Gebruikers zien suggesties, maar mogen nog steeds een andere stad typen. Een datalist is daarom nuttig voor veelvoorkomende antwoorden op een open vraag. Als je een select door een datalist vervangt, verander je de toegestane keuzes; je verandert niet alleen het uiterlijk van dezelfde vaste lijst.

Toon voortgang of een meting

<progress> en <meter> tonen waarden in plaats van antwoorden te verzamelen. Een voortgangsbalk volgt hoever een taak is voltooid, zoals <progress value="70" max="100">70%</progress>. Een meetindicator toont een meting binnen een bekend bereik: <meter value="0.6">60%</meter> kan de gebruikte opslagruimte weergeven. Een meetindicator heeft standaard een bereik van 0–1, tenzij min en max dat veranderen. Tekst binnen deze elementen biedt terugvaltekst wanneer de balk niet kan worden getekend. Zet bij beide weergaven een verklarend label, zodat gebruikers weten wat het getal meet.

Een veld heeft een naam nodig die zichtbaar blijft terwijl de gebruiker het invult. Een gekoppeld <label> geeft het bedieningselement ook een toegankelijke naam voor schermlezers en maakt de tekst tot een groter klikdoel. Instructies leggen regels uit die het label alleen niet kan overbrengen.

Koppel het label aan het bedieningselement

<label for="email">Email address</label>
<input id="email" name="email" type="email" autocomplete="email">

De for van het label komt overeen met de id van het invoerveld, inclusief hoofdletters en kleine letters. De name bepaalt wat wordt verzonden en hoeft niet hetzelfde te zijn. Elke id moet uniek zijn op de pagina. Als for="email" naar een name verwijst maar er geen overeenkomstige id is, ziet het label er normaal uit maar is het niet gekoppeld.

Een andere mogelijkheid is om het invoerveld in het label te plaatsen:

<label>
  <input type="checkbox" name="news">
  Send me the monthly newsletter
</label>

Deze impliciete koppeling is handig voor een kort label bij een selectievakje. Een expliciet paar for en id werkt ook wanneer het label en het bedieningselement in de HTML van elkaar gescheiden zijn.

Houd labels gescheiden van voorbeelden

Een plaatsaanduiding zoals “name@example.com” verdwijnt zodra je begint te typen. Die kan ook moeilijk leesbaar zijn en is geen betrouwbare toegankelijke naam. Behoud het zichtbare label; gebruik een plaatsaanduiding alleen als kort voorbeeld wanneer dat helpt.

Markeer verplichte velden in woorden, zoals “Naam (verplicht)”, of leg een sterretje één keer boven het formulier uit. Kleur alleen kan niet iedereen vertellen wat verplicht is. Leg een formaat uit voordat gebruikers proberen het formulier te verzenden.

<label for="pw">Password (required)</label>
<input id="pw" name="password" type="password"
       required minlength="8" aria-describedby="pw-hint">
<p id="pw-hint">Use at least 8 characters.</p>

aria-describedby verwijst naar de id van de toelichting. Het voegt de instructie toe als beschrijving na de naam van het veld; het vervangt het label niet.

Geef een groep bedieningselementen een naam

<fieldset>
  <legend>Delivery speed</legend>
  <label><input type="radio" name="speed" value="standard"> Standard</label>
  <label><input type="radio" name="speed" value="express"> Express</label>
  <label><input type="radio" name="speed" value="pickup"> Pickup</label>
</fieldset>

Het groepsbijschrift geeft de gezamenlijke vraag; elk label benoemt een antwoord. Een veldengroep kan ook samenhangende adresvelden groeperen. Zet het groepsbijschrift eerst. disabled op een veldengroep schakelt de bedieningselementen daarin uit, behalve bedieningselementen binnen het eerste groepsbijschrift. Houd gewone formulieronderdelen buiten het groepsbijschrift, zodat deze uitzondering niet voor verrassingen zorgt.

Help browsers bekende gegevens in te vullen

autocomplete beschrijft het doel van informatie over de gebruiker. Waarden zijn onder meer name, email, tel, street-address, postal-code, country-name, bday, new-password, current-password en one-time-code. Correct opgegeven doelen ondersteunen het invullen van opgeslagen gegevens en WCAG 2.2-criterium 1.3.5, Identificeer het doel van de input (AA). autocomplete="off" is een verzoek; browsers kunnen nog steeds opgeslagen wachtwoorden aanbieden.

Gebruik voor een optioneel telefoonveld het label “Telefoonnummer (optioneel)” met type="tel", name="phone" en autocomplete="tel". Klik op het label om de focus te controleren en ga daarna met Tab door het formulier. Test elk label op deze manier, ook labels naast selectievakjes en keuzerondjes.

Ingebouwde validatie controleert de bedieningselementen van een formulier wanneer de gebruiker het verzendt. Een ongeldig bedieningselement blokkeert de verzending; de browser zet de focus op het eerste ongeldige veld en geeft een melding in de eigen taal. De browser kiest de exacte bewoording. Om die te veranderen is JavaScript nodig.

Maak een antwoord verplicht

required betekent dat een bedieningselement een waarde nodig heeft. Bij een tekstveld wordt een lege tekenreeks afgewezen. Bij een selectievakje betekent required dat juist dat vakje moet zijn aangevinkt, zoals bij het accepteren van voorwaarden. Als je bij keuzerondjes met dezelfde naam required op één rondje zet, moet één rondje in de groep zijn geselecteerd. Een verplichte select met één keuze en een lege eerste optie vereist een niet-lege keuze.

<label for="username">Username (required)</label>
<input id="username" name="username"
       required minlength="4" maxlength="12">

De browser combineert deze regels. Het veld moet een antwoord bevatten en door de gebruiker ingevoerde tekst moet binnen de lengtebeperkingen vallen. Als je type weglaat, krijg je het gewone tekstinvoerveld.

Tel de ingevoerde tekens

minlength bepaalt de kleinste toegestane lengte en maxlength de grootste. Spaties en leestekens tellen mee. De lengte wordt gemeten in UTF-16-code-eenheden, zodat sommige emoji als twee tellen; gewone Latijnse letters tellen elk als één.

In dit voorbeeld heeft “Li” twee tekens en voldoet het niet aan het minimum. “Lina” heeft er vier en wordt geaccepteerd. “mountainhiker” heeft 13 tekens. Bij gewoon typen stopt de browser na het twaalfde teken, zodat “mountainhike” overblijft. De breedte van een tekstveld bepaalt deze grens niet.

Behandel aanwezigheid en lengte als verschillende regels

Een optioneel veld met minlength="4" mag leeg zijn. De minimumlengte wordt gecontroleerd zodra de gebruiker een waarde opgeeft. Als je required toevoegt, wordt ook een lege invoer afgewezen. Dit is van belang voor een optionele bijnaam: een gebruiker mag die weglaten, maar een opgegeven bijnaam moet nog steeds genoeg tekens hebben.

required is een booleaans attribuut. De aanwezigheid schakelt het in, ook bij required="false". Verwijder het attribuut om het veld optioneel te maken. Dezelfde aanwezigheidsregel geldt voor veel andere HTML-schakelaars.

Weet wat deze controles niet bepalen

Een reeks spaties is nog steeds inhoud in een tekstveld. required accepteert die daarom en de spaties tellen ook mee voor de lengte. Voor een regel die een zichtbaar teken vereist, is een geschikt patroon of een controle op de server nodig. Vertel gebruikers niet dat required alleen een betekenisvol antwoord garandeert.

Lengtebeperkingen hangen ook af van de manier waarop de waarde is ingevoerd. Een beginwaarde in de HTML of een waarde die door een script is ingesteld, wordt niet door minlength of maxlength als ongeldig aangemerkt alleen omdat die te kort of te lang is. Een correcte standaardwaarde blijft belangrijk, ook als gewoon typen wordt beperkt.

Om dit veld te controleren, probeer je een lege verzending en voer je daarna twee letters, vier letters en meer dan 12 letters in. Elke poging onderzoekt een andere regel. Wanneer de browser bij de limiet stopt met typen, lees je welke waarde werkelijk in het veld is achtergebleven in plaats van aan te nemen dat de volledige invoerpoging is geaccepteerd.

Een getal of datum kan het juiste formaat hebben en toch ongeschikt zijn. min en max bepalen de grenzen; step bepaalt welke stappen daarbinnen zijn toegestaan. Een getal moet aan beide controles voldoen.

Stel het bereik in

<label for="weight">Parcel weight (kg)</label>
<input id="weight" name="weight" type="number"
       min="0.5" max="30" step="0.5">

De eindpunten zijn inbegrepen. Waarden van 0,5 tot en met 30 kg liggen binnen het bereik, maar moeten ook op stappen van een halve kilogram uitkomen. Vanaf 0,5 krijg je 0,5; 1; 1,5 enzovoort tot en met 30: 60 toegestane waarden. Een invoer van 31 overschrijdt het maximum; 2,25 ligt binnen het bereik maar voldoet niet aan de stapgrootte.

Zoek het beginpunt voordat je telt

Stappen worden vanaf min geteld als dat aanwezig is. Anders worden ze geteld vanaf een geldig HTML-attribuut value en daarna vanaf de standaardbasis van het type. Voor number is die standaardbasis 0. De standaardstap is 1.

Bij min="1" step="2" zijn de geaccepteerde waarden 1, 3, 5, 7 enzovoort. Vier wordt afgewezen, ook al is het een veelvoud van twee, omdat de reeks bij één begint. Bij min="0.5" zonder step-attribuut is de stap nog steeds één: 0,5; 1,5 en 2,5 worden geaccepteerd, maar 1 en 2 niet.

Als noch min noch een value-attribuut een andere basis geeft, accepteert een standaard getalveld gehele getallen. Gebruik step="0.01" voor stappen van een honderdste of step="any" om de stapcontrole uit te schakelen. any verwijdert het minimum of maximum niet.

Gebruik de juiste eenheden voor datums en tijden

Een datuminvoerveld met min="2026-06-01" max="2026-08-31" accepteert datums in dat gesloten interval. Schrijf de attributen in het verzonden formaat, ook als de kiezer een andere datumvolgorde toont.

Voor afspraken gebruikt type="time" min="09:00" max="17:00" step="900" 900 seconden, ofwel 15 minuten, per stap. De reeks begint om 09.00 uur en eindigt om 17.00 uur. Er zijn 32 tussenpozen en 33 selecteerbare tijden, inclusief beide eindpunten.

Maak onderscheid tussen invoer en opgeslagen waarde

Sommige browsers die aan de taal zijn aangepast, staan decimale invoer als “2,5” toe, maar versturen 2.5. Tekst die geen getal is, wordt geblokkeerd of laat de getalwaarde leeg, afhankelijk van de browser. Een optioneel leeg invoerveld is nog steeds toegestaan tenzij required aanwezig is.

Een range-schuifregelaar blijft binnen het toegestane bereik en springt naar de stappen, zodat gebruikers niet dezelfde bereik- en stapfouten tegenkomen als bij een getypt getal. Daarnaast worden niet-lege email- en url-velden ook zonder required op type gecontroleerd: een optioneel antwoord wordt niet geldig als het verkeerd is opgemaakt.

Een patroon is nuttig wanneer een organisatie een exact tekstformaat vastlegt, zoals een productcode. De browser toetst de volledige niet-lege waarde aan het patroon. Leg het formaat naast het veld uit, zodat gebruikers eraan kunnen voldoen voordat een fout verschijnt.

Bouw een klein patroon

<label for="code">Product code (required)</label>
<input id="code" name="code" required
       pattern="[A-Z]{3}-[0-9]{4}" aria-describedby="code-hint">
<p id="code-hint">Use 3 capital letters, a hyphen, and 4 digits (ABC-1234).</p>

[A-Z] komt overeen met één Latijnse hoofdletter en {3} herhaalt die precies drie keer. Het koppelteken buiten de tekengroepen is letterlijk. [0-9]{4} vereist vier cijfers. “ABC-1234” wordt geaccepteerd. “abc-1234”, “ABC1234” en “ABC-12345” overtreden elk een ander deel van de regel.

Patronen worden aan de volledige waarde getoetst, dus extra tekst aan het begin of einde wordt afgewezen. Voeg niet de omringende schuine strepen toe die in reguliere expressies van JavaScript worden gebruikt. pattern is van toepassing op tekstachtige invoervelden zoals text, search, tel, email, url en password, niet op een tekstgebied. Lege waarden slaan de patrooncontrole over; required behandelt een leeg antwoord.

Schrijf letterlijke leestekens zorgvuldig

Tekens zoals ., + en ? hebben een speciale betekenis. Zet er een backslash voor als ze letterlijk moeten voorkomen: \. komt overeen met een punt. Binnen een tekengroep vereisen moderne HTML-patronen ook een backslash voor leestekens zoals een letterlijk koppelteken: [a-z0-9\-]. Dit koppelteken verschilt van het koppelteken dat het bereik a-z bepaalt.

Een ongeldig patroon wordt genegeerd. Andere regels, waaronder required en typecontroles, worden nog steeds uitgevoerd. Test een patroon met zowel invoer die moet worden geaccepteerd als invoer die moet worden afgewezen; een formulier dat één verwachte waarde verzendt, heeft nog niet laten zien dat het patroon iets afwijst.

Leg de regel en de fout uit

Zet zichtbare toelichting naast het bedieningselement. Een title kan bijdragen aan sommige browsermeldingen; houd de formaatinstructie zichtbaar naast het veld. Vermijd starre patronen voor namen, telefoonnummers of postcodes, tenzij het toegestane formaat echt vastligt; geldige internationale antwoorden kunnen sterk verschillen.

CSS biedt :valid en :invalid voor de huidige validatiestatus van een veld. :user-invalid stelt de ongeldige toestand uit tot na interactie van de gebruiker, zodat een onaangeraakt formulier niet vol foutopmaak staat. Combineer kleuren met woorden of een pictogram, zodat het onderscheid ook zichtbaar blijft zonder kleurwaarneming.

Bepaal wanneer controles worden uitgevoerd

novalidate op het formulier slaat de validatie door de browser tijdens verzending over. formnovalidate op één verzendknop slaat de validatie voor die knop over. Dat kan een knop “Concept opslaan” naast een gewone knop “Verzenden” ondersteunen. Browsercontroles kunnen ook met ontwikkelaarstools worden verwijderd of met een direct verzoek worden omzeild. De server moet binnenkomende gegevens opnieuw controleren voordat die worden vertrouwd.

Gebruik een tabel wanneer een waarde afhangt van zowel de rij als de kolom: een trainingslogboek, een rooster of een vergelijking van metingen. Gebruik CSS voor de pagina-indeling. Een lay-out van tabelcellen creëert voor schermlezers misleidende relaties tussen rijen en kolommen en past zich slecht aan smalle schermen aan.

Bouw de structuur op vanuit de gegevens

<table> bevat de tabel, <tr> een rij, <th> een kopcel en <td> een gegevenscel. Cellen worden binnen elke rij van links naar rechts geschreven. Een vetgedrukte gegevenscel blijft een gegevenscel; gebruik <th> om een kop aan te geven.

<table>
  <caption>Running log, week 12</caption>
  <thead>
    <tr>
      <th scope="col">Day</th>
      <th scope="col">Distance (km)</th>
      <th scope="col">Time (min)</th>
    </tr>
  </thead>
  <tbody>
    <tr><th scope="row">Monday</th><td>5.0</td><td>28</td></tr>
    <tr><th scope="row">Wednesday</th><td>7.5</td><td>45</td></tr>
    <tr><th scope="row">Saturday</th><td>10.0</td><td>62</td></tr>
  </tbody>
  <tfoot>
    <tr><th scope="row">Total</th><td>22.5</td><td>135</td></tr>
  </tfoot>
</table>

Het tabelbijschrift is het eerste element binnen de tabel. Het vertelt lezers wat de hele tabel beschrijft voordat ze de waarden tegenkomen. Een kop in de buurt kan visueel helpen, maar het tabelbijschrift koppelt de titel aan de tabel zelf.

Koppel elke waarde aan de bijbehorende koppen

scope="col" geeft aan dat een kopcel van boven naar beneden op een kolom van toepassing is. scope="row" geeft aan dat die op een rij van toepassing is. De waarde 7,5 hoort dus bij de rij “Woensdag” en de kolom “Afstand (km)”. Een schermlezer kan die volledige betekenis aankondigen in plaats van een los getal.

Zet eenheden in de kolomkoppen, zodat ze consequent gelden. Elke afstand is hier in kilometers; elke tijd is in minuten. De totale afstand komt van 5,0; 7,5 en 10,0 en is 22,5 km. De tijden 28, 45 en 62 geven 135 min.

Geef elke groep een rol

<thead> groepeert koprijen, <tbody> de hoofdgegevens en <tfoot> het overzicht na de gegevensrijen. Deze groepen beschrijven de structuur en bieden aanknopingspunten voor CSS. Browsers plaatsen een <tbody> om gewone rijen die direct binnen een tabel zijn geschreven, zodat de weergegeven structuur kan verschillen van de bron zonder groepen.

Controleer zowel de betekenis als het uiterlijk

Elke rij beslaat hier drie kolommen. Als je een gegevenscel weglaat, weet de browser niet welke waarde binnen de rij ontbreekt: latere cellen kunnen onder de verkeerde kop komen te staan. Schrijf de cellen op de juiste plaats en gebruik “0” voor een bekende nul of “n.v.t.” wanneer een waarde niet van toepassing is. Bij een onverklaarde lege cel moeten lezers raden.

Tabellen hebben standaard geen randen. Voor eenvoudige lijnen pas je border: 1px solid toe op de cellen en border-collapse: collapse op de tabel. Het oude border-attribuut is verouderd. Een rand helpt het raster zichtbaar te maken, maar kan ontbrekende relaties met kopcellen niet aanvullen of een verkeerd geplaatste waarde corrigeren.

Met samengevoegde cellen kan één gegeven meerdere posities in het raster beslaan. Ze veranderen hoeveel nieuwe cellen een rij nodig heeft, dus plan de bezette posities voordat je de tags schrijft.

Tel de posities in een rooster met samengevoegde cellen

Neem drie kolommen: “Tijd”, “Maandag” en “Dinsdag”. Om 09.00 uur staat op maandag “Formulieren” en op dinsdag “Tabellen”. Om 10.00 uur begint op maandag “Validatie”, dat doorloopt in de rij van 11.00 uur. Op dinsdag staat om 10.00 uur “Media” en om 11.00 uur “Inbeddingen”. Om 12.00 uur beslaat “Lunchpauze” beide dagen.

<tr>
  <th scope="row">10:00</th>
  <td rowspan="2">Validation</td><td>Media</td>
</tr>
<tr>
  <th scope="row">11:00</th><td>Embeds</td>
</tr>
<tr>
  <th scope="row">12:00</th><td colspan="2">Lunch break</td>
</tr>

Om 11.00 uur is de positie voor maandag al bezet door de cel erboven. De enige nieuwe cellen zijn de tijdkop en het gegeven voor dinsdag. Als je nog een cel voor maandag toevoegt, wordt de laatste waarde naar een vierde kolom verschoven. Om 12.00 uur beslaat de tijdkop één kolom en de lunchcel twee, samen dus drie.

colspan beslaat kolommen horizontaal; rowspan beslaat rijen verticaal. Beide hebben standaard de waarde één. Tel bij het controleren van een rij de posities die door nieuwe cellen en door overspanningen uit eerdere rijen zijn gevuld.

Beschrijf groepen kolommen

<colgroup> en <col> beschrijven kolommen en staan na het tabelbijschrift maar vóór de rijgroepen. <col span="2"> vertegenwoordigt twee kolommen. Slechts een beperkt aantal stijlen is via deze elementen van toepassing, waaronder achtergronden, breedte, zichtbaarheid en randen volgens de geldende regels voor tabelranden. Ze vervangen geen kopcellen.

Voor “Afstand (km)” boven twee kolommen met de namen “Gepland” en “Werkelijk” definieer je die twee kolommen als groep. Geef de bovenste kopcel colspan="2" scope="colgroup"; geef de onderste kopcellen scope="col". De overspanning bepaalt de breedte, terwijl scope de relatie met de kopcel aangeeft. Een toepassingsbereik voor een kolomgroep heeft een bijpassende kolomgroep in de tabelstructuur nodig.

Koppel kopcellen zo nodig expliciet

Voor relaties die scope niet duidelijk kan uitdrukken, geef je kopcellen unieke ID's en vermeld je die in het headers-attribuut van de gegevenscel:

<table>
  <caption>Monday distance plan</caption>
  <colgroup></colgroup>
  <colgroup span="2"></colgroup>
  <thead>
    <tr>
      <th rowspan="2" scope="col">Day</th>
      <th id="distance" colspan="2" scope="colgroup">Distance (km)</th>
    </tr>
    <tr>
      <th id="planned" scope="col">Planned</th>
      <th id="actual" scope="col">Actual</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th id="mon" scope="row">Monday</th>
      <td headers="mon distance planned">8</td>
      <td headers="mon distance actual">7.5</td>
    </tr>
  </tbody>
</table>

De geplande waarde 8 verwijst naar Maandag, Afstand (km) en Gepland. De werkelijke waarde 7,5 deelt de rij- en groepskoppen, maar verwijst naar Werkelijk. De namen, gescheiden door spaties, moeten overeenkomen met de ID's van de kopcellen, niet met hun zichtbare tekst.

De abbr van een kopcel kan een kortere tekst bieden om te herhalen, zoals <th abbr="Distance">Distance covered in kilometers</th>. Sommige schermlezers gebruiken die kortere vorm. Als veel overspanningen of drie kopniveaus een tabel moeilijk te volgen maken, splits je de gegevens op in eenvoudigere tabellen met elk een eigen tabelbijschrift. Plaats liever geen tabel binnen een cel van een andere tabel.

<video> en <audio> koppelen mediabestanden aan een pagina. De browser downloadt die afzonderlijke bestanden; de video of het geluid wordt niet in de HTML opgeslagen. Door controls toe te voegen, maak je de afspeelknoppen, pauzeknop, tijdlijn en volumeregeling van de browser zichtbaar.

<video src="intro.mp4" controls width="640" height="360"
       poster="intro-poster.jpg" preload="metadata"></video>
<audio src="episode-12.mp3" controls></audio>

Zonder afspeelbediening heeft een audio-element geen zichtbare speler en een video geen zichtbare afspeelknop. Een pagina heeft dan bediening met een script nodig om gebruikers die toegang te geven. Behoud voor een eenvoudige pagina de ingebouwde afspeelbediening.

Reserveer de juiste vorm

width en height accepteren gewone getallen in CSS-pixels. Ze reserveren ruimte terwijl een video laadt en verminderen zo het verspringen van de pagina. Een video van 1920 × 1080 die met een breedte van 640 wordt getoond, heeft een bijpassende hoogte van 360: de breedte is door drie gedeeld, dus de hoogte moet ook door drie worden gedeeld. Een anders gevormde spelersbox behoudt de verhoudingen van het beeld en voegt lege banden toe.

poster biedt een stilstaand beeld vóór het afspelen. Zonder posterafbeelding wacht de browser op mediagegevens voordat die het eerste beeld kan tonen. De posterafbeelding is nuttig wanneer weinig of geen video vooraf wordt geladen.

Bepaal hoeveel je vooraf laadt

Dit zijn aanwijzingen: de browser mag ervan afwijken. Automatisch afspelen heeft ook voorrang op vooraf laden. none is nuttig voor lange media die veel bezoekers niet zullen bekijken; metadata helpt de duur te tonen zonder bewust de volledige video op te halen.

Begrijp de afspeelschakelaars

controls, autoplay, muted, loop en playsinline zijn booleaanse attributen. Hun aanwezigheid schakelt ze in: muted="false" start nog steeds met gedempt geluid. Verwijder het attribuut om het uit te schakelen.

Automatisch afspelen met geluid wordt vaak geblokkeerd totdat de gebruiker interactie heeft gehad, afhankelijk van de machtigingen en instellingen van de browser. Gedempte video wordt vaker toegestaan; Safari op de iPhone heeft voor dit gebruik ook playsinline nodig. Een geluidloze herhalende video kan autoplay muted loop playsinline gebruiken. loop start de video opnieuw na het einde. Vertrouw niet op automatisch afspelen om essentiële informatie over te brengen.

Automatisch geluid kan een schermlezer overstemmen en beweging kan afleiden. WCAG 2.2-criterium 1.4.2 (A) vereist een manier om automatische audio die langer dan drie seconden duurt te pauzeren of te stoppen, of het volume ervan onafhankelijk te regelen. Criterium 2.2.2 (A) gaat over automatisch bewegende inhoud die langer dan vijf seconden naast andere inhoud aanwezig is, tenzij de beweging essentieel is. Zorg voor een beschikbare pauzemogelijkheid; de ingebouwde afspeelbediening biedt die bij deze mediaspelers.

Schat het dataverbruik

Een video van twee minuten met 5 megabit per seconde bevat 600 megabit. Gedeeld door acht is dat ongeveer 75 megabyte vóór extra overhead. Kortere video's en een passende aanwijzing voor vooraf laden verminderen onnodige gegevensoverdracht. De iframe-speler van een gehost platform kan de levering van de server van je website naar een andere aanbieder verplaatsen, maar bezoekers downloaden de media nog steeds wanneer ze kijken.

Een media-extensie geeft de container aan, de bestandsstructuur die beeld en geluid bevat. Codecs comprimeren en decoderen de stromen daarin. Een browser moet zowel de container als de codecs ondersteunen; een extensie .mp4 alleen zegt niet wat erin zit.

Kies geschikte formaten

MP4 met H.264-video en AAC-audio is een breed ondersteunde keuze op gangbare huidige systemen. WebM met VP9- of AV1-video en Opus-audio wordt ook breed ondersteund en kan bij een bepaalde kwaliteit de bestandsgrootte verkleinen. Voor audio is MP3 een breed ondersteunde keuze als je één formaat gebruikt. Ondersteuning hangt nog steeds af van de daadwerkelijke codec en het systeem van de gebruiker, dus test de bestanden zelf.

Bied bronnen in voorkeursvolgorde aan

<video controls width="640" height="360" poster="tour.jpg">
  <source src="tour.webm" type="video/webm">
  <source src="tour.mp4" type="video/mp4">
  <p>Your browser cannot play this video.
    <a href="tour.mp4">Download the tour video (MP4)</a>.
  </p>
</video>
<p><a href="tour.mp4">Download the tour video (MP4)</a></p>

De browser probeert de onderliggende bronnen op volgorde en gebruikt de eerste die kan worden afgespeeld. Hier heeft WebM de voorkeur; MP4 biedt een alternatief als WebM niet kan worden afgespeeld. Laat src weg op de <video> zelf wanneer je onderliggende bronnen gebruikt. Een src op het media-element heeft voorrang en de lijst met onderliggende bronnen wordt genegeerd.

Het type is een MIME-type dat het bestand beschrijft. Daarmee kan de browser een niet-ondersteund formaat overslaan zonder eerst mediagegevens op te halen. Door een verkeerd type kan een afspeelbaar bestand worden overgeslagen, dus de declaratie moet overeenkomen met het daadwerkelijke bestand. Dezelfde niet-ondersteunde codering onder een andere naam vermelden levert geen ondersteund alternatief op.

Zet de terugvalmogelijkheid op een bereikbare plek

Inhoud binnen <video> is terugvalinhoud voor een browser die het video-element niet herkent. Een moderne browser die het wel herkent maar geen enkele bron kan afspelen, toont die binnenste alinea niet als algemene foutmelding. De afzonderlijke downloadlink buiten de speler blijft in dat geval beschikbaar. Een terugvallink en alternatieve bronnen lossen verschillende problemen op.

Pas hetzelfde patroon toe op audio

<audio controls>
  <source src="episode-12.opus" type="audio/ogg; codecs=opus">
  <source src="episode-12.mp3" type="audio/mpeg">
  <p>Your browser cannot play this audio.</p>
</audio>
<p><a href="episode-12.mp3">Download episode 12 (MP3)</a></p>

Dit eerste bestand gebruikt een Ogg-container met Opus-audio. Het MP3-alternatief gebruikt audio/mpeg, het juiste MIME-type voor MP3. De browser kan niet uit de terugvalalinea afleiden dat die van bestand moet wisselen; source-elementen bieden die keuze. Controleer bij het nakijken van de pagina de paden, de daadwerkelijke bestandsformaten en het afspelen, en controleer daarna afzonderlijk of de externe downloadlink werkt.

Mensen hebben een andere toegang tot informatie in media nodig als ze die niet kunnen horen of zien. Ondertiteling voor doven en slechthorenden bevat spraak, sprekers en betekenisvolle geluiden. Dialoogondertiteling schrijft of vertaalt de dialoog voor mensen die de audio horen maar hulp nodig hebben om die te begrijpen. Een transcript geeft spraak en belangrijke geluiden als tekst bij de speler of via een duidelijk benoemde link in de buurt. Audiodescriptie beschrijft belangrijke visuele informatie.

Koppel een ondertitelspoor

<video controls>
  <source src="intro.mp4" type="video/mp4">
  <track kind="captions" src="intro.en.vtt"
         srclang="en" label="English" default>
</video>
<p><a href="intro-transcript.html">Read the introduction transcript</a></p>

Plaats <track> na de bronnen. src verwijst naar een tekstspoorbestand, kind geeft het doel aan, srclang de taal en label levert de menutekst van de speler. Een spoor met dialoogondertiteling moet srclang hebben; neem het ook op voor ondertiteling voor doven en slechthorenden. Slechts één spoor mag default hebben. Zonder kind is de standaardwaarde subtitles.

Schrijf het ondertitelbestand

WebVTT is UTF-8-tekst die wordt opgeslagen met de extensie .vtt. De eerste regel is WEBVTT, gevolgd door een lege regel. Elk tekstsegment heeft daarna een tijdregel en tekst, met een lege regel vóór het volgende segment. Een optionele identificatie kan vóór de tijdregel van een segment staan.

WEBVTT

00:00:01.000 --> 00:00:04.500
MAYA: Welcome to the workshop.

00:00:05.000 --> 00:00:07.250
[door closes]

00:00:07.500 --> 00:00:11.000
MAYA: Let's build our first form.

Het eerste tekstsegment duurt 3,5 seconden, het tweede 2,25 seconden en het derde 3,5 seconden. Het geluidssegment brengt iets over wat een luisteraar hoort, ook al spreekt er niemand.

Houd de tijdsyntaxis exact

Minuten en seconden gebruiken twee cijfers; milliseconden gebruiken er drie na een punt. Uren mogen worden weggelaten: 01:05.000 betekent één minuut en vijf seconden. Het einde moet later zijn dan het begin. Een lege regel beëindigt een tekstsegment, dus houd alle tekst ervan bij elkaar zonder lege regel ertussen.

SRT gebruikt tijdsaanduidingen met een komma, zoals 00:00:01,000; een spoor heeft in plaats daarvan WebVTT nodig. Voor de omzetting zijn de WebVTT-header en tijdsaanduidingen met punten nodig, en moet je de rest van de tekstsegmenten op geldige syntaxis controleren. Alleen de extensie .srt hernoemen zet de inhoud niet om.

Controleer levering en toegankelijkheid

Houd het spoor op dezelfde oorsprong als de pagina: hetzelfde URL-schema, dezelfde host en dezelfde poort. Een spoor van een andere oorsprong heeft een geschikte crossorigin-instelling op de video en toestemming van die server nodig. Anders kan een correct bestand toch niet laden.

WCAG 2.2-criterium 1.2.2 (A) vereist ondertiteling voor doven en slechthorenden bij vooraf opgenomen video met audio, behoudens de uitzondering voor media-alternatieven. Criterium 1.2.1 (A) vereist een alternatief voor vooraf opgenomen inhoud met alleen audio, zoals een transcript voor een podcast. Controleer automatische ondertiteling vóór publicatie op namen, vaktermen, wisselingen van spreker en geluiden.

Andere spoortypen zijn descriptions, chapters en metadata. Browserspelers tonen die doorgaans niet als gewone ondertiteling. Zet essentiële zichtbare instructies niet in een metadataspoor in de verwachting dat ze op het scherm verschijnen.

Een <iframe> is een inlineframe: het toont een afzonderlijke webpagina binnen de huidige pagina. Dat document heeft eigen HTML, CSS en scripts. De stijlen van je pagina kunnen de afmetingen van het frame bepalen, maar geven de inhoud van een ander document daarin niet vorm.

Begin met een duidelijk frame met afmetingen

<iframe src="https://maps.example.com/venue"
        title="Map of the venue"
        width="600" height="400" loading="lazy"></iframe>
<p><a href="https://maps.example.com/venue">Open the venue map</a></p>

src geeft de te laden pagina aan. De titel vertelt een schermlezergebruiker wat er in het frame staat voordat die het binnengaat. “Kaart van de locatie” beschrijft het doel; “iframe” of “inhoud” niet. De directe link biedt een andere route als de browser van de bezoeker het frame blokkeert.

width en height accepteren gewone getallen in CSS-pixels. Zonder deze attributen is het standaardframe 300 × 150 CSS-pixels. Browsers tekenen ook een standaardrand. Geef die vorm met CSS in plaats van met het verouderde attribuut frameborder.

Pas aangeboden inbedcode aan

Kaart- en videodiensten bieden meestal een inbedfragment aan bij hun deelknoppen. Inspecteer na het plakken de URL, verbeter de titel, controleer de afmetingen en verwijder verouderde opmaakattributen. Een iframe-URL is het adres van een pagina of speler van een dienst, niet per se van een rechtstreeks mediabestand.

Gebruik HTTPS voor het ingesloten adres. Een HTTP-frame binnen een HTTPS-pagina is actieve gemengde inhoud en wordt geblokkeerd. Alleen een titel schrijven of de afmetingen van het frame veranderen kan een onveilige URL niet laten laden.

Laad op een geschikt moment

loading="lazy" stelt het laden van een frame uit totdat het dicht bij de viewport is. Dat bespaart werk bij het openen van de pagina voor bijvoorbeeld een kaart ver onderaan. De standaardwaarde eager begint direct met laden. Gebruik direct laden voor een prominente inbedding bovenaan, zodat bezoekers niet op de hoofdinhoud hoeven te wachten. Uitgesteld laden verandert het tijdstip; het neemt het netwerkcontact niet weg wanneer het frame uiteindelijk laadt.

Om een speler in de container te laten passen, kan CSS de breedte op 100% zetten en de vorm behouden:

iframe.video-player {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

Pas class="video-player" toe op het betreffende iframe. De HTML-afmetingen bieden nog steeds begininformatie, terwijl CSS de weergegeven grootte bepaalt.

Herken een weigering van een aanbieder

Een website kan inbedding verbieden via de HTTP-antwoordheader X-Frame-Options of een Content Security Policy-regel frame-ancestors. De browser kan een leeg frame of een fout tonen. Deze beperkingen helpen clickjacking te voorkomen, waarbij een misleidende ingesloten pagina klikken opvangt die voor iets anders waren bedoeld.

De HTML van je pagina kan de weigering van de andere website niet opheffen. Gebruik het toegestane inbedadres van de aanbieder als die er een biedt; geef anders een gewone link. Behoud die link ook voor toekomstige problemen: als een aanbieder inhoud verwijdert of verplaatst, kan een ongewijzigd iframe op je pagina stoppen met werken.

Een inbedding van een derde partij neemt contact op met de aanbieder wanneer de ingesloten inhoud laadt, zelfs voordat een bezoeker op afspelen drukt. Dat verzoek onthult informatie zoals een IP-adres en kan cookies gebruiken. Bepaal of de pagina dat contact direct nodig heeft en welke toegang het ingesloten document nodig heeft.

Stel contact uit wanneer dat passend is

Uitgesteld laden stelt een frame buiten beeld uit totdat het bijna op het scherm verschijnt. Een voorbeeld dat een inbedding pas na een klik laadt, geeft bezoekers een directere keuze. Sommige diensten bieden ook modi met verbeterde privacy. Een frame van dezelfde website neemt niet vanzelf contact op met een andere aanbieder; rechtstreeks opgenomen srcdoc voorkomt het ophalen van een afzonderlijke pagina, al kunnen bronnen waarnaar die HTML verwijst nog steeds netwerkverzoeken doen.

Beperk documentgedrag met sandbox

<iframe src="https://quiz.example.com/start"
        title="Practice quiz"
        sandbox="allow-scripts allow-forms"></iframe>

Een lege sandbox past alle beperkingen toe, waaronder het blokkeren van scripts, formulierverzending en pop-ups, en kent een ondoorzichtige oorsprong toe. Tokens heffen geselecteerde beperkingen op. Hier mag de quiz scripts uitvoeren en formulieren verzenden, maar allow-popups is niet toegekend. Voeg alleen tokens toe die de inhoud nodig heeft; anders kan een gekopieerde lijst met machtigingen nuttige beperkingen ongedaan maken.

allow-same-origin laat het document zijn normale oorsprong behouden. Combineer dit niet met allow-scripts voor ingesloten inhoud van je eigen oorsprong: door die combinatie kan het document mogelijk zijn sandbox verwijderen. Een sandbox betekent ook niet dat een frame geen netwerkverzoeken doet.

Verleen browserfuncties afzonderlijk

allow is een machtigingenbeleid voor functies zoals volledig scherm, beeld-in-beeld, camera en microfoon. Een videospeler kan allow="fullscreen; picture-in-picture" vragen. Die heeft geen cameratoegang nodig alleen omdat de speler video bevat. Het oudere allowfullscreen verleent ook toegang tot volledig scherm.

Sandbox-tokens regelen het gedrag van het document; functiemachtigingen beantwoorden een andere vraag. Toegang tot volledig scherm verlenen laat een pagina in een sandbox niet vanzelf een formulier verzenden of een script uitvoeren.

Beheer het verwijzende adres en rechtstreeks opgenomen inhoud

referrerpolicy="no-referrer" laat het adres van de verwijzende pagina weg uit het verzoek. Bij het gebruikelijke standaardbeleid verstuurt een HTTPS-verzoek naar een andere oorsprong de oorsprong in plaats van het volledige pad; verzoeken naar een minder veilige verbinding versturen geen verwijzend adres. Dit regelt één header, niet alle informatie die een aanbieder ontvangt.

srcdoc levert de HTML van het frame rechtstreeks aan en heeft voorrang op src:

<iframe title="Message preview" sandbox
        srcdoc="<p>Preview of your message</p>"></iframe>

De sandbox houdt dit kleine voorbeeld beperkt. Bij algemenere HTML-voorbeelden moet je zorgvuldig omgaan met de bronnen en opmaakcode die je toestaat.

Kies het element voor de bron

<object> kan terugvalinhoud bevatten, zoals een downloadlink, als de bron niet kan worden weergegeven. Oude plug-ininhoud zoals Flash werkt niet meer in gewone huidige browsers; Adobe beëindigde de ondersteuning voor Flash Player eind 2020. Zet directe links naast belangrijke inbeddingen en controleer regelmatig of de aanbieder ze nog beschikbaar stelt.