• Intro
• Required fields
• Labels
• A word on attributes
• Values
• Multiple outputs
• Avoiding duplicate fields
• Supported inputs
• Printing < or using /
• Examples

Template Studio uses a subset of HTML-like tags (mainly form element tags), to mark dynamic inputs.

Its philosophy is that your controls are derived from the template itself.

For example, for a simple "Hello World" template, write it like this:

Hello <input />

This will create a form like this:

Hello

Whatever value you write, will automatically be inserted, e.g., if writing 'World!' :

Hello World!

However, since the tag has no 'name' in this example, only one input can be used, which is not very useful.

To fix this, write:

Hello <input /><input name="second"/>

(You can use any name, here, we used 'second.')

Now, you will see two text inputs. If you write 'a' on the first one, and 'b' on the second one, the result appears as:

Hello ab

When new lines are needed, add them to the template:

Hello <input /> <input name="second"/>

The above template will render, for the previous values:

Hello a b

Templates are rendered to a text area, where you can manually edit, add, or remove content.

You might want to prevent editing until a set of required fields are filled (e.g., to avoid 'Hello XXXXXXX' errors, quite common when in a hurry).

To do so, simply add the 'required' attribute to the mandatory elements:

<input required />

The editable text area will be disabled until all required fields are filled, indicating that it is safe to copy and use the template.

Sometimes, you might want to add a visible "name" to a field, so that whoever uses the template knows what the field is intended for (i.e., a label), but that is not part of the rendered template:

Labeled input

To do so, add a 'label' attribute:

<input label='An example' />

Attributes can be enclosed in double or single quotes:

<input label='the label' />

<input label="the label" />

This is useful so that you can add single or double quotes inside the attribute (if single quotes are needed, enclose the attribute in double quotes; if double quotes are needed, enclose the attribute in single quotes).

However, the same type of quotes need to open and close the attribute.

Some inputs "inject" values when used (for example, checkboxes and radio buttons).

This is achieved by using a 'value' attribute:

<input type='checkbox' name='check' value="The 'checkbox' was selected." />

Multi-line values are supported (spaces are respected) :

<input type='checkbox' name='check' value="A multi-line value" />

Sometimes, you might want to have different outputs for the same template. For example, you might want to email a customer, as well as create internal documentation regarding the email.

When using a special "hack," you can create multiple outputs: every time the 'br' tag is applied, the template will be split in multiple outputs:

Initial part of the template. <br /> This part will be a new output. <br /> This part too.

Let's imagine you add a field to enter a support case ID. Instead of something like:

Subject: Support case #<input name='case-id' /> <br /> I will be handling your support ticket #<input name='case-id-2' />

You can use the repurposed 'hidden' input:

Subject: Support case #<input name='case-id' /> <br /> I will be handling your support ticket #<input type='hidden' name='case-id' />

That way, whatever is added to the first field, will be copied to the second one. These will be matched with the 'name' attribute. As can be seen, this works with multiple outputs, too ('<br />').

The following is a comprehensive list of supported inputs.

Text input

This is the default input (when no 'type' attribute is present).

<input name='textInput' />

Result:

Radio buttons

"Choose one" multiple choice input.

<input type='radio' name='radioButtons' value='value A' label="option A"/> <input type='radio' name='radioButtons' value='value B' label="option B"/>

Result:

option A option B

The 'name' attribute must match for all options.

Checkbox

"Choose many" multiple choice input, or 'yes/no.'

<input type='checkbox' name='checkBox' value='Terms accepted' label='terms'/>

Result:

terms

Unordered list

Multiple text controls that display as a bullet list, based on the user input

<ul name='options' label='options'/>

Result:

• Red
• Green
• Blue

Ordered list

Multiple text controls that display as a numbered bullet list, based on the user input

<ol name='options' label='options'/>

Result:

1. Red
2. Green
3. Blue

Drop-down menu

Multiple choice, single selection.

<select name='dropDown'> <option value='Option A'>Option A</option> <option value='Option B'>Option B</option> </select>

Result:

Option A Option B

Textarea

Multiple-line text input.

<textarea name='textArea' />

Result:

Split outputs

Use the 'break' tag to split the outputs (each new 'break' tag splits the outputs).

<br />

Hidden fields

These refer to other inputs, and copy their contents.

Example:

<input name="source" /> <input type='hidden' name='source' />

If you need to print a '<' sign in your output (escape it), instead of handling it as an 'input' control, simply prefix it with a '\' character:

This will _not_ be an \<input />

Similarly, if you need to use a forward slash ('/') symbol anywhere inside a control (tags, attributes and/or values), you need to escape them ('\/').

<select name="slash"><option value="N\/A">n\/a<\option><\select>

Real-life example

Hello Mr/Mrs <input name='lname' />, This is Template Studio, and we will be assisting you with your helpdesk case #<input name='id' /> It is our understanding that you need assistance opening an account. To do so, please send us: <ul name='items' /><br />Requested <input type='hidden' name='items'/>

Comprehensive example

Text input: <input name='text' required/> Radio buttons: <input type='radio' name='radio' label='A' value='Radio A' required/><input type='radio' name='radio' label='b' value='Radio B'/> Checkbox: <input type='checkbox' name='check' value='check' required/> Unordered list: <ul name='ul' required/> Ordered list: <ol name='ol' required/> Drop-down menu: <select name='select' required> <option value='Option A'>Option A</option> <option value='Option B'>Option B</option> </select> Text area: <input name='textarea' required/> <br /> <input type='hidden' name='ul' />