Webformulare, Tabellen und Medien in HTML

Ein Formular erfasst zusammengehörige Antworten und sendet sie an eine URL. Das <form>-Element umschließt seine Steuerelemente und die Sendeschaltfläche. Halte getrennte Formulare auseinander: HTML erlaubt kein Formular innerhalb eines anderen Formulars.

Ziel und Methode wählen

action nennt die empfangende URL. Ohne diese Angabe geht die Anfrage an die aktuelle Seite. method legt fest, wie der Browser die Daten sendet; standardmäßig gilt GET.

GET-Daten können im Verlauf, in Lesezeichen und in Serverprotokollen erscheinen. POST hält sie aus dem Query-String heraus, verschlüsselt sie aber nicht. Verwende HTTPS, um Daten bei der Übertragung zu schützen. Das Serverprogramm empfängt und verarbeitet die Anfrage; das HTML-Formular selbst speichert Antworten nicht und versendet sie nicht per E-Mail.

Eine Suchanfrage nachvollziehen

<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>

Gibt der Benutzer „html tables“ ein, fordert der Browser /search?q=html+tables&lang=en an. Er nimmt den Feldnamen q und seinen aktuellen Wert, kodiert das Leerzeichen als + und verbindet die beiden Paare mit &. Das ? leitet den Query-String ein.

Ein Steuerelement braucht einen name, um Daten beizusteuern. Seine id erfüllt einen anderen Zweck: Sie identifiziert das Element auf der Seite und verbindet es unter anderem mit einer Beschriftung. Ein Eingabefeld mit id="query", aber ohne name, kann normal aussehen und funktionieren, ohne eine Antwort zur Anfrage beizutragen.

Welche Steuerelemente Daten beisteuern

Ein leeres Textfeld mit Namen steuert einen leeren Wert bei, etwa comment=. Ein angekreuztes Kontrollkästchen steuert seinen value bei; ohne Wert steuert es on bei. Ein nicht angekreuztes Kontrollkästchen steuert nichts bei. Ein deaktiviertes Steuerelement ist nicht bedienbar und wird ausgelassen. Ein unterstütztes readonly-Feld kann nicht bearbeitet werden, steuert aber weiterhin seinen Wert bei.

Ein verstecktes Eingabefeld wie <input type="hidden" name="source" value="newsletter"> steuert einen Wert ohne sichtbares Steuerelement bei. Der Wert ist nicht geheim: Besucher können ihn in den Entwicklerwerkzeugen untersuchen und ändern.

Das Verhalten von Schaltflächen ausdrücklich festlegen

Innerhalb eines Formulars sendet ein gewöhnlicher <button> dieses standardmäßig ab. Schreibe type="submit" für die Sendeschaltfläche und type="button" für eine Schaltfläche, die ein Skript benötigt. type="reset" stellt Ausgangswerte wieder her und kann die Eingaben eines Benutzers löschen. Auch das Drücken der Eingabetaste in einem einzeiligen Feld sendet das Formular oft ab. <input type="submit" value="Send"> ist ein weiteres Steuerelement zum Absenden; ein <button> kann außerdem Inline-Inhalte wie ein Symbol enthalten.

Den Inhalt einer Datei senden

<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>

Für einen gewöhnlichen Dateiupload sind sowohl POST als auch enctype="multipart/form-data" nötig. Bei der Standardkodierung des Formulars werden Dateinamen als Text übertragen, die Dateiinhalte aber nicht.

Ein <input> ist ein leeres Element und hat daher weder Inhalt noch ein schließendes Tag. Sein type wählt das Steuerelement und die zugehörigen Hilfen des Browsers. Fehlende oder nicht erkannte Typen fallen auf ein Textfeld zurück.

Text passend zum Zweck erfassen

Ein E-Mail-Feld prüft die Syntax, nicht aber, ob ein Postfach existiert. Selbst „ana@example“ besteht die grundlegende Syntaxprüfung. Ergänze multiple, um eine durch Kommas getrennte Liste von Adressen zu akzeptieren. Ein URL-Feld erwartet ein URL-Schema: „https://example.com“ besteht die Prüfung, „example.com“ dagegen nicht. Telefonformate unterscheiden sich, daher gibt tel keine Formatregel vor. Die Maskierung eines Passworts verhindert, dass Menschen in der Nähe den Bildschirm ablesen; HTTPS sorgt weiterhin für die Verschlüsselung bei der Übertragung.

Mengenangaben von Zifferncodes unterscheiden

Verwende number für eine Mengenangabe, etwa eine Anzahl oder Masse. Das Feld hat oft Schaltflächen, mit denen sich der Wert erhöhen oder verringern lässt. Verwende range für eine ungefähre Einstellung wie die Lautstärke; der Standardbereich reicht von 0 bis 100 und der Standardwert ist 50.

Ein Mitgliedscode ist keine Mengenangabe. Verwende <input type="text" inputmode="numeric"> für einen Zifferncode, damit führende Nullen Text bleiben und die Schaltflächen ihn nicht ändern. inputmode schlägt nur eine Bildschirmtastatur vor: Es validiert die Eingabe nicht. decimal, tel, email und url sind weitere nützliche Tastaturhinweise.

Anzeige- und Übermittlungsformat unterscheiden

Datumsauswahlen richten sich nach den Regionseinstellungen des Benutzers. Der 15. März 2026 kann als „03/15/2026“ oder „15/03/2026“ erscheinen, das übermittelte Datum ist aber 2026-03-15.

Diese Steuerelemente speichern keine Zeitzone. Bei einer lokalen Terminzeit muss daher der Ort oder die Zeitzone gesondert angegeben werden, wenn das wichtig ist.

Unabhängige Auswahl oder Einfachauswahl anbieten

Kontrollkästchen sind unabhängig: Mehrere können angekreuzt werden. Optionsfelder bilden eine Gruppe für eine Einfachauswahl, wenn ihre name-Werte übereinstimmen. Gib jedem Optionsfeld einen eigenen value und verwende checked für eine Vorauswahl.

<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>

Die Vorauswahl sendet size=M. Unterschiedliche Namen würden separate Gruppen erzeugen und mehrere Auswahlen erlauben.

Farben und Dateien auswählen

