Attributes

Arbitrary custom HTML attributes are deprecated. HTML5 defines so-called data- attributes that can be used to store custom data in HTML elements. For example, it is ok to use the attributes data-price or data-serial-id, but you should not use attributes such as price or serialId.

The panel attributes lets you add custom attributes to the corresponding HTML elements of each form element. You can access them with JavaScript later, or add existing HTML attributes such as the attribute type for <input> elements.

This panel lets you add custom HTML attributes that may be needed for custom features implemented via JavaScript.

A custom HTML attribute has been added and can be seen when inspecting the generated HTML.

Adding an attribute

To add an HTML attribute, just enter the name and the value of the attribute into one of the columns. A new, empty column will be added automatically.

Deleting an attribute

Click on the icon to the left to delete an attribute.

Accessing data attributes via JavaScript

If you want to add custom data to an element, use the prefix data- for the name. Additionally, the attribute name should contain no uppercase letters and use dashes to separate words. For example, data-serial-version is a good data attribute, dataSerialVersion is not. When accessing these attributes via JavaScript, remove the dashes and capitalize the first letter of each word.

Assuming the attribute data-serial-version was set to 1aFXc for the element tfSerialVer, you can access this data as follows:

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