HTML Data Attributes

HTML5 allows applications and frameworks to define custom data attributes. These are HTML attributes prefixed with data- that enable special behavior, which is unique to the application or framework.

Orb web framework defines the following data attributes.

data-orb-live="[path]"

The data-orb-live attribute specifies the live container attribute.

The HTML element on which this attribute is specified becomes a live element. When the web page is loaded, the web browser subscribes to live updates from the endpoint specified by the path value.

A corresponding live route must be defined in your application, by using the addLiveRoute or liveUpdate method of the Orb class.

The following example declares a <div> container as a live container.
```
<div data‑orb‑live="chat"></div>
```
The element in the previous example subscribes to updates by accessing the /chat endpoint and HTML elements are added, removed, or modified in the live <div> container.
data-orb-live-scroll="false"

By default, when a new element is added to a web page by the data‑orb‑live attribute, the page automatically scrolls to focus on that element. This behavior can be disabled by setting the data‑orb‑live‑scroll attribute to false.
data-orb-trigger="[path]"

The data‑orb‑trigger attribute is the trigger attribute.

The attached element acts as a trigger. When a user clicks it or taps it in the browser, a POST request is made to the endpoint specified by the path value.

If the target route responds with any HTML containers with an HTML element identifier that matches any existing elements, those elements are replaced.
data-orb-trigger-[name]="[value]"

The data-orb-trigger-[name] attribute allows specifying additional POST data to send with the trigger request. The specified name value is used as the field identifier.

The following example creates a <div> containing the text "Todo list" which, when clicked, sends a POST request to the /requestNote endpoint with the POST data noteid=42&prevnote=93.
```
<div data-orb-trigger="/requestNote" data‑orb‑trigger‑noteid="42" data‑orb‑trigger‑prevnote="93">Todo list</div>
```
data-orb-submit="[path]"

The data‑orb‑submit attribute is the submit attribute. It should be declared on a <form> element.

When a submit button associated with the <form> is clicked, a POST request is made to the endpoint specified by the path value.

In all other respects, the data‑orb‑submit attribute uses the same semantics as the data‑orb‑trigger attribute.
data-orb-post="clear"

The data‑orb‑port attribute defines the behavior of an attribute after a submit action has occurred. If set to "clear", the attached element removes any input after the submit action.

In the following example, when the submit button is clicked, a POST request is made to the /send endpoint, and any text entered in the "message" field is automatically removed.
```
<form data-orb-submit="send">
    <input type="text" name="message" data-orb-post="clear">
    <input type="submit" value="Send message">
</form>
```
data-orb-input="[name]"

The data‑orb‑input attribute allows specifying a form data name for an element that does not allow a name attribute to be declared, and causes the contents of that element to be sent as POST data when a form using the data‑orb‑submit attribute is submitted.

The specified name is used as the field identifier in the POST data.

For example, this can be used to allow submitting the user‑entered text of a <div> container that is declared contenteditable, when typically only <input> fields and <textarea> elements would be submitted.
data-orb-navigate="[path]". The data-orb-live attribute specifies the URL that interacting with an Orb View element will request. For details, see "Orb Views", elsewhere in this document.