color bietet eine Farbauswahl und kann eine RGB-Farbe wie #ff8800 senden. file öffnet eine Dateiauswahl; accept=".pdf,image/*" schlägt PDFs und Bilder vor, und multiple erlaubt mehrere Dateien. Der Filter hilft bei der Auswahl; der Server muss weiterhin Typ und Inhalt der empfangenen Datei prüfen. Bei Steuerelementen, die value verwenden, legt es den Ausgangswert fest, der auch übermittelt wird, wenn der Benutzer nichts ändert.

Ein einzeiliges Eingabefeld eignet sich nicht für jede Antwort. Längerer Text braucht Platz, während feste Auswahlmöglichkeiten Steuerelemente benötigen, die zeigen, was erlaubt ist. Entscheide vor der Wahl des Elements, ob Benutzer auch etwas außerhalb der Auswahl eingeben dürfen.

Längerem Text ein mehrzeiliges Textfeld geben

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

rows gibt die sichtbare Anzahl der Zeilen an und cols die ungefähre Breite in Zeichen. Keines der Attribute begrenzt die Menge des eingebbaren Texts; verwende dafür maxlength. Der Ausgangstext gehört zwischen die Tags, nicht in ein value-Attribut. Leerzeichen und Zeilenumbrüche dort werden Teil des Ausgangswerts. Direkt nebeneinanderstehende öffnende und schließende Tags ergeben daher ein tatsächlich leeres Feld.

Einen Wert aus einer Dropdown-Liste senden

<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>

Die Auswahl „Express (next day)“, also Expresslieferung am nächsten Tag, sendet delivery=express. Der sichtbare Wortlaut kann eine Auswahl erläutern, während ihr value kurz und unverändert bleibt. Hat eine Option keinen value, wird ihr Text übermittelt. Ergänze selected, um eine Option vorauszuwählen. Hier hat die erste Option einen leeren Wert, sodass die Pflichtliste mit Einfachauswahl erst abgesendet werden kann, wenn der Benutzer eine Lieferart auswählt.

Optionen gruppieren oder mehrere zulassen

Ein <optgroup label="Hot drinks"> gibt zusammengehörigen Optionen eine Überschrift. Diese Überschrift ist selbst keine Auswahlmöglichkeit. Ein select mit multiple erlaubt mehrere ausgewählte Optionen, und size legt die sichtbaren Zeilen fest. Jeder ausgewählte Wert wird zu einem eigenen Paar mit demselben Namen: topics=html&topics=css.

Am Desktop erfordert die Mehrfachauswahl oft einen Strg-Klick oder Cmd-Klick. Bei einer kurzen Liste unabhängiger Optionen machen Kontrollkästchen die Auswahl meist deutlicher. Bei einer kurzen Liste für eine Einfachauswahl halten Optionsfelder alle Optionen sichtbar. Für eine lange feste Liste eignet sich ein select.

Vorschlagen, ohne einzuschränken

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

Das list-Attribut des Eingabefelds stimmt mit der id des datalist-Elements überein. Benutzer sehen Vorschläge, können aber weiterhin eine andere Stadt eingeben. Eine datalist ist daher für häufige Antworten auf eine offene Frage nützlich. Wird ein select durch eine datalist ersetzt, ändern sich die zulässigen Auswahlmöglichkeiten; es ändert sich nicht nur das Aussehen derselben festen Liste.

Fortschritt oder einen Messwert anzeigen

<progress> und <meter> zeigen Werte an, statt Antworten zu erfassen. Ein Fortschrittsbalken zeigt den Stand einer Aufgabe, etwa <progress value="70" max="100">70%</progress>. Eine Messwertanzeige zeigt einen Messwert in einem bekannten Bereich: <meter value="0.6">60%</meter> kann belegten Speicherplatz darstellen. Standardmäßig reicht der Bereich von 0 bis 1, sofern min und max ihn nicht ändern. Text innerhalb dieser Elemente liefert einen Ersatzwortlaut, wenn der Balken nicht gezeichnet werden kann. Ergänze neben beiden Anzeigen eine erklärende Beschriftung, damit Benutzer wissen, was die jeweilige Zahl misst.

Ein Feld braucht einen Namen, der sichtbar bleibt, während der Benutzer es ausfüllt. Ein verbundenes <label> gibt dem Steuerelement außerdem einen zugänglichen Namen für Screenreader und macht seinen Text zu einem größeren anklickbaren Ziel. Hinweise erklären Regeln, die die Beschriftung allein nicht vermitteln kann.

Die Beschriftung mit dem Steuerelement verbinden

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

Das for der Beschriftung stimmt mit der id des Eingabefelds überein, einschließlich der Groß- und Kleinschreibung. Der name steuert die Übermittlung und muss nicht identisch sein. Jede id muss auf der Seite eindeutig sein. Zeigt for="email" auf einen name, aber nicht auf eine passende id, sieht die Beschriftung normal aus, ist aber nicht verbunden.

Eine weitere Möglichkeit ist, das Eingabefeld in die Beschriftung einzuschließen:

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

Diese implizite Verbindung ist für eine kurze Beschriftung eines Kontrollkästchens nützlich. Ein explizites Paar aus for und id funktioniert auch, wenn Beschriftung und Steuerelement im HTML getrennt stehen.

Beschriftungen und Beispiele getrennt halten

Ein Platzhalter wie „name@example.com“ verschwindet, sobald die Eingabe beginnt. Er kann außerdem schwer lesbar sein und ist kein zuverlässiger zugänglicher Name. Behalte die sichtbare Beschriftung bei; verwende einen Platzhalter nur als kurzes Beispiel, wenn er hilft.

Kennzeichne Pflichtfelder mit Worten, etwa „Name (Pflichtfeld)“, oder erkläre ein Sternchen einmal über dem Formular. Farbe allein kann nicht allen vermitteln, was erforderlich ist. Erkläre ein Format, bevor Benutzer versuchen, die Eingabe abzusenden.

<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 verweist auf die id des Hinweises. Es ergänzt den Hinweis als Beschreibung nach dem Namen des Felds; es ersetzt nicht die Beschriftung.

Eine Gruppe von Steuerelementen benennen

<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>

