Using HTML

This page was written before REDCap added the rich text editor. This editor allows more advanced formatting, but in some situations the techniques described below may be helpful.

One of REDCap's great strengths is its simple form design, but it is also a weakness. Data collection forms can only have relatively simple formatting but you can use HTML in some places.

Introduction

REDCap supports the use of HTML tags to format text in question labels and response lists. This page is not intended to be an in-depth tutorial on HTML but is a quick guide to using HTML within REDCap.

What is HTML?

(Taken from W3Schools.com - http://www.w3schools.com/html/html_intro.asp)

HTML is a language for describing web pages.
HTML stands for Hyper Text Markup Language
HTML is a markup language
A markup language is a set of markup tags
The tags describe document content
HTML documents contain HTML tags and plain text
HTML documents are also called web pages

HTML Tags

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 spellings are American English (center not centre).

Supported HTML Tags

HTML Tags

Why 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

As an aide to consistency, web sites use style sheets (known as CSS) to define formatting styles that can then be re-used throughout the site. REDCap is no exception and we can use these predefined styles to apply our own 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.

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

</div>

You can also use yellow and green (and maybe others)

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.

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

[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:

Simulating a New Section

Sometimes, you might just want to simulate a section header. For example, when your "header" text needs to change based on branching logic, or when you want a new "section" in a survey without forcing a page break. To do this you can create a descriptive text variable and then use the header class to display the text.

<div class="header">First ER visit</div>

In the image below, see how you can have two consecutive "headers", each with branching.