HTML-Attribut-Referenz

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

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

Das IDL-Attribut ist auch als JavaScript-Eigenschaft bekannt. Dies sind die Attribute, die Sie lesen oder setzen können, indem Sie JavaScript-Eigenschaften verwenden, wie element.foo. Das IDL-Attribut verwendet immer (kann es jedoch transformieren), um das zugrunde liegende Inhaltsattribut zurückzugeben, und speichert etwas im Inhaltsattribut, 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 Standard- type für <input>-Elemente "text", also wenn Sie input.type="foobar" setzen, wird das <input>-Element vom Typ Text sein (in der Darstellung und im Verhalten), aber der Wert des "type"-Inhaltsattributs wird "foobar" sein. Das type IDL-Attribut wird jedoch die Zeichenkette "text" zurückgeben.

IDL-Attribute sind nicht immer Strings; 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, möchte es eine Zahl. Wenn Sie einen anderen Typ übergeben, wird dieser automatisch gemäß den Standard-JavaScript-Regeln zur Typkonvertierung in eine Zahl konvertiert.

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

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 Zeichenfolge sein (äquivalent, das Attribut kann einen nicht zugewiesenen Wert haben) oder ein Wert, der eine ASCII-Fallunempfindliche Ü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 ganz weggelassen werden. Diese Einschränkung klärt einige häufige Missverständnisse: beispielsweise würde bei checked="false" das checked-Attribut des Elements als true interpretiert, weil das Attribut vorhanden ist.

Zusätzlich zu den in der obigen Tabelle aufgelisteten Attributen können globale Event-Handler — wie onclick — auch als Content-Attribute auf allen Elementen spezifiziert werden.

Alle Event-Handler-Attribute akzeptieren einen String. Der String wird verwendet, um eine JavaScript-Funktion wie function name(/*args*/) {body} zu erzeugen, wobei name der Name des Attributs und body der Wert des Attributs ist. Der Handler erhält die gleichen Parameter wie sein JavaScript-Event-Handler-Pendant — 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 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