Die Gruppenbeschriftung gibt die gemeinsame Frage an; jede Beschriftung benennt eine Antwort. Eine Formularfeldgruppe kann auch zusammengehörige Adressfelder gruppieren. Setze die Gruppenbeschriftung an den Anfang. disabled an einem fieldset deaktiviert die darin enthaltenen Steuerelemente, ausgenommen Steuerelemente innerhalb seines ersten legend-Elements. Halte gewöhnliche Formularsteuerelemente außerhalb des legend-Elements, damit diese Ausnahme nicht zu Überraschungen führt.

Browser beim Ausfüllen bekannter Angaben unterstützen

autocomplete beschreibt den Zweck von Informationen über den Benutzer. Zu den Werten gehören name, email, tel, street-address, postal-code, country-name, bday, new-password, current-password und one-time-code. Zutreffende Zweckangaben unterstützen das Eintragen gespeicherter Daten und das WCAG-2.2-Kriterium 1.3.5, Eingabezweck bestimmen (AA). autocomplete="off" ist eine Aufforderung; Browser können weiterhin gespeicherte Passwörter anbieten.

Verwende für ein optionales Telefonfeld die Beschriftung „Telefonnummer (optional)“ zusammen mit type="tel", name="phone" und autocomplete="tel". Klicke auf die Beschriftung, um den Fokus zu prüfen, und gehe dann mit der Tabulatortaste durch das Formular. Teste jede Beschriftung auf diese Weise, auch Beschriftungen neben Kontrollkästchen und Optionsfeldern.

Die integrierte Validierung prüft beim Absenden die Steuerelemente eines Formulars. Ein Steuerelement, das die Prüfung nicht besteht, verhindert das Absenden; der Browser setzt den Fokus auf das erste ungültige Feld und gibt eine Meldung in seiner eigenen Sprache aus. Den genauen Wortlaut wählt der Browser. Um ihn zu ändern, ist JavaScript nötig.

Eine Antwort verlangen

required bedeutet, dass ein Steuerelement einen Wert braucht. Bei einem Textfeld besteht eine leere Zeichenfolge die Prüfung nicht. Bei einem Kontrollkästchen bedeutet required, dass genau dieses Kästchen angekreuzt sein muss, etwa zur Annahme von Bedingungen. Bei Optionsfeldern mit demselben Namen bedeutet required an einem Feld, dass ein Feld der Gruppe ausgewählt sein muss. Ein select als Pflichtfeld mit Einfachauswahl und leerer erster Option benötigt eine nicht leere Auswahl.

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

Der Browser kombiniert diese Regeln. Das Feld muss eine Antwort enthalten, und vom Benutzer eingegebener Text muss die Längenbegrenzungen einhalten. Ohne type entsteht das normale Texteingabefeld.

Die eingegebenen Zeichen zählen

minlength legt die kleinste zulässige Länge fest und maxlength die größte. Leer- und Satzzeichen zählen mit. Die Länge wird in UTF-16-Codeeinheiten gemessen, sodass manche Emojis als zwei zählen; gewöhnliche lateinische Buchstaben zählen jeweils als eins.

In diesem Beispiel hat „Li“ zwei Zeichen und unterschreitet das Minimum. „Lina“ hat vier und besteht die Prüfung. „mountainhiker“ hat 13 Zeichen. Bei gewöhnlicher Eingabe stoppt der Browser nach dem zwölften Zeichen, sodass „mountainhike“ bleibt. Die Breite eines Textfelds legt diese Grenze nicht fest.

Vorhandensein und Länge als verschiedene Regeln behandeln

Ein optionales Feld mit minlength="4" darf leer sein. Die Mindestlänge wird geprüft, sobald der Benutzer einen Wert eingibt. Ergänzt du required, besteht auch eine leere Eingabe die Prüfung nicht. Das ist bei einem optionalen Spitznamen wichtig: Ein Benutzer kann ihn weglassen, ein angegebener Spitzname braucht aber trotzdem genügend Zeichen.

required ist ein boolesches Attribut. Seine Anwesenheit schaltet es ein, auch bei required="false". Um das Feld optional zu machen, entferne das Attribut. Dieselbe Regel zur Anwesenheit gilt für viele andere HTML-Schalter.

Was diese Prüfungen nicht entscheiden

Eine Folge von Leerzeichen ist in einem Textfeld trotzdem Inhalt. required akzeptiert sie daher, und die Leerzeichen zählen auch zur Länge. Eine Regel, die ein sichtbares Zeichen verlangt, benötigt ein passendes Muster oder eine Prüfung auf dem Server. Behaupte gegenüber Benutzern nicht, dass required allein eine aussagekräftige Antwort garantiert.

Längenbeschränkungen hängen auch davon ab, wie der Wert eingegeben wurde. Ein in HTML geschriebener Ausgangswert oder ein von einem Skript zugewiesener Wert wird durch minlength oder maxlength nicht allein deshalb als fehlerhaft markiert, weil er zu kurz oder zu lang ist. Ein korrekter Standardwert bleibt wichtig, auch wenn die gewöhnliche Eingabe begrenzt ist.

Um dieses Feld zu prüfen, versuche, es leer abzusenden, und gib dann zwei Buchstaben, vier Buchstaben und mehr als 12 Buchstaben ein. Jeder Versuch prüft eine andere Regel für sich. Wenn der Browser die Eingabe an der Grenze stoppt, lies den tatsächlich im Feld verbliebenen Wert, statt anzunehmen, dass die gesamte versuchte Eingabe akzeptiert wurde.

Ein Zahlen- oder Datumswert kann das richtige Format haben und trotzdem ungeeignet sein. min und max legen seine Schranken fest; step legt fest, welche Schrittweiten innerhalb dieser Schranken erlaubt sind. Eine Zahl muss beide Prüfungen bestehen.

Den Wertebereich festlegen

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

Die Endpunkte sind eingeschlossen. Werte von 0,5 bis 30 kg liegen im Bereich, müssen aber auch auf Schritten von einem halben Kilogramm liegen. Beginnend bei 0,5 ergeben sich 0,5; 1; 1,5 und so weiter bis 30: 60 zulässige Werte. Eine Eingabe von 31 überschreitet das Maximum; 2,25 liegt im Bereich, besteht aber die Prüfung der Schrittweite nicht.

Vor dem Zählen den Ausgangspunkt finden

Die Schritte werden von min aus gezählt, wenn es vorhanden ist. Andernfalls werden sie von einem gültigen HTML-Attribut value aus gezählt und danach von der Standardschrittbasis des Typs. Für number ist diese Standardbasis 0. Die Standardschrittweite ist 1.

