Standardverhalten

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Es gibt in HTML neben reinen Elementen zur Textauszeichnung wie Überschriften oder Textabsätzen auch Elemente, die bereits eine browsereigene Funktionalität bei bestimmten Events haben, z. B. …

  • <a> — Links
    • Klick → Navigation zu einer neuen URL
    • Ctrl + Klick → Öffnen in neuem Tab
    • Rechtsklick → Kontextmenü für "Link in neuem Tab öffnen"
  • <form> – Formulare
    • Drücken der Enter-Taste ( ⏎ ) sorgt bei einem Formular für das Absenden zum Server
    • Klick auf <button type="submit"> → Formular wird abgesendet
    • Browser führt Validierung für required, email, pattern, usw. aus

Dieses Standardverhalten (engl. standard behavior) bzw. die dabei ausgeführte Standardaktion (engl. default action) ist der Kern von progressive enhancement:

  • Ohne JavaScript ist die Seite trotzdem nutzbar.
  • Der Browser macht grundlegende Arbeit automatisch.
  • JavaScript erweitert, statt zu ersetzen.

Wenn man diese Verhalten nutzt statt überschreibt, entstehen robustere Webseiten.[1]

Interaktive Elemente

Folgende Elemente (in der Kategorie interaktive Elemente zusammengefasst) sind tabbbar, erhalten automatisch focus und reagieren auf Tastatur:

  1. <a> — Links
  2. <button>
    • Space/Enter → löst Klick/Submit aus
    • Fokusrahmen wird automatisch gesetzt
  3. <input> (alle Arten, außer type="hidden")
    • Enter ( ⏎ ) in <input type="text"> → Formular absenden
    • Eingebaute Validierung
    • Viele Input-Typen (date, email) haben eigenes UI
  4. <textarea>
    • Enthält Textcursor
    • Enter ( ⏎ ) fügt neue Zeile ein
  5. <label>
    • Klick auf Label fokussiert das zugehörige Formularelement – ganz ohne JS
  6. <select> + <option>
    • Dropdown öffnet sich automatisch beim Klick
    • Pfeiltasten navigieren Einträge
    • Enter/Space → Auswahl anwenden

Medien-Elemente

  • <audio> — <video>
    Ohne JavaScript verfügbar:
    • Play/Pause
    • Lautstärke ändern
    • Vollbildmodus
    • Zeitleiste
  • Multimedia
    • audio
    • video
    • Playlisten zusammenstellen
     

disclosure widgets

Die wortgetreue Übersetzung Offenlegungs-Widget ist mir zu sperrig, der Begriff Klapp-Boxen zu flapsig.
Sie sind eine Revolution: Wo vorher JavaScript zwingend notwendig war, gibt es jetzt native HTML-Elemente mit voll eingebauter Zugänglichkeit, ganz ohne JavaScript!

Beispiel 
<details>
  <summary>Mehr anzeigen</summary>
  <p>Dies ist der Inhalt.</p>
</details>


dialog-Box ganz ohne JavaScript! 
<button command="show-modal" commandfor="anmelde-dialog">
  Öffne die Dialog-Box
</button>

<dialog id="anmelde-dialog">
   <h2>Anmeldung</h2>
   <form method="dialog">
      ...
     <button id="Anmeldung" value="anmelden">Anmelden</button>
     <button id="Abbruch" value="abbrechen">Abbrechen</button>
   </form>  
</dialog>>


Aber auch ein ganz normales <div> kann zur Infobox werden: Mit dem popover-Attribut!

<div> mit Popover! 
<button popovertarget="additional-info"> → mehr Infos </button>

<div id="additional-info" popover>
  <h4> … </h4>
  <p> … <p>
  <button popovertarget="additional-info" popovertargetaction="hide" class="close-btn">
    <span aria-hidden="true">X</span>
    <span class="sr-only">Schließen</span>
</button>
</div>>


  • Akkordeon mit <details>
    • details und summary
    • Akkordeon
    • Registerkarten (Tab Panels)

    Besonders interessant für FAQs, um Inhalte übersichtlich zu präsentieren.

     
  • modale Dialogfenster
    • dialog-Element
    • modal vs nichtmodal
    •  :backdrop

    Das UI-Element für Web-Apps

     
  • Tooltips mit Popover
    • Popover API
    • Anchor Position

    Neu! Revolutionär!

    Popups ohne Programmieren!

     

Standardaktionen unterdrücken

In einigen Fällen werden solche Elemente benutzt, ohne dass das Standardverhalten ausgeführt werden soll.
In diesem Fall kann man es mit Event.preventDefault unterdrücken.

In einer Lightbox werden Bilder oder (wie hier) Linktexte von einem Link umschlossen, der auf die Ressource der Großansicht verweist. Da ein ständiges Hin- und Herwechseln aber zu umständlich ist, soll auf Klick des Nutzers eine Großansicht innerhalb der Seite erfolgen.

Beispiel ansehen …
<a href="Peru-6.jpg" id="vollbildlink">Bild in Originalgröße ansehen</a>
Die Großansicht wird durch einen Link auf die Ressource des Bildes erreicht. Die ursprüngliche Funktionalität des Links soll durch ein Script unterbunden werden: Beim Klick auf den Link soll nur das Script ausgeführt, nicht mehr das Linkziel angesprungen werden.
document.addEventListener('DOMContentLoaded', function () {
 
  document.querySelector('#vollbildlink').addEventListener('click',function (evt) {
    evt.preventDefault();

    document.getElementById('vollbildlink').innerText = '';
	
    var elem = document.createElement('img');
    elem.src = 'https://wiki.selfhtml.org/images/4/41/Peru-6.jpg';
    elem.alt = 'Ceviche - ein peruanisches Leibgericht';
    document.getElementById('vollbildlink').appendChild(elem);
  });
	  
});

Der Link mit der id vollbildlink erhält eine Handler-Funktion, mit der bei einem Klick die Standardaktion des Links (das Navigieren auf eine andere Ressource) durch Aufruf von preventDefault; unterdrückt wird.

Anschließend wird mit createElement ein img-Element erzeugt, und mit der Punktnotation ein src- und ein alt-Attribut hinzugefügt. Das Ganze wird mit appendChild in das a-Element eingehängt.

  • Bildwechsler
    • Lightbox
      • Thumbnail und Großansicht
      • Bildwechsler
     

Siehe auch

  • Eventhandling
    Ereignisse verarbeiten
    • auf Events reagieren
    • Events weitergeben
    • Standardverhalten unterdrücken
     
  • Was ist ein Webformular?
    • Datenübertragung
    • Formulare absenden
      • Clientseitige Aktionen auslösen
    • Formulare zurücksetzen
     
  • HTML/Tutorials/Kategorien
    (knappe Übersicht)
     

Weblinks

  1. ↑ The default browser action (javascript.info)
  2. ↑ How (Not) to Build a Button (Ben Myers, 30.09.2019)

Abgerufen am 12.12.2025
von "http://wiki.selfhtml.org/wiki/Standardverhalten"