|
|
| Line 1: |
Line 1: |
| − | <noinclude>
| + | #REDIRECT [[Character_Sheet_Development/HTML]] |
| − | {{revdate}}{{BCS|page}}
| + | |
| − | == Storing User Data ==
| + | |
| − | {{NavSheetDoc}}
| + | |
| − | </noinclude>
| + | |
| − | Most [[HTML]]-elements used for storing user input can be used in Roll20 sheet, but there is one notable difference how it's handled. For each element, you '''must''' include a <code>name</code>-attribute which begins with <code>attr_</code>. This defines the unique attribute-name for the element, and tells that it's an attribute that should be saved to the character. This must also be done for values & attributes that the user can't edit, for that data to be usable in calculations or similar. All these attributes( except from repeating sections) will show up in the [[Character#Attributes_.26_Abilities_Tab|Attributes & Abilities]]-tab on the character sheet, after having been edited for the first time.
| + | |
| − | | + | |
| − | ==== Text & Numbers ====
| + | |
| − | To create a field for saving text or numbers entered by the user, the following elements can be used:
| + | |
| − | | + | |
| − | * <code><input type="text"></code> [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text MDN documentation]
| + | |
| − | * <code><input type="number"></code> [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number MDN documentation]
| + | |
| − | * <code><textarea></code> [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea MDN documentation]
| + | |
| − | | + | |
| − | '''Note:''' <code><input></code>-elements must have a specified type, and the input types that work on Roll20 are: (<code>text</code>, <code>number</code>, <code>hidden</code>, <code>checkbox</code>, <code>radio</code> and <code>range</code>).
| + | |
| − | | + | |
| − | '''Example:'''
| + | |
| − | <pre data-language="html" style="overflow:auto;white-space:pre-wrap;">
| + | |
| − | <input type="text" name="attr_class" value="fighter" > // leave as value="" if you don't want the user to need to delete the default value
| + | |
| − | <input type="number" name="attr_healthpoints" value="10" >
| + | |
| − | <input type="number" name="attr_healthpoints_max" value="10" >
| + | |
| − | <textarea name="attr_notes" value=""></textarea>
| + | |
| − | <input type="range" name="attr_hp" min="0" max="10" value="10"> // max value can't be edited by user
| + | |
| − | </pre>
| + | |
| − | | + | |
| − | If you want the field to utilize the <code>max</code> of an attribute instead of the normal value, you can append <code>_max</code> to the name of the field, e.g. <code><input type="number" name="attr_healthpoints_max" /></code> represents the max value for <code><input type="number" name="attr_healthpoints" value="10" ></code>.
| + | |
| − | | + | |
| − | You can also use a <code>[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span <nowiki><span></nowiki>]</code>-element to display a read-only attribute on your sheet, e.g. <code>< span name="attr_strength_mod"></ span></code>.
| + | |
| − | | + | |
| − | It is possible to use a <code><nowiki><span></nowiki></code>-element to show the same value as an exiting attribute <code><input></code>-element with the same name. Updating the value in the <code><input></code>-element will update the displayed value of the <code><nowiki><span></nowiki></code>-element. (For a <code><nowiki><span></nowiki></code>-attribute to show properly, it needs to be saved on the sheet in some form, either with a normal input or a <code><input type="hidden"></code>
| + | |
| − | | + | |
| − | ===== Default Values =====
| + | |
| − | You can optionally include a <code>value</code>-attribute on any input text/number element, which will define the default value for the field.
| + | |
| − | | + | |
| − | For example, the following would define an "AC" field with a default value of "0". If no default value is specified, it is an empty string ("").
| + | |
| − | <pre data-language="html">
| + | |
| − | <input type="number" name="attr_AC" value="0" />
| + | |
| − | </pre>
| + | |
| − | | + | |
| − | ===== type="text"=====
| + | |
| − | For storing text on the sheet. Also good for any input that is used for a mix of numbers and characters.
| + | |
| − | | + | |
| − | * [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text <input type="text">] MDN Web Docs
| + | |
| − | <pre data-language="html">
| + | |
| − | <input type="text" name="attr_class" value="fighter" >
| + | |
| − | </pre>
| + | |
| − | | + | |
| − | ====== Character Name ======
| + | |
| − | When making an <code><input type="text"></code> for the character name, it's advised to set the <code>name</code>-attribute to be <code>attr_character_name</code>, as this will automatically link/update with the name displayed on the {{journal}}'s character name. It's one of the [[BCS/Pseudo-attributes|pseudo-attributes]].
| + | |
| − | | + | |
| − | <pre data-language="html">
| + | |
| − | <input type="text" name="attr_character_name" />
| + | |
| − | </pre>
| + | |
| − | | + | |
| − | ===== type="number"=====
| + | |
| − | | + | |
| − | By default, small up/down arrows are displayed at the end of the field when it's selected, that can be used to increase/decrease it's value by increments of 1. By default the number field prefers whole integers, and on hover might complain if there is decimal numbers there. By default, there appears up-down arrows on the input when it's selected.
| + | |
| − | | + | |
| − | To allow decimals in the field, add <code>step="any"</code> to the input.
| + | |
| − | | + | |
| − | * '''step''': defines in what increments the input is increase/decrease, and what numbers it allows. When not defined, it's default is "1". Ex. <code>step="0.2"</code>[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#step more info]
| + | |
| − | * '''min, max''': can be used to define the minimum and maximum values allowed in the field. Ex. <code>min="0" max="10"</code> [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#max more info]
| + | |
| − | | + | |
| − | <pre data-language="html">
| + | |
| − | <input type="number" name="attr_hp" step="any" value="10" min="0" max="20" />
| + | |
| − | </pre>
| + | |
| − | | + | |
| − | | + | |
| − | ====== Auto-Calculating Values ======
| + | |
| − | ''Main Page:'' '''[[Auto-Calc]]'''
| + | |
| − | | + | |
| − | You can include a formula in the default value for the field, and specify either <code>disabled="true"</code> or <code>readonly</code> for the input. If you do so, the sheet will display the result of the formula instead of the formula itself.
| + | |
| − | | + | |
| − | For example, this would create a <code>StrMod</code>-attribute, which shows half the <code>Strength</code> value.
| + | |
| − | <pre data-language="html">
| + | |
| − | <input type="number" name="attr_StrMod" value="(@{Strength}/2)" disabled="true" />
| + | |
| − | </pre>
| + | |
| − | | + | |
| − | '''Auto-Calc''' a more simple method than using [[sheetworkers]], but [[Building_Character_Sheets/Auto-Calc#Problems_with_using_Auto-Calc|have several drawbacks]]. Most sheet authors recommend against using auto-calc in anything but the most simple sheets, and in stead use sheetworkers.
| + | |
| − | | + | |
| − | These auto-calculating attributes can be used in [[Button|Sheet Rolls]], [[Macros]], and Abilities as normal.
| + | |
| − | | + | |
| − | | + | |
| − | =====type="hidden"=====
| + | |
| − | Using [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/hidden <input type="hidden">] can be useful to save hidden variables on the character sheet, that the user doesn't need to see. It will save the value of the input, but won't be shown on the character sheet in any way, making it easier to user than having to hide the input with CSS.
| + | |
| − | | + | |
| − | '''Example:'''
| + | |
| − | <pre data-language="html" style="overflow:auto;white-space:pre-wrap;">
| + | |
| − | <input type="hidden" value="10" name="attr_str_mod" value="0" />
| + | |
| − | </pre>
| + | |
| − | | + | |
| − | Usercases for <code>type="hidden"</code>:
| + | |
| − | * [[Sheetworkers]] make good use of them to calculate & save various info and secondary stats sheet users don't need to see
| + | |
| − | * storing the value of an read-only attribute displayed with a <code><nowiki><span></nowiki></code>
| + | |
| − | * Advanced [[Character Sheet Translation]] options
| + | |
| − | * A number of [[CSS Wizardry]] examples.
| + | |
| − | | + | |
| − | ====type="range"====
| + | |
| − | [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range input range -MDN docs] – [https://www.cssportal.com/style-input-range/ Style Input range]
| + | |
| − | | + | |
| − | <code><input type="range"></code> can be used for ''displaying'' a progress bar, but doesn't work for it's intended. See [[CSS_Wizardry#Custom_Progress_Bar|Custom Progress Bar]] for examples.
| + | |
| − | | + | |
| − | Dragging the range's "thumb" to other values doesn't update the actual value saved on the char sheet, so it only works as a display.
| + | |
| − | | + | |
| − | {{ex}}
| + | |
| − | <pre data-language="html" style="overflow:auto;white-space:pre-wrap;">
| + | |
| − | <input type="range" name="attr_hp" min="0" "max="10" value="10">
| + | |
| − | <input type="number" name="attr_hp">
| + | |
| − | <span name="attr_hp"></span>
| + | |
| − | </pre>
| + | |
| − | | + | |
| − | ==== Dropdown menu ====
| + | |
| − | The <code><select></code>-element can be used to save info a pre-determined list of options the user can access from a dropdown menu, which are split into separate <code><option></code>-elements. The <code>multiple</code>-tag for <code><select></code> doesn't seem to work in Roll20.{{forum|permalink/9608444/ <sup>forum post</sup>}}
| + | |
| − | | + | |
| − | * [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select <select> on MDN]
| + | |
| − | * [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option <option> on MDN]
| + | |
| − | * [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup <optgroup> on MDN]
| + | |
| − | | + | |
| − | '''Example:'''
| + | |
| − | <pre data-language="html" style="overflow:auto;white-space:pre-wrap;">
| + | |
| − | <select name="attr_woundlevel">
| + | |
| − | <option value="0" selected="selected">Healthy</option>
| + | |
| − | <option value="1">Stunned</option>
| + | |
| − | <option value="1">Wounded</option>
| + | |
| − | <option value="2">Wounded Twice</option>
| + | |
| − | <option value="5">Incapacitated</option>
| + | |
| − | <option value="10">Mortally Wounded</option>
| + | |
| − | </select>
| + | |
| − | </pre>
| + | |
| − | | + | |
| − | To choose which option is selected by default, include the <code>selected="selected"</code> like in the example.
| + | |
| − | | + | |
| − | '''Optgroup'''
| + | |
| − | | + | |
| − | {{orange| It seems optgroups are currently stripped from sheets since May 2021, see {{fpl|10017485/ discussion}}+[[BCS/Bugs]]. workaround: [[CSS_Wizardry#Optgroup]] }}
| + | |
| − | | + | |
| − | You can use <code><nowiki><optgroup></nowiki></code> to group selections in your <code><select></code>-element. [https://github.com/Roll20/roll20-character-sheets/blob/1835208737e019510bc1feeead17e09735b71eda/Free%20Spacer/FreeSpacer.html#L10 Example of optgroup - Free Spacer sheet]
| + | |
| − | | + | |
| − | <pre data-language="html" style="overflow:auto;white-space:pre-wrap;">
| + | |
| − | <select name="attr_selectedsheet">
| + | |
| − | <optgroup label="Player">
| + | |
| − | <option value="1" selected>PC</option>
| + | |
| − | <option value="2">Ship</option>
| + | |
| − | </optgroup>
| + | |
| − | <optgroup label="Gamemaster">
| + | |
| − | <option value="3">NPC</option>
| + | |
| − | <option value="4">Monster</option>
| + | |
| − | </optgroup>
| + | |
| − | </select>
| + | |
| − | </pre>
| + | |
| − | | + | |
| − | ==== Checkboxes and Radio Buttons ====
| + | |
| − | For checkboxes and radio buttons, you must always specify a <code>value</code>-attribute.
| + | |
| − | | + | |
| − | For checkboxes, if the box is checked the attribute will be set to the value of the checkbox. The value can be anything, and doesn't have to be defined as "1" or "yes". If it is not checked, the value for that attribute is "0".
| + | |
| − | | + | |
| − | If you would like a checkbox to be checked by default, or choose what radio button is selected as default, add the <code>checked</code>-attribute to the input(<code>checked="true"</code> also works).
| + | |
| − | | + | |
| − | * [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox <input type="checkbox"> on MDN]
| + | |
| − | * [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio <input type="radio"> on MDN]
| + | |
| − | | + | |
| − | | + | |
| − | '''Example:'''
| + | |
| − | <pre data-language="html" style="overflow:auto;white-space:pre-wrap;">
| + | |
| − | <input type="checkbox" name="attr_HasShield" value="1" checked >
| + | |
| − | </pre>
| + | |
| − | | + | |
| − | For radio inputs, if one of them is selected, the attribute will be set to the value of that radio input. If no radio input is selected, the value will be an empty string. It's recommended that of the radio inputs should have the <code>checked</code> attribute to set a default value. Radio inputs are the only type of field where it is meant to have more then one field with the same <code>name</code>-attribute, as they are meant to be linked.
| + | |
| − | | + | |
| − | '''Example:'''
| + | |
| − | <pre data-language="html" style="overflow:auto;white-space:pre-wrap;">
| + | |
| − | <input type="radio" value="10" name="attr_Multiplier" >
| + | |
| − | <input type="radio" value="25" name="attr_Multiplier" checked>
| + | |
| − | </pre>
| + | |
| − | | + | |
| − | <noinclude>
| + | |
| − | ==Related Pages==
| + | |
| − | * '''[[CSS Wizardry]]-page''' some clever uses for checkboxes and radio inputs, or how to change their looks.
| + | |
| − | * [[Character Sheet Enhancement]] how to use datalists, and other new things with CSE-sheets
| + | |
| − | * [[Sheetworkers]] How more complicated manipulation & calculation of attributes is handled
| + | |
| − | ** [[Auto-Calc]] older and simpler method for calculating secondary attributes. Recommendation: avoid using if possible
| + | |
| − | | + | |
| − | [[Category:Character Sheet Creation]]
| + | |
| − | </noinclude>
| + | |