Bei min="1" step="2" sind 1, 3, 5, 7 und so weiter zulässig. Vier besteht die Prüfung nicht, obwohl es ein Vielfaches von zwei ist, weil die Folge bei eins beginnt. Bei min="0.5" ohne step-Attribut beträgt die Schrittweite weiterhin eins: 0,5; 1,5 und 2,5 bestehen die Prüfung, 1 und 2 dagegen nicht.

Wenn weder min noch ein value-Attribut eine andere Basis vorgibt, akzeptiert ein Zahlenfeld standardmäßig ganze Zahlen. Verwende step="0.01" für Schritte von einem Hundertstel oder step="any", um die Prüfung der Schrittweite aufzuheben. any hebt weder das Minimum noch das Maximum auf.

Die richtigen Einheiten für Datum und Uhrzeit verwenden

Ein Datumsfeld mit min="2026-06-01" max="2026-08-31" akzeptiert Datumsangaben in diesem geschlossenen Intervall. Schreibe die Attribute im Übermittlungsformat, auch wenn die Auswahlhilfe eine andere Reihenfolge des Datums anzeigt.

Für Termine verwendet type="time" min="09:00" max="17:00" step="900" pro Schritt 900 Sekunden oder 15 Minuten. Die Folge beginnt um 09:00 Uhr und endet um 17:00 Uhr. Es gibt 32 Intervalle und 33 auswählbare Uhrzeiten, einschließlich beider Endpunkte.

Eingabe und gespeicherten Wert unterscheiden

Manche lokalisierten Browser erlauben die Dezimaleingabe „2,5“, übermitteln aber 2.5. Text, der keine Zahl ist, wird je nach Browser blockiert oder lässt den Zahlenwert leer. Ein optionales leeres Eingabefeld ist weiterhin zulässig, sofern required nicht vorhanden ist.

Ein range-Schieberegler bleibt innerhalb seines zulässigen Bereichs und springt auf die Schritte, sodass Benutzer nicht auf dieselben Bereichs- und Schrittweitenfehler wie bei einer eingegebenen Zahl stoßen. Davon unabhängig werden nicht leere email- und url-Felder auch ohne required einer Typprüfung unterzogen: Eine optionale Antwort wird nicht gültig, wenn sie in einem falschen Format eingegeben wird.

Ein Muster ist nützlich, wenn eine Organisation ein genaues Textformat festlegt, etwa für einen Produktcode. Der Browser prüft den gesamten nicht leeren Wert anhand des Musters. Erkläre das Format neben dem Feld, damit Benutzer es einhalten können, bevor ein Fehler erscheint.

Ein kleines Muster erstellen

<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] steht für einen lateinischen Großbuchstaben und {3} wiederholt ihn genau dreimal. Der Bindestrich außerhalb der Zeichengruppen steht für sich selbst. [0-9]{4} verlangt vier Ziffern. „ABC-1234“ besteht die Prüfung. „abc-1234“, „ABC1234“ und „ABC-12345“ verletzen jeweils einen anderen Teil der Regel.

Muster werden mit dem gesamten Wert abgeglichen, sodass zusätzlicher Text an einem der Enden die Prüfung nicht besteht. Ergänze nicht die umgebenden Schrägstriche, die bei regulären Ausdrücken in JavaScript verwendet werden. pattern gilt für textähnliche Eingabefelder wie text, search, tel, email, url und password, nicht für ein mehrzeiliges Textfeld. Leere Werte überspringen die Musterprüfung; required behandelt eine leere Antwort.

Satzzeichen für sich selbst sorgfältig schreiben

Zeichen wie ., + und ? haben besondere Bedeutungen. Stelle ihnen einen umgekehrten Schrägstrich voran, wenn sie für sich selbst stehen sollen: \. steht für einen Punkt. Innerhalb einer Zeichengruppe verlangen moderne HTML-Muster dies auch bei Satzzeichen wie einem Bindestrich, der für sich selbst stehen soll: [a-z0-9\-]. Dieser Bindestrich unterscheidet sich von dem, der den Bereich a-z festlegt.

Ein ungültiges Muster wird ignoriert. Andere Regeln, darunter required und Typprüfungen, werden weiterhin ausgeführt. Teste ein Muster sowohl mit Eingaben, die die Prüfung bestehen, als auch mit solchen, die sie nicht bestehen. Wenn ein Formular einen erwarteten Wert absendet, zeigt das noch nicht, dass das Muster irgendetwas zurückweist.

Regel und Fehler erklären

Halte sichtbaren Hinweistext neben dem Steuerelement bereit. Ein title kann zu manchen Browsermeldungen beitragen; die Formatanweisung muss neben dem Feld sichtbar bleiben. Vermeide starre Muster für Namen, Telefonnummern oder Postleitzahlen, sofern das akzeptierte Format nicht tatsächlich feststeht; gültige internationale Antworten können sich stark unterscheiden.

CSS bietet :valid und :invalid für den aktuellen Validierungszustand eines Felds. :user-invalid verzögert den ungültigen Zustand bis zur Benutzerinteraktion und verhindert so, dass ein unberührtes Formular überall im Fehlerstil erscheint. Ergänze Farben durch Worte oder ein Symbol, damit der Unterschied auch ohne Farbwahrnehmung sichtbar bleibt.

Festlegen, wann Prüfungen stattfinden

novalidate am Formular überspringt beim Absenden die Validierung durch den Browser. formnovalidate an einer Sendeschaltfläche überspringt sie für diese Schaltfläche. Das kann „Entwurf speichern“ neben einer normalen Schaltfläche „Senden“ ermöglichen. Browserprüfungen lassen sich auch über Entwicklerwerkzeuge entfernen oder durch eine direkte Anfrage umgehen. Der Server muss eingehende Daten erneut prüfen, bevor er ihnen vertraut.

Verwende eine Tabelle, wenn ein Wert sowohl von seiner Zeile als auch von seiner Spalte abhängt: etwa bei einem Trainingsprotokoll, einem Stundenplan oder einem Vergleich von Messwerten. Verwende CSS für das Seitenlayout. Ein Layout aus Tabellenzellen erzeugt für Screenreader irreführende Beziehungen zwischen Zeilen und Spalten und passt sich schlecht an schmale Bildschirme an.

