Referenz zu HTML-Attributen

In HTML haben die meisten Attribute zwei Erscheinungsformen: das Inhaltsattribut und das IDL-Attribut (Interface Definition Language).

Das Inhaltsattribut ist das Attribut, wie Sie es aus dem Inhalt (dem HTML-Code) setzen, und Sie können es über element.setAttribute() oder element.getAttribute() setzen oder abrufen. Das Inhaltsattribut ist immer ein String, auch wenn der erwartete Wert eine Ganzzahl sein sollte. Um beispielsweise das maxlength eines <input>-Elements auf 42 zu setzen, müssen Sie setAttribute("maxlength", "42") auf diesem Element aufrufen.

Das IDL-Attribut ist auch bekannt als JavaScript-Eigenschaft. Dies sind die Attribute, die Sie mit JavaScript-Eigenschaften wie element.foo lesen oder setzen können. Das IDL-Attribut wird immer das zugrunde liegende Inhaltsattribut verwenden (aber möglicherweise transformieren), um einen Wert zurückzugeben, wenn Sie darauf zugreifen und etwas im Inhaltsattribut speichern, wenn Sie es setzen. Mit anderen Worten, die IDL-Attribute spiegeln im Wesentlichen die Inhaltsattribute wider.

Meistens geben IDL-Attribute ihre Werte so zurück, wie sie tatsächlich verwendet werden. Zum Beispiel ist der Standard-type für <input>-Elemente "text", sodass, wenn Sie input.type="foobar" setzen, das <input>-Element vom Typ Text ist (in der Erscheinung und im Verhalten), aber der "type"-Wert des Inhaltsattributs wird "foobar" sein. Das IDL-Attribut type wird jedoch den String "text" zurückgeben.

IDL-Attribute sind nicht immer Strings; zum Beispiel ist input.maxlength eine Zahl (ein signed long). Bei der Verwendung von IDL-Attributen lesen oder setzen Sie Werte des gewünschten Typs, sodass input.maxlength immer eine Zahl zurückgibt und wenn Sie input.maxlength setzen, erwartet es eine Zahl. Wenn Sie einen anderen Typ übergeben, wird dieser automatisch in eine Zahl umgewandelt, wie es von den Standard-JavaScript-Regeln für die Typumwandlung vorgeschrieben ist.

IDL-Attribute können andere Typen reflektieren wie unsigned long, URLs, booleans, usw. Leider gibt es keine klaren Regeln und die Art und Weise, wie IDL-Attribute zusammen mit ihren entsprechenden Inhaltsattributen funktionieren, hängt vom Attribut ab. Meistens werden sie den im Spezifikationsdokument festgelegten Regeln folgen, aber manchmal tun sie das nicht. HTML-Spezifikationen versuchen, dies so entwicklerfreundlich wie möglich zu gestalten, aber aus verschiedenen Gründen (meist historische) verhalten sich einige Attribute ungewöhnlich (select.size zum Beispiel) und Sie sollten die Spezifikationen lesen, um zu verstehen, wie genau sie sich verhalten.

Einige Inhaltsattribute (z.B. required, readonly, disabled) werden boolesche Attribute genannt. Wenn ein boolesches Attribut vorhanden ist, ist dessen Wert true, und wenn es abwesend ist, ist dessen Wert false.

HTML definiert Einschränkungen für die zulässigen Werte von booleschen Attributen: Wenn das Attribut vorhanden ist, muss sein Wert entweder die leere Zeichenkette sein (äquivalent dazu, dass das Attribut keinen Wert zugewiesen hat) oder ein Wert, der eine ASCII-Fall-insensitive Entsprechung für den kanonischen Namen des Attributs ist, ohne voran- oder nachgestellte Leerzeichen. Die folgenden Beispiele sind gültige Methoden zur Kennzeichnung eines booleschen Attributs:

<div itemscope>This is valid HTML but invalid XML.</div>
<div itemscope=itemscope>This is also valid HTML but invalid XML.</div>
<div itemscope="">This is valid HTML and also valid XML.</div>
<div itemscope="itemscope">
  This is also valid HTML and XML, but perhaps a bit verbose.
</div>

Um es klarzustellen, die Werte "true" und "false" sind bei booleschen Attributen nicht erlaubt. Um einen false-Wert darzustellen, muss das Attribut vollständig weggelassen werden. Diese Einschränkung klärt einige häufige Missverständnisse auf: Mit checked="false" zum Beispiel würde das checked-Attribut des Elements als true interpretiert werden, weil das Attribut vorhanden ist.

Zusätzlich zu den in der Tabelle oben aufgelisteten Attributen können globale Event-Handler — wie onclick — auch als Inhaltsattribute auf allen Elementen angegeben werden.

Alle Event-Handler-Attribute akzeptieren einen String. Der String wird verwendet, um eine JavaScript-Funktion wie function name(/*args*/) {body} zu synthetisieren, wobei name der Attributname ist, und body der Wert des Attributs ist. Der Handler erhält die gleichen Parameter wie sein JavaScript-Event-Handler-Gegenstück — die meisten Handler erhalten nur einen event-Parameter, während onerror fünf erhält: event, source, lineno, colno, error. Dies bedeutet, dass Sie im Allgemeinen die Variable event innerhalb des Attributs verwenden können.

<div onclick="console.log(event)">Click me!</div>
<!-- The synthesized handler has a name; you can reference itself -->
<div onclick="console.log(onclick)">Click me!</div>

• HTML-Elemente