HTML Universal-Attibute und Event-Handler

Allgemeine Information
Universal-Attribute
Event-Handler
Beispiele für die Verwendung von Universalattributen


Allgemeine Informationen  
Unter Universal-Attributen sind die Attribute zu verstehen, die in fast allen HTML-Tags erlaubt sind.

Universal-Attribute dienen folgenden Zwecken:
  • HTML-Elemente benennen
  • Spachen-spezifische Einstellungen vornehmen
  • CSS-Beziehungen definieren
  • HTML-Elemente mit Script-Sprachen verknüpfen (Event-Handler).
Mit Hilfe von Event-Handlern (ebenfalls Universal-Attribute) kann man Ereignisse in HTML-Dokumenten mit Script-Anweisungen verbinden (z.B. beim Versenden von Formulardaten ein Formular-Eingabefeld auf Richtigkeit überprüfen oder beim Überfahren einer Grafik, dazugehörige Textinformationen in der Statusleiste des Browsers ausgeben).
Ereignisse, die in HTML-Dokumenten stattfinden können, sind z.B.:
  • Das Überfahren eines Verweises mit der Maus
  • Das Anklicken eines Buttons
  • Das Absenden eines Formulars
  • Das Laden einer HTML-Seite
Event-Handler sind nicht in allen HTML-Elementen erlaubt.
Universal-Attribute  
name Eine Namensvergabe für ein HTML-Element
id Ein dateiweit eindeutiger Name für ein HTML-Element
lang Definiert die Landessprache innerhalb des HTML-Elements
dir Definiert die Laufrichtung der Sprache innerhalb des HTML-Elements
class Weist dem HTML-Element eine Style-Sheet-Klasse zu
style Weist dem HTML-Element Style-Sheet-Anweisungen zu
title Kommentierender Text zu einem HTML-Element
Event-Handler  
Event-Handler Ereignis erlaubt für
onclick Beim Anklicken mit der Maus Formular-Elemente, Verweise
onmouseover Beim Überfahren mit der Maus Verweise
onmouseout Beim Verlassen mit der Maus Verweise
onmouseup Beim Loslassen der Maustaste Verweise
onmousedown Beim Drücken der Maustaste Verweise
onfocus Beim Positionieren auf ein Element Fenster, Formular-Elemente
onblur Beim Verlassen des Elements Fenster, Formular-Elemente
onchange Bei geändertem Wert eines Elements Formular-Elemente
onselect Beim Markieren von Text Formular-Elemente
onsubmit Beim Absenden Formular-Elemente
onreset Beim Zurücksetzen Formular-Elemente
onload Beim Laden Dokument, Grafiken
onunload Beim Beenden Dokument, Grafiken
onabort Bei Abbruch Dokument, Grafiken
onerror Bei einem Fehler-Ereignis Fenster, Grafiken
Beispiele für die Verwendung von Universalattributen  
name

Zwingend erforderlich bei z.B. Frame-Definitionen (als Wertzuweisung für das target-Attribut bei Verweisen) und Formular-Elementen (zur Auswertung durch CGI-Programme)

 Bsp.: Frame-Definition
<frame name="navigation" src="nav.htm">

Bsp.: einzeiliges Eingabefeld
<input name="e-Mail-Adresse" size="30">
style

Einbinden von Befehlen einer Style-Sprache.
Unmittelbar an eine HTML-Element.

 <a style="text-decoration:none" href="abc.htm">
Verweistext ohne Unterstrich
</a>
lang, dir <p lang="de" dir="ltr">
Textabsatz in deutscher Sprachen, Laufrichtung links nach rechts (ltr = left-to-right, rtl = right-to-left)
</p>
title

Zeigt zu jedem HTML-Element ein kleines Hilfefenster (Tool-Tip) an.
Derzeit beim Msie und Ns6, nicht Ns4.x.

 <a href="index.htm" title="zum index">
<img src="logo.gif" width="50" height="50">
</a>
onclick

Beim Anklicken des Buttons "Browser" erscheint in einem einzeiligem Textfeld, die Angabe des verwendeten Browsers.

 <form>
<input size=25 name="b">
<input type="button" value="Browser" onClick="this.form.b.value=navigator.appName">
</form>
onmouseover, onmouseout

Beim Überfahren des Links erscheint der Text ".. zu x" in der Statusleiste des Browsers.
Beim Verlassen des Links wird die Anzeige wieder gelöscht, d.h. mit einem Leerzeichen überschrieben.

 <a href="x.htm"
onMouseOver="status='.. zu x'; return true;"
onMouseOut="status=' '; return true;">
Verweistext
</a>
onload

Beim Laden des Dokuments wird eine JS-Funktion "browserCheck" aufgerufen.

 <body onload="browserCheck()">
Dokument-Inhalt
</body>
onsubmit

Beim Absenden des Formulars mit dem submit-Button wird eine JS-Funktion "pruefen" aufgerufen.

 <form onsubmit="pruefen()">
Formular-Inhalt
</form>