Die Struktur aus den Daten aufbauen

<table> enthält die Tabelle, <tr> eine Zeile, <th> eine Kopfzelle und <td> eine Datenzelle. Die Zellen werden innerhalb jeder Zeile von links nach rechts geschrieben. Eine fett formatierte Datenzelle bleibt eine Datenzelle; verwende <th>, um eine Überschrift auszuzeichnen.

<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>

Die Tabellenbeschriftung ist das erste Element innerhalb der Tabelle. Sie sagt den Lesern, was die ganze Tabelle beschreibt, bevor sie auf deren Werte stoßen. Eine Überschrift in der Nähe kann visuell helfen, aber die Tabellenbeschriftung verbindet den Titel mit der Tabelle selbst.

Jeden Wert mit seinen Überschriften verbinden

scope="col" besagt, dass eine Kopfzelle für die darunterliegende Spalte gilt. scope="row" besagt, dass sie für die Zeile gilt. Der Wert 7,5 gehört daher zur Zeile „Wednesday“ (Mittwoch) und zur Spalte „Distance (km)“ (Strecke in Kilometern). Ein Screenreader kann diese vollständige Bedeutung statt einer einzelnen Zahl ansagen.

Schreibe Einheiten in die Spaltenüberschriften, damit sie durchgehend gelten. Jede Strecke ist hier in Kilometern angegeben, jede Zeit in Minuten. Die Gesamtstrecke ergibt sich aus 5,0; 7,5 und 10,0 und beträgt 22,5 km. Die Zeiten 28, 45 und 62 ergeben 135 min.

Jeder Gruppe eine Aufgabe geben

<thead> gruppiert Kopfzeilen, <tbody> die Hauptdaten und <tfoot> die Zusammenfassung nach dem Tabellenkörper. Diese Gruppen beschreiben die Struktur und bieten Ansatzpunkte für CSS. Browser fügen ein <tbody> um gewöhnliche Zeilen ein, die direkt innerhalb einer Tabelle geschrieben stehen. Daher kann die angezeigte Struktur vom ungruppierten Quelltext abweichen.

Bedeutung und Aussehen prüfen

Jede Zeile umfasst hier drei Spalten. Lässt du eine Datenzelle weg, weiß der Browser nicht, welcher Wert innerhalb der Zeile fehlt: Spätere Zellen können unter der falschen Überschrift stehen. Schreibe die Zellen an ihre richtigen Positionen und verwende „0“ für eine bekannte Null oder „entfällt“, wenn ein Wert nicht zutrifft. Eine unerklärte leere Zelle lässt Leser im Unklaren.

Tabellen haben standardmäßig keine Rahmen. Für einfache Linien wende border: 1px solid auf die Zellen und border-collapse: collapse auf die Tabelle an. Das alte border-Attribut ist veraltet. Ein Rahmen macht das Raster sichtbar, kann aber weder fehlende Beziehungen zu Kopfzellen herstellen noch einen falsch platzierten Wert korrigieren.

Verbundene Zellen ermöglichen es, dass ein Eintrag mehrere Positionen im Raster abdeckt. Dadurch ändert sich, wie viele neue Zellen eine Zeile benötigt. Plane daher die belegten Positionen, bevor du die Tags schreibst.

Die Spalten in einem Stundenplan mit verbundenen Zellen zählen

Betrachte drei Spalten: „Zeit“, „Montag“ und „Dienstag“. Um 09:00 Uhr steht am Montag „Formulare“ und am Dienstag „Tabellen“. Um 10:00 Uhr beginnt am Montag „Validierung“, was sich bis in die Zeile 11:00 Uhr fortsetzt. Am Dienstag stehen „Medien“ um 10:00 Uhr und „Einbettungen“ um 11:00 Uhr. Um 12:00 Uhr umfasst „Mittagspause“ beide Tage.

<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>

Um 11:00 Uhr ist die Position für Montag bereits von oben belegt. Neu hinzu kommen nur die Kopfzelle für die Uhrzeit und der Eintrag für Dienstag. Eine weitere Zelle für Montag würde den letzten Wert in eine vierte Spalte verschieben. Um 12:00 Uhr umfasst die Kopfzelle für die Uhrzeit eine Spalte und die Zelle für die Mittagspause zwei, insgesamt also drei.

colspan überspannt Spalten horizontal; rowspan überspannt Zeilen vertikal. Beide haben standardmäßig den Wert eins. Zähle beim Prüfen einer Zeile die Positionen, die durch neue Zellen und durch Überspannungen aus früheren Zeilen belegt sind.

Spaltengruppen beschreiben

<colgroup> und <col> beschreiben Spalten und stehen nach der Tabellenbeschriftung, aber vor den Zeilengruppen. <col span="2"> steht für zwei Spalten. Über diese Elemente lässt sich nur eine begrenzte Auswahl von Stilen anwenden, darunter Hintergründe, Breite, Sichtbarkeit und Rahmen nach den jeweiligen Regeln für Tabellenrahmen. Sie ersetzen keine Kopfzellen.

Steht „Strecke (km)“ über zwei Spalten namens „Geplant“ und „Tatsächlich“, definiere diese beiden Spalten als Gruppe. Gib der oberen Kopfzelle colspan="2" scope="colgroup" und den unteren Kopfzellen scope="col". Die Überspannung steuert die Breite, während scope die Beziehung zur Kopfzelle angibt. Ein Geltungsbereich für eine Spaltengruppe benötigt eine passende Spaltengruppe in der Tabellenstruktur.

Kopfzellen bei Bedarf ausdrücklich zuordnen

Für Beziehungen, die scope nicht eindeutig ausdrücken kann, gib Kopfzellen eindeutige IDs und führe sie im headers-Attribut der Datenzelle auf:

<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>

Der geplante Wert 8 verweist auf Montag, Strecke (km) und Geplant. Der tatsächliche Wert 7,5 hat dieselben Zeilen- und Gruppenkopfzellen, verweist aber auf Tatsächlich. Die durch Leerzeichen getrennten Namen müssen mit den IDs der Kopfzellen übereinstimmen, nicht mit deren sichtbarem Wortlaut.

