# Atributos no HTML

> Todos os atributos data-* que o rpgdesk.js liga sozinho: campos, textos, imagens, listas, rolagens, abas e papéis.

Página: https://docs.rpgdesk.com/referencia/atributos/

O rpgdesk.js liga estes atributos sozinho quando a página carrega, e também nos elementos que entram depois. Dentro do `<template>` de uma lista, os caminhos são relativos ao item. Para aprender com exemplos, veja [Campos, listas e abas](https://docs.rpgdesk.com/fichas/campos/).

| Atributo                  | Onde vai                                      | O que faz                                                                                              |
| ------------------------- | --------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
| `data-field="caminho"`    | `<input>`, `<textarea>`, `<select>`           | liga o campo ao documento. Veja a tabela dos tipos abaixo                                              |
| `data-readonly`           | junto do `data-field`                         | o campo nunca edita, para ninguém (mostra o valor)                                                     |
| `data-text="caminho"`     | qualquer elemento                             | mostra o valor do campo como texto                                                                     |
| `data-image="caminho"`    | `<img>`                                       | mostra a imagem guardada no campo; clicar abre a escolha de imagem do RPG Desk para quem pode escrever |
| `data-list="caminho"`     | qualquer elemento, com um `<template>` dentro | repete o `<template>` para cada item da lista                                                          |
| `data-list-add="caminho"` | botão                                         | acrescenta um item vazio no fim da lista                                                               |
| `data-list-remove`        | botão, dentro do `<template>`                 | tira o item                                                                                            |
| `data-roll="expressão"`   | botão                                         | rola na mesa. `{caminho}` vira o número do campo                                                       |
| `data-label="texto"`      | junto do `data-roll`                          | o nome da rolagem. `{caminho}` vira o texto do campo                                                   |
| `data-tabs="grupo"`       | o contêiner dos botões das abas               | um grupo de abas (o nome é opcional)                                                                   |
| `data-tab="nome"`         | botão, dentro do `data-tabs`                  | abre a aba `nome`                                                                                      |
| `data-tab-panel="nome"`   | a seção da aba                                | só aparece quando a aba `nome` está aberta                                                             |
| `data-role="gm"`          | qualquer elemento                             | só os mestres veem (só aparência)                                                                      |
| `data-role="owner"`       | qualquer elemento                             | só o dono e os mestres veem (só aparência)                                                             |
| `data-role="player"`      | qualquer elemento                             | só os jogadores veem (só aparência)                                                                    |

## Os tipos de campo

| Elemento                                   | Grava                                                 | Quando              |
| ------------------------------------------ | ----------------------------------------------------- | ------------------- |
| `<input>` de texto, `<textarea>`           | o texto                                               | enquanto se escreve |
| `<input type="number">`, `type="range"`    | um número; vazio apaga o campo                        | enquanto se escreve |
| `<input type="checkbox">`                  | `true` ou `false`                                     | ao marcar           |
| `<input type="radio">`                     | o `value` do marcado (todos com o mesmo `data-field`) | ao marcar           |
| `<select>`                                 | o `value` da opção                                    | ao escolher         |
| `<input type="date">`, `"time"`, `"color"` | o valor, como texto                                   | ao escolher         |

## Os caminhos

- Nomes separados por ponto: `atributos.forca`.
- Cada nome: letras sem acento, números e `_`, começando por letra ou `_`; até 64 caracteres.
- Até 12 níveis. Maiúsculas não contam. Os nomes que começam com `_rpgdesk` são do RPG Desk.

## As classes que o rpgdesk.js põe

| Classe        | Onde                              | Quando                                 |
| ------------- | --------------------------------- | -------------------------------------- |
| `rd-readonly` | campos, imagens e botões de lista | a pessoa não pode escrever ali         |
| `rd-active`   | o botão `data-tab`                | a aba está aberta                      |
| `rd-ready`    | `<html>`                          | o rpgdesk.js conectou e ligou a página |