Es sollten keine eigenen HTML-Attribute mit beliebigen Namen mehr benutzt werden. In HTML5 gibt es sogenannte data-Attribute, die stattdessen genutzt werden können. Diese beginnen mit der Vorsilbe data-. Beispielsweise ist data-price als Attributname in Ordnung, nicht aber price.

Im Bereich Attribute können einem Formularelement HTML-Attribute hinzugefügt werden, auf diese dann später wieder im Skriptbereich per Javascript zugegriffen werden kann. Neben eigenen Attributen können auch bestehende HTML-Attribute überschrieben werden, etwa das Attribut type für Input-Elemente.

Hinzufügen eines Attributs

Um ein HTML-Attribut hinzuzufügen, tragen Sie einfach in der Spalte Attribut den Namen des HTML-Attributs und in die Spalte Wert den gewünschten Wert ein. Nach der Eingabe wird automatisch eine neue Zeile für weitere Attribute eingefügt.

Löschen eines Attributs

Ein vorhandenes Attribut wird über das Icon   links gelöscht.

Zugriff auf Data-Attribute mittels JavaScript (jQuery)

Um an einem Element zusätzliche Daten zu hinterlegen, gibt es die sogenannten Data-Attribute. Diese sollten im Namen keine Großbuchstaben enthalten, zudem sollten Wörter durch Bindestriche getrennt werden. Etwa ist data-serial-version ein guter Attributname, dataSerialVersion hingegen nicht.

Beim Zugriff mittels der data-Funktion von jQuery kann der Präfix "data-" weggelassen werden. Zusätzlich entfallen die Bindestriche. Die Anfangsbuchstaben der jeweils folgenden Wörter werden dann in Großbuchstaben geschrieben (camelCase).

Angenommen, am Element tfSerialVer wurde für das Attribut data-serial-version der Wert 1aFXc gesetzt. Dann geschieht der Zugriff über jQuery wie folgt:

const serialVersion = $("[name='tfSerialVer']").data("serialVersion");
console.log("Serial version ist:" , serialVersion);