Das abbr einer Kopfzelle kann einen kürzeren Wortlaut für Wiederholungen bereitstellen, etwa <th abbr="Distance">Distance covered in kilometers</th>. Manche Screenreader verwenden diese Kurzform. Machen viele Überspannungen oder drei Überschriftenebenen eine Tabelle schwer verständlich, teile die Daten in einfachere Tabellen mit eigenen Tabellenbeschriftungen auf. Vermeide es, eine Tabelle in die Zelle einer anderen Tabelle zu verschachteln.

<video> und <audio> verknüpfen Mediendateien mit einer Seite. Der Browser lädt diese separaten Dateien herunter; das Video oder der Ton wird nicht im HTML gespeichert. Mit controls werden die browser­eigenen Steuerelemente für Wiedergabe, Pause, Zeitleiste und Lautstärke angezeigt.

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

Ohne Wiedergabesteuerung hat ein audio-Element kein sichtbares Wiedergabeprogramm und ein Video keine sichtbare Wiedergabeschaltfläche. Eine Seite müsste Steuerelemente per Skript bereitstellen, um Benutzern diese Bedienung zu ermöglichen. Behalte für eine einfache Seite die nativen Wiedergabesteuerelemente bei.

Die richtige Form reservieren

width und height nehmen einfache Zahlen in CSS-Pixeln an. Sie reservieren Platz, während ein Video lädt, und verringern so Bewegungen der Seite. Ein Video mit 1920 × 1080 hat bei einer angezeigten Breite von 640 die passende Höhe 360: Die Breite wurde durch drei geteilt, also muss auch die Höhe durch drei geteilt werden. Eine anders geformte Box für das Wiedergabeprogramm behält die Proportionen des Bildes bei und ergänzt leere Streifen.

poster stellt vor der Wiedergabe ein Standbild bereit. Ohne dieses Bild wartet der Browser auf Mediendaten, bevor er das erste Einzelbild anzeigen kann. Das Vorschaubild ist nützlich, wenn wenig oder nichts vom Video vorgeladen wird.

Entscheiden, wie viel vorgeladen wird

Dies sind Hinweise: Der Browser kann sie übergehen. Auch die automatische Wiedergabe hat Vorrang vor dem Vorladen. none ist für lange Medien nützlich, die viele Besucher nicht ansehen werden; Metadaten helfen, die Dauer anzuzeigen, ohne absichtlich den ganzen Clip abzurufen.

Wiedergabeschalter verstehen

controls, autoplay, muted, loop und playsinline sind boolesche Attribute. Ihre Anwesenheit schaltet sie ein: Auch muted="false" startet stummgeschaltet. Entferne das Attribut, um es auszuschalten.

Automatische Wiedergabe mit Ton wird je nach Browserberechtigungen und Einstellungen häufig blockiert, bis der Benutzer interagiert. Stummgeschaltetes Video wird häufiger zugelassen; Safari auf dem iPhone benötigt dafür zusätzlich playsinline. Ein stummer Clip in Endlosschleife kann autoplay muted loop playsinline verwenden. loop startet den Clip nach seinem Ende erneut. Verlass dich nicht auf automatische Wiedergabe, um wesentliche Informationen zu vermitteln.

Automatischer Ton kann einen Screenreader überlagern, und Bewegung kann ablenken. Das WCAG-2.2-Kriterium 1.4.2 (A) verlangt eine Möglichkeit, automatisches Audio, das länger als drei Sekunden läuft, zu pausieren oder zu stoppen oder seine Lautstärke unabhängig zu regeln. Kriterium 2.2.2 (A) behandelt automatisch bewegte Inhalte, die länger als fünf Sekunden neben anderen Inhalten laufen, sofern sie nicht wesentlich sind. Stelle eine Möglichkeit zum Pausieren bereit; native Steuerelemente bieten sie bei diesen Wiedergabeprogrammen.

Den Datenaufwand schätzen

Ein zweiminütiger Clip mit 5 Megabit pro Sekunde enthält 600 Megabit. Geteilt durch acht ergibt das vor zusätzlichem Übertragungsaufwand etwa 75 Megabyte. Kürzere Clips und ein passender Hinweis zum Vorladen verringern unnötige Übertragungen. Das iframe-Wiedergabeprogramm einer gehosteten Plattform kann die Auslieferung vom Server deiner Website weg verlagern, aber Besucher laden die Medien beim Ansehen weiterhin herunter.

Eine Dateinamenerweiterung einer Mediendatei bezeichnet ihren Container, also die Dateistruktur, die Bild und Ton enthält. Codecs komprimieren und dekodieren die darin enthaltenen Datenströme. Ein Browser muss sowohl den Container als auch seine Codecs unterstützen; die Erweiterung .mp4 allein sagt nicht aus, was darin enthalten ist.

Geeignete Formate wählen

MP4 mit H.264-Video und AAC-Audio ist auf gängigen aktuellen Systemen eine breit kompatible Wahl. WebM mit VP9- oder AV1-Video und Opus-Audio wird ebenfalls breit unterstützt und kann die Größe bei vorgegebener Qualität verringern. Für Audio ist MP3 eine breit unterstützte Wahl, wenn du nur ein Format anbietest. Die Unterstützung hängt weiterhin vom tatsächlichen Codec und vom System des Benutzers ab. Teste daher die Dateien selbst.

Quellen nach Priorität anbieten

<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>

Der Browser probiert die untergeordneten Quellen der Reihe nach und verwendet die erste abspielbare. Hier wird WebM bevorzugt; MP4 bietet einen anderen Weg, falls WebM nicht abgespielt werden kann. Lass src am <video> selbst weg, wenn du untergeordnete Quellen verwendest. Ein src am Medienelement hat Vorrang und die Liste der untergeordneten Quellen wird ignoriert.

Der type ist ein MIME-Typ, der die Datei beschreibt. Er ermöglicht dem Browser, ein nicht unterstütztes Format zu überspringen, ohne zuerst Mediendaten abzurufen. Ein falscher Typ kann dazu führen, dass eine abspielbare Datei übersprungen wird. Die Angabe muss daher zur tatsächlichen Datei passen. Dieselbe inkompatible Kodierung unter einem anderen Namen aufzuführen, schafft keine kompatible Alternative.

Die Ausweichmöglichkeit verfügbar halten

