HTML-Attributreferenz

Attributliste

Inhaltsattribute versus IDL-Attribute

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

Das Inhaltsattribut ist das Attribut, das Sie 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 eine Zeichenkette, auch wenn der erwartete Wert eine Ganzzahl sein sollte. Beispielsweise müssen Sie zum Setzen eines maxlength eines <input>-Elements auf 42 mit dem Inhaltsattribut setAttribute("maxlength", "42") für dieses Element aufrufen.

Das IDL-Attribut wird auch als JavaScript-Eigenschaft bezeichnet. 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 es abrufen, und wird 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 wirklich verwendet werden. Zum Beispiel ist der Standardtyp für <input>-Elemente "text", also wenn Sie input.type="foobar" setzen, wird das <input>-Element vom Typ "text" sein (in der Erscheinung und im Verhalten), aber der Wert des "type"-Inhaltsattributs wird "foobar" sein. Das type IDL-Attribut gibt jedoch die Zeichenkette "text" zurück.

IDL-Attribute sind nicht immer Zeichenketten; zum Beispiel ist input.maxlength eine Zahl (ein signiertes Lang). Wenn Sie IDL-Attribute verwenden, lesen oder setzen Sie Werte des gewünschten Typs, sodass input.maxlength immer eine Zahl zurückgeben wird, 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 die JavaScript-Standardregeln für Typkonvertierungen vorsehen.

IDL-Attribute können andere Typen widerspiegeln wie unsignierte Langzahlen, URLs, Booleans usw. Leider gibt es keine klaren Regeln, und die Art und Weise, wie IDL-Attribute in Verbindung mit ihren entsprechenden Inhaltsattributen funktionieren, hängt vom jeweiligen Attribut ab. Meistens folgt es den im Standard festgelegten Regeln, aber manchmal nicht. HTML-Spezifikationen versuchen, dies so entwicklerfreundlich wie möglich zu gestalten, aber aus verschiedenen Gründen (hauptsächlich historischen) verhalten sich einige Attribute seltsam (select.size, zum Beispiel), und Sie sollten die Spezifikationen lesen, um zu verstehen, wie sie genau funktionieren.

Boolesche Attribute

Einige Inhaltsattribute (z. B. required, readonly, disabled) werden boolesche Attribute genannt. Wenn ein boolesches Attribut vorhanden ist, ist sein Wert true, und wenn es fehlt, ist sein 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, das Attribut darf keinen zugewiesenen Wert haben) oder einen Wert, der eine ASCII-Groß-/Kleinschreibung-abgleichende Ü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 zu markieren:

<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 klarzustellen: Die Werte "true" und "false" sind bei booleschen Attributen nicht erlaubt. Um einen falschen Wert darzustellen, muss das Attribut insgesamt weggelassen werden. Diese Einschränkung beseitigt einige häufige Missverständnisse: Mit checked="false" würde beispielsweise das checked-Attribut des Elements als true interpretiert, weil das Attribut vorhanden ist.

Ereignis-Handler-Attribute

Zusätzlich zu den in der obigen Tabelle aufgelisteten Attributen können globale Ereignis-Handler – wie onclick – ebenfalls als Inhaltsattribute für alle Elemente angegeben werden.

Alle Ereignis-Handler-Attribute akzeptieren einen String. Der String wird verwendet, um eine JavaScript-Funktion wie function name(/*args*/) {body} zu synthetisieren, wobei name der Attributname und body der Attributwert ist. Der Handler erhält dieselben Parameter wie sein JavaScript-Ereignis-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 die event-Variable 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>

Siehe auch

• HTML-Elemente