Interaktivität¶

details und summary¶

Erstellt ein ein-/ausklappbares Feld, ideal für FAQs oder Zusatzinformationen.

<details>
  <summary>Was ist HTML?</summary>
  <p>HTML ist die Auszeichnungssprache für Webseiten.</p>
</details>
<details>
  <summary>Wer ist Tim Berners Lee?</summary>
  <p>Tim Berners Lee hat HTML erfunden.</p>
</details>

Was ist HTML?

HTML ist die Auszeichnungssprache für Webseiten.

Wer ist Tim Berners Lee?

Tim Berners Lee hat HTML erfunden.

<summary> ist die Überschrift, die immer sichtbar bleibt.
<details> enthält den einklappbaren Inhalt.
Browser zeigen automatisch ein kleines ► / ▼ Symbol an.
Funktioniert ohne JavaScript.

datalist¶

Mit <datalist> kann man Eingabefelder um praktische Vorschlagslisten erweitern. Man tippt etwas in ein Textfeld ein – und der Browser zeigt einem passende Vorschläge an, aus denen man auswählen kannt.

Die Eingabe bleibt aber komplett flexibel: Man kannt einen Vorschlag anklicken, musst es aber nicht. Der Vorteil ist, dass Nutzerinnen und Nutzern eine Orientierung gegeben wird, ohne sie auf feste Vorgaben zu beschränken.

Hier bekommt das <input>-Feld durch das list-Attribut eine Verbindung zur <datalist> mit der passenden id. Der Browser zeigt dann beim Tippen die Vorschläge aus den <option>-Elementen an:

<label for="farbe">Programmiersprache:</label>
<input id="farbe" list="sprachen" placeholder="Programmiersprache eingeben" />

<datalist id="sprachen">
  <option value="Python"></option>
  <option value="JavaScript"></option>
  <option value="C#"></option>
  <option value="C++"></option>
</datalist>

Programmiersprache:

contenteditable¶

Mit contenteditable kann man jedes HTML-Element direkt im Browser editierbar machen, ähnlich wie ein Textfeld. Änderungen werden nicht automatisch gespeichert.

<p contenteditable="true">Du kannst diesen Text jetzt bearbeiten.</p>

Du kannst diesen Text jetzt bearbeiten.

data-*-Attribute¶

Mit data-*-Attributen kannt man eigene Daten an HTML-Elemente anhängen. Sie dienen als kleine Datenspeicher, die andere Sprachen nutzen können – ohne die Darstellung zu beeinflussen.

<div id="user" data-id="42" data-role="admin">Max Mustermann</div>