Inhalt innerhalb von <video> ist Ersatzinhalt für einen Browser, der das video-Element nicht erkennt. Ein moderner Browser, der es erkennt, aber keine Quelle abspielen kann, zeigt diesen inneren Absatz nicht als allgemeine Fehlermeldung an. Der separate Downloadlink außerhalb des Wiedergabeprogramms bleibt in diesem Fall verfügbar. Ein Ersatzlink und alternative Quellen beheben unterschiedliche Fehler.

Dasselbe Muster auf Audio anwenden

<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>

Diese erste Datei verwendet einen Ogg-Container mit Opus-Audio. Die MP3-Alternative verwendet audio/mpeg, den korrekten MIME-Typ für MP3. Der Browser kann dem Ersatzabsatz nicht entnehmen, dass er die Datei wechseln soll; die source-Elemente bieten diese Auswahl. Prüfe auf der Seite die Pfade, die tatsächlichen Dateiformate und die Wiedergabe und stelle anschließend gesondert sicher, dass der externe Downloadlink funktioniert.

Medieninformationen benötigen einen anderen Zugang, wenn jemand sie nicht hören oder sehen kann. Untertitel für gehörlose und schwerhörige Menschen enthalten Sprache, Angaben zu den Sprechenden und bedeutsame Geräusche. Weitere Untertitel verschriftlichen oder übersetzen Dialoge für Menschen, die den Ton hören, aber Hilfe beim Verstehen benötigen. Ein Transkript gibt Sprache und wichtige Geräusche als Text in der Nähe des Wiedergabeprogramms oder über einen eindeutig bezeichneten Link in der Nähe wieder. Eine Audiodeskription beschreibt wichtige visuelle Informationen.

Eine Untertitelspur einbinden

<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>

Setze <track> nach die Quellen. src verweist auf eine Textspurdatei, kind bezeichnet ihren Zweck, srclang die Sprache und label liefert den Menütext des Wiedergabeprogramms. Eine Spur für weitere Untertitel muss srclang haben; gib es auch für Untertitel für gehörlose und schwerhörige Menschen an. Nur eine Textspur sollte default tragen. Ohne kind gilt standardmäßig subtitles.

Die Untertiteldatei schreiben

WebVTT ist UTF-8-Text, der mit der Erweiterung .vtt gespeichert wird. Die erste Zeile lautet WEBVTT, gefolgt von einer Leerzeile. Jeder Cue hat anschließend eine Zeitangabenzeile und seinen Text; vor dem nächsten Cue steht eine Leerzeile. Vor der Zeitangabe eines Cues kann eine optionale Kennung stehen.

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.

Der erste Cue dauert 3,5 Sekunden, der zweite 2,25 Sekunden und der dritte 3,5 Sekunden. Der Geräusch-Cue vermittelt etwas Hörbares, obwohl niemand spricht.

Die Syntax der Zeitangaben genau einhalten

Minuten und Sekunden verwenden zwei Stellen; Millisekunden verwenden drei nach einem Punkt. Stunden können weggelassen werden: 01:05.000 bedeutet eine Minute und fünf Sekunden. Das Ende muss nach dem Anfang liegen. Eine Leerzeile beendet einen Cue. Halte daher seinen gesamten Text ohne Leerzeile in der Mitte zusammen.

SRT verwendet Zeitangaben mit Komma wie 00:00:01,000; eine Textspur benötigt stattdessen WebVTT. Für die Umwandlung sind die WebVTT-Kopfzeile und Zeitangaben mit Punkt nötig; außerdem müssen die übrigen Cues auf gültige Syntax geprüft werden. Das Umbenennen einer .srt-Erweiterung wandelt ihren Inhalt nicht um.

Bereitstellung und Barrierefreiheit prüfen

Halte die Textspur auf demselben Ursprung wie die Seite: dasselbe URL-Schema, derselbe Host und derselbe Port. Eine Textspur von einem anderen Ursprung benötigt eine passende crossorigin-Einstellung am Video und die Erlaubnis dieses Servers. Andernfalls kann auch eine korrekte Datei nicht geladen werden.

Das WCAG-2.2-Kriterium 1.2.2 (A) verlangt Untertitel für gehörlose und schwerhörige Menschen bei aufgezeichnetem Video mit Ton, vorbehaltlich der Ausnahme für Medienalternativen. Kriterium 1.2.1 (A) verlangt eine Alternative für aufgezeichnete reine Audioinhalte, etwa ein Transkript für einen Podcast. Prüfe automatische Untertitel vor der Veröffentlichung auf Namen, Fachbegriffe, Sprecherwechsel und Geräusche.

Weitere Textspurarten sind descriptions, chapters und metadata. Browser-Wiedergabeprogramme zeigen diese gewöhnlich nicht als normale Untertitel an. Setze wesentliche sichtbare Anweisungen nicht in eine Metadaten-Textspur und erwarte dann, dass sie auf dem Bildschirm erscheinen.

Ein <iframe> ist ein Inlineframe: Er zeigt eine separate Webseite innerhalb der aktuellen Seite. Dieses Dokument hat sein eigenes HTML, CSS und eigene Skripte. Die Stile deiner Seite können die Größe des Frames festlegen, gestalten aber nicht die Inhalte eines anderen Dokuments darin.

Mit einem klar bezeichneten Frame in passender Größe beginnen

<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 nennt die zu ladende Seite. Der Titel sagt einem Screenreader-Benutzer, was sich im Frame befindet, bevor er ihn betritt. „Karte des Veranstaltungsorts“ beschreibt seinen Zweck; „iframe“ oder „Inhalt“ tut das nicht. Der direkte Link bietet einen anderen Zugang, falls der Browser des Besuchers den Frame blockiert.

width und height nehmen einfache Zahlen in CSS-Pixeln an. Ohne diese Angaben ist der Frame standardmäßig 300 × 150 CSS-Pixel groß. Browser zeichnen außerdem einen Standardrahmen. Gestalte ihn mit CSS statt mit dem veralteten Attribut frameborder.

Bereitgestellten Einbettungscode anpassen

Karten- und Videodienste bieten gewöhnlich ein Einbettungsfragment über ihre Teilen-Funktion an. Prüfe nach dem Einfügen die URL, verbessere den Titel, prüfe die Abmessungen und entferne veraltete Darstellungsattribute. Eine iframe-URL ist die Adresse einer Seite oder eines Wiedergabeprogramms eines Dienstes, nicht unbedingt die einer direkten Mediendatei.

