HTML-Attribut-Referenz

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

Das Inhaltsattribut ist das Attribut, das Sie aus dem Inhalt (dem HTML-Code) setzen und das Sie über element.setAttribute() oder element.getAttribute() setzen oder abrufen können. Das Inhaltsattribut ist immer ein String, selbst wenn der erwartete Wert eine Ganzzahl sein sollte. Um beispielsweise das maxlength eines <input>-Elements über das Inhaltsattribut auf 42 zu setzen, müssen Sie setAttribute("maxlength", "42") für dieses 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 wird immer das zugrunde liegende Inhaltsattribut verwenden (es könnte es jedoch transformieren), um beim Abrufen einen Wert zurückzugeben und wird beim Setzen etwas im Inhaltsattribut speichern. 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 Standard type für <input>-Elemente "text", daher wird das <input>-Element vom Typ Text sein (im Aussehen und Verhalten), selbst wenn Sie input.type="foobar" setzen. Der Wert des type-Inhaltsattributs wird jedoch "foobar" sein. Das type-IDL-Attribut wird den String "text" zurückgeben.

IDL-Attribute sind nicht immer Strings; z.B. ist input.maxlength eine Zahl (ein signierter Long). Wenn Sie IDL-Attribute verwenden, lesen oder setzen Sie Werte des gewünschten Typs, deshalb wird input.maxlength immer eine Zahl zurückgeben, und wenn Sie input.maxlength setzen, erwartet es eine Zahl. Wenn Sie einen anderen Typ übergeben, wird er automatisch gemäß den standardmäßigen JavaScript-Regeln für die Typkonvertierung in eine Zahl umgewandelt.

IDL-Attribute können andere Typen widerspiegeln, wie Unsigned Long, URLs, Booleans, usw. Leider gibt es keine klaren Regeln und das Verhalten von IDL-Attributen in Verbindung mit ihren entsprechenden Inhaltsattributen hängt vom Attribut ab. Häufig wird es den Regeln aus der Spezifikation folgen, aber manchmal nicht. HTML-Spezifikationen versuchen, dies so entwicklerfreundlich wie möglich zu machen, aber aus verschiedenen Gründen (meist aus historischen) verhalten sich einige Attribute merkwürdig (select.size zum Beispiel), und Sie sollten die Spezifikationen lesen, um genau zu verstehen, wie sie sich verhalten.

Einige Inhaltsattribute (z. B. required, readonly, disabled) werden boolesche Attribute genannt. Ist ein boolesches Attribut vorhanden, ist sein Wert true und wenn es nicht vorhanden ist, 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 der leere String sein (equivalent, das Attribut kann einen unzugewiesenen Wert haben), oder ein Wert, der eine ASCII-Sensitivitätsproblemmatch der kanonischen Namens des Attributs darstellt, 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 klar zu sein, 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 beseitigt einige gängige Missverständnisse: Mit checked="false" beispielsweise würde das checked-Attribut eines Elements als true interpretiert, weil das Attribut vorhanden ist.

Zusätzlich zu den im obigen Tabelle aufgeführten Attributen können globale Event-Handler — wie onclick — ebenfalls als Inhaltsattribute an 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 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