# HTML attributes

> Every data-* attribute rpgdesk.js connects by itself: fields, texts, images, lists, rolls, tabs and roles.

Page: https://docs.rpgdesk.com/en/referencia/atributos/

rpgdesk.js connects these attributes by itself when the page loads, and also on elements that come in later. Inside a list’s `<template>`, paths are relative to the item. To learn with examples, see [Fields, lists and tabs](https://docs.rpgdesk.com/en/fichas/campos/).

| Attribute                | Where it goes                           | What it does                                                                                    |
| ------------------------ | --------------------------------------- | ----------------------------------------------------------------------------------------------- |
| `data-field="path"`      | `<input>`, `<textarea>`, `<select>`     | connects the field to the document. See the table of types below                                |
| `data-readonly`          | next to `data-field`                    | the field never edits, for anyone (it shows the value)                                          |
| `data-text="path"`       | any element                             | shows the field’s value as text                                                                 |
| `data-image="path"`      | `<img>`                                 | shows the image kept in the field; clicking opens RPG Desk’s image picker for whoever can write |
| `data-list="path"`       | any element, with a `<template>` inside | repeats the `<template>` for each item of the list                                              |
| `data-list-add="path"`   | button                                  | adds an empty item at the end of the list                                                       |
| `data-list-remove`       | button, inside the `<template>`         | removes the item                                                                                |
| `data-roll="expression"` | button                                  | rolls in the room. `{path}` becomes the field’s number                                          |
| `data-label="text"`      | next to `data-roll`                     | the roll’s name. `{path}` becomes the field’s text                                              |
| `data-tabs="group"`      | the container of the tab buttons        | a group of tabs (the name is optional)                                                          |
| `data-tab="name"`        | button, inside `data-tabs`              | opens the `name` tab                                                                            |
| `data-tab-panel="name"`  | the tab’s section                       | only shows up when the `name` tab is open                                                       |
| `data-role="gm"`         | any element                             | only game masters see it (looks only)                                                           |
| `data-role="owner"`      | any element                             | only the owner and the game masters see it (looks only)                                         |
| `data-role="player"`     | any element                             | only players see it (looks only)                                                                |

## Field types

| Element                                    | Saves                                                      | When         |
| ------------------------------------------ | ---------------------------------------------------------- | ------------ |
| text `<input>`, `<textarea>`               | the text                                                   | as you type  |
| `<input type="number">`, `type="range"`    | a number; empty deletes the field                          | as you type  |
| `<input type="checkbox">`                  | `true` or `false`                                          | when checked |
| `<input type="radio">`                     | the checked one’s `value` (all with the same `data-field`) | when checked |
| `<select>`                                 | the option’s `value`                                       | when chosen  |
| `<input type="date">`, `"time"`, `"color"` | the value, as text                                         | when chosen  |

## Paths

- Names separated by periods: `attributes.strength`.
- Each name: unaccented letters, numbers and `_`, starting with a letter or `_`; up to 64 characters.
- Up to 12 levels. Case does not matter. Names starting with `_rpgdesk` belong to RPG Desk.

## Classes rpgdesk.js adds

| Class         | Where                           | When                                       |
| ------------- | ------------------------------- | ------------------------------------------ |
| `rd-readonly` | fields, images and list buttons | the person cannot write there              |
| `rd-active`   | the `data-tab` button           | the tab is open                            |
| `rd-ready`    | `<html>`                        | rpgdesk.js connected and wired up the page |