HTML-Attributreferenz

In HTML haben die meisten Attribute zwei Gesichter: 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, selbst wenn der erwartete Wert eine Ganzzahl sein sollte. Zum Beispiel, um maxlength eines <input>-Elements mit dem Inhaltsattribut auf 42 zu setzen, müssen Sie setAttribute("maxlength", "42") auf diesem Element aufrufen.

Das IDL-Attribut ist auch bekannt als eine JavaScript-Eigenschaft. Dies sind die Attribute, die Sie mit JavaScript-Eigenschaften wie element.foo lesen oder setzen können. Das IDL-Attribut verwendet in der Regel (kann aber transformieren) das zugrunde liegende Inhaltsattribut, um einen Wert zurückzugeben, wenn Sie es abrufen, und speichert etwas im Inhaltsattribut, wenn Sie es setzen. Mit anderen Worten spiegeln die IDL-Attribute im Wesentlichen die Inhaltsattribute wider.

In den meisten Fällen geben IDL-Attribute ihre Werte so zurück, wie sie wirklich verwendet werden. Beispielsweise ist der Standardtyp für <input>-Elemente "text", sodass, wenn Sie input.type="foobar" setzen, das <input>-Element vom Typ Text (in Erscheinung und Verhalten) sein wird, aber der Wert des Inhaltsattributs "type" wird "foobar" sein. Das type-IDL-Attribut gibt jedoch den String "text" zurück.

IDL-Attribute sind nicht immer Strings; beispielsweise ist input.maxlength eine Zahl (ein vorzeichenloses langes). Wenn Sie IDL-Attribute verwenden, lesen oder setzen Sie Werte des gewünschten Typs, also gibt input.maxlength immer eine Zahl zurück, und wenn Sie input.maxlength setzen, möchte es eine Zahl. Wenn Sie einen anderen Typ übergeben, wird er automatisch in eine Zahl umgewandelt, wie es die standardmäßigen JavaScript-Regeln für die Typumwandlung vorschreiben.

IDL-Attribute können andere Typen widerspiegeln, wie vorzeichenlose lange, URLs, Booleans usw. Leider gibt es keine klaren Regeln, und die Art und Weise, wie IDL-Attribute im Zusammenspiel mit ihren entsprechenden Inhaltsattributen verhalten, hängt vom Attribut ab. Meistens folgt es den im Standard festgelegten Regeln, aber manchmal nicht. HTML-Spezifikationen versuchen dies so benutzerfreundlich wie möglich zu gestalten, aber aus verschiedenen Gründen (meist historisch bedingt) verhalten sich einige Attribute seltsam (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 sein Wert true (wahr), und wenn es fehlt, ist sein Wert false (falsch).

HTML definiert Einschränkungen für die zulässigen Werte von booleschen Attributen: Wenn das Attribut vorhanden ist, muss sein Wert entweder der leere String sein (gleichwertig dazu kann das Attribut unvergebenen Wert haben) oder ein Wert, der eine ASCII-fallunsensitive Übereinstimmung mit dem kanonischen Namen des Attributs ist, ohne führende oder nachfolgende Leerzeichen. Die folgenden Beispiele sind gültige Möglichkeiten, ein boolesches Attribut auszuzeichnen:

<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>

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

Zusätzlich zu den in der obigen Tabelle aufgeführten 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 Name des Attributs und body der Wert des Attributs ist. Der Handler erhält dieselben 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. Das bedeutet, dass Sie im Allgemeinen innerhalb des Attributs die event-Variable 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