REDCap supports the use of HTML tags to format text in question labels and response lists.

HTML markup tags are usually called HTML tags

  • HTML tags are keywords (tag names) surrounded by angle brackets like <html> 
  • HTML tags normally come in pairs like <b> and </b> 
  • The first tag in a pair is the start tag, the second tag is the end tag 
  • The end tag is written like the start tag, with a forward slash before the tag name
  • Start and end tags are also called opening tags and closing tags

Tags are “wrapped” around text to provide formatting instructions to the web browser. Like this:

<center>This is the Field Label</center>

In REDCap it would look like this:

Note that for some tags the closing tag is optional. Also the spelling is American English.

 

Tag

Function

Example

<p>

Paragraph (closing tag is optional)

<p>This is a new paragraph

<p>This is another new paragraph</p>

<a>

Anchor. Used to create links to other web pages.

<a href=”http://webpage.com/page”>This is a link</a>

<br>

Line break

Here is some text…<br> Here is some more text.

<br/>

Line break (no closing tag)

Here is some text…<br/> Here is some more text.

<center>

Centres text

<center>Centre this text</center>

<font>

Specified font characteristics.

<font size="3" color="red">This is some text!</font>

<b>

Bold

<b>Bold this text</b>

<i>

Italicise

<i>Make this italic</i>

<u>

Underline

<u>Underline this</u>

<h1>

Large heading

<h1>Make this a heading</h1>

<h2>

Smaller heading

 

<h3>

Even smaller heading

 

<hr>

Horizontal rule (no closing tag)

<hr>

<img>

Include an image. The image has to be accessible from the web, not on your PC!)

<img src="http://test.com/image.jpg" >

<span>

Groups text that will have the same formatting.

My mother has <span style="color:blue">blue</span> eyes.

<div>

Similar to span.

<div style="color:#0000FF">

<h3>This is a heading</h3>

<p>This is a paragraph.</p>

</div>

<em>

Emphasis. The effect will depend on the viewer’s browser.

<em>Emphasize this text.</em>

<strong>

Strong. The effect will depend on the viewer’s browser but typically this will bold the text.

<strong>More text.</strong>

<table>

Defines a table

<table border="1">

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

<td>$100</td>

</tr>

</table>

<td>

Defines a table column

<tr>

Defines a table row

<th>

Defines a table header cell.

When not to use HTML in Field Labels and Choices

Adding HTML to a form/survey will result in the raw html being included in any PDF forms you might make in the project. They will also be included in exported data and scripts that import the data into statistical packages such as SPSS and SAS. If you need to include large sections of formatted text on a form it is often better to use a descriptive text field first. You can then use a smaller piece of text in the question itself.

CSS and Classes

Web sites use style sheets (known as CSS) to define formatting styles that can then be re-used throughout the site. Predefined styles can also be used in REDCap to apply consistent formatting.

Here is an example where a descriptive text question is used as a warning when someone tries to collect another time point in a longitudinal study without checking the enrollment status of the participant first.

 The code looks like this (below). Note the use of the DIV tag to group the text that needs formatting. Style sheet elements are usually used in this way.

<div class="red" style="text-align:center;">

<h3 style="text-align:center;">Participant is not ACTIVE</h3> Please review participant status form before continuing.

</div>

 You can also use yellow, green, blue, brown, gray.

Using smaller italic text for additional data in a question

 Here is a common one for adding some meta-data to a question.

The code looks like:

Were antiplatelet drugs begun on any day prior to the procedure date listed above?

<span style="font-weight: lighter; font-style:italic;">(other stuff here)</span>

Text in a box and colored, centered, larger text using H3

 Here is one for adding a box around some text and centering some larger text for a title.

 

<p style="border:1px solid black;padding:2px;">

<span style="display:block;border:1px solid grey;padding:10px;font- size: 125%;">

I am going to ask you a few questions to determine whether you are eligible to be in the study.

<span style="font-weight: normal; font-style:italic;">

[Interviewer: Ask all questions without stopping until you reach "Determine Eligibility before continuing!"]

</span></span></p>

<h3 style="text-align: center; color: #800000;">Identifying Information</h3>

1. Name:

  • No labels