It wouldn’t be a character sheet if you couldn’t enter stats like strength score, brawling skill, your character name, and so on. That’s where INPUTs come in.
<input type="number" name="attr_strength" value="10">
<input type="text" name="attr_gender" placeholder="Enter your gender" value="">
<input type="hidden" name="attr_secret_setting" value="0">Code language: HTML, XML (xml)Confusingly, those things inside the brackets are called attributes, which we usually call HTML attributes to distinguish from normal attributes. But if you are on a general HTML help site, and it mentions attributes, it means this kind of thing.
Inputs must always have type and name HTML attributes. They might also have other attributes, like title, placeholder and value.
If you forget to give an input a valid name and type, its value won’t save. So when an input isn’t working properly, the first thing to do is check the type and name.
Input Type
There are several types of input that Roll20 accepts:
- Number: The perfect input for stats. If you try to enter a word, or anything that isn’t a number, it’ll be set to 0.
- Text: Perfect for names, or anything which includes words.
- Hidden: A special input – this isn’t displayed on the sheet. It becomes useful in later chapters of the Guide. It has no use at this point.
- Conditional Inputs: checkboxes and radio buttons are different enough that they get their own post.
- Range: is a kind of number input but it’s designed for setting the position on sliders, scrollbars, and similar things – and that doesn’t work naturally on Roll20. So there’s usually no reason to use this type. It’s just listed here for completeness.
Input Name
When giving an input a valid name and type, you create an attribute. You can then use that attribute in macros, like this:
/roll 1d20+@{strength}Code language: Markdown (markdown)The name of an attribute must start with “attr_” like this:
<input type="number" name="attr_strength">Code language: HTML, XML (xml)Notice that the strength attribute was defined with name=”attr_strength”, but the attr_ part is never used anywhere else. Attr is a special prefix that exists only to tell Roll20 that this is an attribute. It’s used behind the scenes by Roll20 and we – sheet authors and sheet users – never use it directly.
Probably the most common mistake when making a sheet is to forget to include attr_ in the name tag. For instance, using name=”strength” instead of name=”attr_strength”. We’ve all done this, it’s a very easy slipup. So if your inputs aren’t working properly, check that first.
Another mistake is including the attr_ part in rolls, like /roll 1d20+@{attr_strength}. That won’t work either.
Default Value
It’s often a good idea to give attributes default values, like this:
<input type="number" name="attr_strength" value="10">Code language: HTML, XML (xml)That will have a value of 10 until the player manually enters something different. If there is no default value, and the player hasn’t manually entered a score, you’ll get an error if you try to use the attribute in a roll or macro. So it’s a good idea to set a default value for attributes, especially numerical attributes that might be used in rolls.
Placeholder
When you don’t set a default value, you might set a placeholder. This appears in the input as a fake value, but it’s not real and vanishes as soon as players click into the input.
This can be a handy way to enter instructions, to tell the player what is meant to go in this input.
Title
A title is text that appears on mouseover. This is very handy to let people know what an attribute’s name is, so they can easily use it in rolls and macros. You can see an example of that to the right.
<input type="number" name="attr_strength" title="@{strength}" value="10">Code language: HTML, XML (xml)Readonly
If you want to show something in an attribute, but make it fixed so that players can’t change it, give it the readonly attribute as in the code below. The picture to right shows what it looks like – note the greyed out background. This makes it easy to spot attributes that can’t be changed.
<input type="text" name="attr_game" value="Stormbringer" readonly>Code language: HTML, XML (xml)There are generally better ways to include unchangeable text (see Span, later), but readonly inputs become very handy later when making Sheet Workers.
Autocalc Inputs
You often want to show the result of a calculation.
A character’s movement speed might be their dexterity divided by 3. Their hit points might be toughness plus brawn.
You can use an Autocalc attribute to calculate and display these.
<input type="number" name="attr_move" value="round(@{dexterity}/3)" disabled>
<input type="number" name="attr_hit_points" value="@{toughness}+@{brawn}" disabled>Code language: HTML, XML (xml)When making an Autocalc input, enter the expression in the value attribute, and add disabled. This is what makes it an autocalc input.
Many sheets will show disabled=”true” – this works, but in reality, you could put anything here: disabled=”true”, disabled=”false”, and disabled=”pink” all do exactly the same thing. The =”true” part isn’t needed. Only the word disabled matters – everything after it is ignored.
Learn how to make rolls on the Roll20 Dice Roll Reference page, but be warned that some more complicated features won’t work in Autocalc inputs. Generally, anything requiring a { and } will fail.
A Warning About Autocalcs
Experienced coders will tell you that you shouldn’t use Autocalc inputs – use Sheet Workers instead. This is good advice, but when you are starting out making a sheet, you won’t know how to make sheet workers. Autocalcs are very simple and are a good way to start including calculations in a sheet.
That said, there are some drawbacks:
- They are slow, and a lot of them (at least hundreds) can lag a sheet.
- You cant link token bubbles to an Autocalc Input.
- You can’t use them with Sheet Workers. That won’t be a problem for a while, but it’s a common problem that crops up when people start using sheet workers. There’ll be more on that later.
So, once you are skilled enough, it’s best to dump Autocalc inputs and switch to sheet workers. But don’t worry too much about using them when you’re starting out.
