Topics Map > User Guides
Topics Map > REDCap

REDCap: Using HTML to Edit Field Labels

By inserting HTML code to the Field Label text box, you can edit the formatting of your Field Labels.

NOTE: A newer version of REDCap now includes a 'Rich Text Editor' feature. This feature is an easier way to add HTML to your field label and should be used when possible. Some 'quick use' buttons (like underline) are not included in this feature, so you may still use the HTML examples below. We recommend adding the HTML to the 'Source Code' area within the Rich Text Editor as this keeps your Field Label area cleaner (don't see the HTML).

Images demonstrate the use of the rich text editor function
Adding HTML Source Code to the Rich Text Editor Window


What is HTML?

HTML stands for "Hyper Text Markup Language" and is a simple programming language for describing web pages in ordinary text. HTML uses "tags" to describe the behavior you would like to show on the page. Tags are like keywords and are sandwiched between less-than and greater-than symbols "<>" that tells the browser to display content in a particular way. For example, in "<u>" the u is a tag in HTML that tells the browser to underline the text. The majority of tags consist of two parts: the opening and closing tags. These tell the browser where to start and stop the customization. A closing tag is indicated by using a forward slash symbol directly after the less-than symbol "</ >". In the "underline" example, everything between the opening tag and the closing tag will be displayed as underlined.

To the top


How to use HTML in REDCap to Edit Field Labels

  • When adding a new field or editing an existing one, the Field Editor will pop up.
  • You can then add HTML code to the Field Label text box to edit its formatting.
Image shows an example of HTML in the Field Label field
Example of adding HTML to the Field Label window

To the top


Click a button below to see more HTML uses:

   

Unbolding Text

Field Labels are automatically bolded. To unbold certain field text...

HTML Code: <span style="font-weight: normal;">TEXT TO BE EDITED</span>

Example: Weight <span style="font-weight:= normal;"=>(kilograms)</span>

Result: Weight (kilograms)

Italicizing Text

HTML Code: <i>TEXT TO BE EDITED</i>

Example: What is your <i>favorite</i> color?

Result: What is your favorite color?

Underlining Text

HTML Code: <u>TEXT TO BE EDITED</u>

Example: What is your <u>favorite</u> color?

Result: What is your favorite color?

Centering Text

HTML Code: <center>TEXT TO BE EDITED</center>

Example: <center>Centered Text</center>

Result:

Centered Text

Indenting Text

HTML Code: <div style="padding-left:2em">TEXT TO BE EDITED</div>

Example: <div style="padding-left:2em">Indented Text</div>

Result:

Indenting Text

Coloring Text

HTML Code: <font color="CHOOSE COLOR">TEXT TO BE EDITED</font>

Example: <font color="red">Provide a description of the adverse event:</font>

Result: Provide a description of the adverse event:

Instead of "red", you can also type "orange", "yellow", "blue", "green", "violet", "pink", "gray", or use the codes from this website for an expansive list of colors.

Hover Text

HTML Code: <acronym title="HOVER TEXT">ACRONYM</acronym>

Example: <acronym title="Body Mass Index">BMI</acronym>

Result: BMI

Important Text

HTML Code: <center><div class="red"><b>TEXT TO BE EDITED</div class="red"></center>

Example: <center><div class="red"><b>Is subject eligible for study?</div class="red"></center>

Result:

Image shows an important text box
Image result of red highlight box

Creating Headings

HTML Code 1: <h1>TEXT TO BE EDITED</h1>

HTML Code 2: <h2>TEXT TO BE EDITED</h2>

HTML Code 3: <h3>TEXT TO BE EDITED</h3>


Image shows different levels of headings
Image result of Headings within REDcap

Changing Font Sizes

HTML Code: <div style="font-size: XXpt">TEXT TO EDIT CHANGED TO FONT XX</div>

Example:

<div style="font-size: 10pt">Font changed to size 10.</div>

<div style="font-size: 20pt">Font changed to size 20.</div>

Result:

Font changed to size 10.

Font changed to size 20.

You can use any size font you want, just replace the XX in the sample code above with whichever size fits

Link to a Webpage

HTML Code: <a href="INSERT LINK">Words/link to be displayed</a>

Example: <a href="https://kb.wisc.edu/ictr/92573">Using HTML</a>

Result: Using HTML



To have your link open to a new page or tab, include Target="_blank" in your HTML.

HTML Code: <a href="INSERT LINK" Target="_blank">Words/link to be displayed</a>

Example: <a href="https://kb.wisc.edu/ictr/92573" Target="_blank">Using HTML (New Page)</a>

Result: Using HTML (New Page)

Creating an Email Link

HTML Code: <a href="mailto:email@example.com">Email/Name to be displayed</a>

Example: <a href="mailto:redcap@ictr.wisc.edu">REDCap Support</a>

Result: REDCap Support

Creating Line Breaks in Field Notes

When creating Field Notes for reminder text displayed underneath your field, you are unable to press 'Enter' to create a new line. When you type in the Field Notes textbox, it automatically converts it into a paragraph.

Image shows the field notes field in REDCap
Typical field note entry in the field editor window

Image demonstrates the look of field notes on a form
Display of Field Note within a form

If you want to start a new paragraph/line, use the <br> code. For example, if you have a numbered list, typing <br> before each number will enter that number on a new line.

Image demonstrates the use of <br /> described above
Adding a <br> element to add a break in the Field Note
Image shows the results of the operation in the previous immage
New display after break lines have been added

To the top


More Advanced Uses of HTML for REDCap:

Changing the Direction of Matrix Headers

When creating a Matrix of Fields, the column headers are automatically lined horizontally. See the example below:

Image is described in the text above
Normal display of matrix headers 

If you want to change the column headers to the diagonal position, Follow these steps:

  1. Type the code below in place of each choice in the Matrix Column Choices text box.

    HTML Code: <div style="transform: rotate(-45deg); -webkit-transform: rotate(-45deg); white-space: nowrap; position: relative; top: -40px; left: -7px; margin-top: 50px;">TYPE HEADER TITLE HERE</div>

    Image demonstrates rotation of matrix headings
    Adding HTML to option choices to rotate display of Matrix fields

    Image shows the results of the rotation done above
    Final display of rotated matrix headers
  2. The long column headers will overlap the borders of the matrix field as they do above. To get rid of them, add the HTML code <br> to move the subsequent word(s) to the next line.

    Image shows the HTML of the process described above
    Option to add break lines for headers that are too long
  3. Finally, you have your matrix with diagonal column headers that fit within the matrix.

    Image shows the results of the process described
    Display of rotated headers with break lines to fit within window

To the top



Keywords:
HTML edit field label labels 
Doc ID:
92573
Owned by:
Amy S. in SMPH Research Informatics
Created:
2019-06-20
Updated:
2024-03-20
Sites:
SMPH Research Informatics