html

HTML-Tag <dialog> als Modal-Ersatz

von

Das <dialog>-Element stellt ein modales oder nicht-modales Dialogfenster dar (z. B. Bestätigungsdialog, Formular, Hinweis). Es bietet native Methoden (show(), showModal(), close()), ein ::backdrop-Pseudo-Element und vereinfacht zugängliche Modals, wenn richtig eingesetzt. MDN Web Docs 1. Definition & Zweck 2. Grundsyntax & Attribute Attribut / Eigenschaft Bedeutung open HTML-Attribut. Wenn gesetzt, ist der Dialog sichtbar (nicht unbedingt … Weiterlesen

HTML-Attribut „popover“ zeigt/verbirgt Elemente

von

1. Einordnung & Zweck 2. Attributwerte & Verhalten Wert Beschreibung / Verhalten auto (Standard) Popover kann „light dismiss“ — d. h. durch Klick außerhalb oder durch Esc geschlossen werden. Öffnen eines neuen auto-Popovers schließt ggf. andere auto-Popovers (außer verschachtelten). (MDN Web Docs) manual Popover schließt nicht automatisch und reagiert nicht auf Klick außerhalb. Steuerung ausschließlich … Weiterlesen

Übersicht: Formulare erstellen

von

HTML-Formulare existieren seit den frühen 1990er Jahren. Anfangs waren sie schlicht, mit nur Textfeldern, Buttons und Checkboxen. Mit HTML4 kamen neue Input-Typen, die Validierung erleichterten. HTML5 führte spezialisierte Typen (email, date, range) und Elemente wie <datalist> oder <output> ein, um nutzerfreundliche, interaktive Formulare ohne externe Skripte zu ermöglichen. Heute sind Formulare zentral für Web-Interaktionen. HTML-Formulare … Weiterlesen

Übersicht: Semantische HTML-Elemente

von

Im Rahmen von SEO und Barrierefreiheit kamen mit HTML5 neue selbstbeschreibende Tags, die es Maschinen erleichtern Inhalte auf Webseiten einzuordnen. Die neuen Tags ersetzen bisher gebräuchliche allgemeinere Elemente, z.B. <div>, und verbessern dadurch SEO-Ranking, Keyboard-Bedienung und Screenreader-Kompatibilität. Nachfolgend sind diese Tags nach Anwendungsbereichen gegliedert: 1. Layout und DOM-Struktur Tag Beschreibung Beispiel <header> Kopfbereich eines Dokuments … Weiterlesen

Eingabefelder mit Datenlisten

von

Das <datalist>-Tag stellt auf unkomplizierte Art eine Liste mit <option>-Elementen bereit, deren Werte wiederum von einem anderen Element angenommen werden können. Bei Eingabefeldern können bspw. die vorzuschlagenden Möglichkeiten als Liste mit <datalist> bereitgestellt werden. Der Nutzer bekommt mit dem Code direkt bei Klick auf das Input-Element eine klickbare Auswahl der vorhandenen Optionen…