Verwende HTTPS für die eingebettete Adresse. Ein HTTP-Frame innerhalb einer HTTPS-Seite ist aktiver gemischter Inhalt und wird blockiert. Das bloße Schreiben eines Titels oder Ändern der Framegröße kann eine unsichere URL nicht zum Laden bringen.

Zu einem geeigneten Zeitpunkt laden

loading="lazy" verzögert das Laden eines Frames, bis er sich in der Nähe des Viewports befindet. Das spart anfänglichen Aufwand bei einer Karte weit unten auf der Seite. Der Standardwert eager beginnt sofort mit dem Laden. Lade eine hervorgehobene Einbettung am Seitenanfang sofort, damit Besucher nicht auf ihren Hauptinhalt warten. Lazy Loading ändert den Zeitpunkt; der Netzwerkkontakt entfällt nicht, wenn der Frame schließlich lädt.

Damit ein Wiedergabeprogramm in seinen Container passt, kann CSS seine Breite auf 100 % setzen und seine Form erhalten:

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

Wende class="video-player" auf den betreffenden iframe an. Die HTML-Abmessungen liefern weiterhin Ausgangsinformationen, während CSS die angezeigte Größe steuert.

Die Verweigerung eines Anbieters erkennen

Eine Website kann die Einbettung in Frames über den HTTP-Antwortheader X-Frame-Options oder eine Content-Security-Policy-Regel frame-ancestors untersagen. Der Browser zeigt möglicherweise einen leeren Frame oder einen Fehler. Diese Beschränkungen helfen, Clickjacking zu verhindern, bei dem eine täuschende eingebettete Seite Klicks abfängt, die für etwas anderes bestimmt sind.

Das HTML deiner Seite kann die Verweigerung der anderen Website nicht außer Kraft setzen. Verwende die erlaubte Einbettungsadresse des Anbieters, falls er eine anbietet; stelle andernfalls einen gewöhnlichen Link bereit. Behalte diesen Link auch für spätere Ausfälle: Entfernt oder verschiebt ein Anbieter seinen Inhalt, kann ein unveränderter iframe auf deiner Seite aufhören zu funktionieren.

Eine Einbettung eines Drittanbieters kontaktiert ihren Anbieter, wenn der eingebettete Inhalt lädt, noch bevor ein Besucher die Wiedergabe startet. Diese Anfrage gibt Informationen wie eine IP-Adresse preis und kann Cookies einschließen. Entscheide, ob die Seite diesen Kontakt sofort benötigt und welchen Zugriff das eingebettete Dokument braucht.

Den Kontakt bei Bedarf verzögern

Lazy Loading verzögert das Laden eines Frames außerhalb des sichtbaren Bereichs, bis er sich in der Nähe des Bildschirms befindet. Eine Vorschau, die eine Einbettung erst nach einem Klick lädt, gibt Besuchern eine unmittelbarere Wahl. Manche Dienste bieten außerdem Modi mit erweitertem Datenschutz an. Ein Frame von derselben Website kontaktiert nicht zwangsläufig einen anderen Anbieter; direkt eingefügtes srcdoc vermeidet den Abruf einer separaten Seite, wobei Ressourcen, auf die dieses HTML verweist, weiterhin Netzwerkanfragen auslösen können.

Das Verhalten des Dokuments mit sandbox einschränken

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

Ein leeres sandbox wendet alle Beschränkungen an, darunter das Blockieren von Skripten, Formularübermittlungen und Pop-ups sowie die Zuweisung eines undurchsichtigen Ursprungs. Schlüsselwörter heben ausgewählte Beschränkungen auf. Hier darf das Quiz Skripte ausführen und Formulare absenden, aber allow-popups wurde nicht gewährt. Ergänze nur Schlüsselwörter, die der Inhalt benötigt; andernfalls kann eine kopierte Berechtigungsliste nützliche Beschränkungen aufheben.

allow-same-origin lässt das Dokument seinen normalen Ursprung behalten. Kombiniere es nicht mit allow-scripts für eingebettete Inhalte von deinem eigenen Ursprung: Diese Kombination kann dem Dokument erlauben, seine Sandbox zu entfernen. Eine Sandbox bedeutet außerdem nicht, dass ein Frame keine Netzwerkanfragen stellt.

Browserfunktionen getrennt gewähren

allow ist eine Berechtigungsrichtlinie für Funktionen wie Vollbild, Bild-in-Bild, Kamera und Mikrofon. Ein Videowiedergabeprogramm kann allow="fullscreen; picture-in-picture" anfordern. Es benötigt nicht allein deshalb Kamerazugriff, weil es Video enthält. Das ältere allowfullscreen gewährt ebenfalls Zugriff auf Vollbild.

Sandbox-Schlüsselwörter steuern das Verhalten des Dokuments; Funktionsberechtigungen beantworten eine andere Frage. Die Gewährung von Vollbild allein erlaubt einer Seite in einer Sandbox weder, ein Formular abzusenden noch ein Skript auszuführen.

Referrer und direkt eingefügten Inhalt steuern

referrerpolicy="no-referrer" lässt die Adresse der verweisenden Seite in der Anfrage weg. Bei der üblichen Standardrichtlinie sendet eine HTTPS-Anfrage an einen anderen Ursprung den Ursprung statt des vollständigen Pfads; Anfragen an eine weniger sichere Verbindung senden keinen Referrer. Dies steuert einen HTTP-Header, nicht alle Informationen, die ein Anbieter erhält.

srcdoc stellt das HTML des Frames direkt bereit und hat Vorrang vor src:

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

Die Sandbox hält diese kleine Vorschau eingeschränkt. Bei allgemeineren HTML-Vorschauen ist darauf zu achten, welche Ressourcen und welcher HTML-Quelltext erlaubt werden.

Das Element passend zur Ressource auswählen

<object> kann Ersatzinhalt enthalten, etwa einen Downloadlink, falls die Ressource nicht angezeigt werden kann. Alte Plug-in-Inhalte wie Flash funktionieren in gewöhnlichen aktuellen Browsern nicht mehr; Adobe beendete die Unterstützung für Flash Player Ende 2020. Halte direkte Links neben wichtigen Einbettungen bereit und prüfe regelmäßig, ob der Anbieter die Inhalte noch bereitstellt.